Category Archives: WordPress

Use the New WordPress 3.5 Color Picker in a Plugin

One of the many new features in WordPress 3.5 is the Iris color picker.  Iris replaces the, now deprecated, Farbtastic color picker script.  The new Iris color picker is shown off in the Theme Customizer for the Twenty-Twelve theme.

As soon as I saw Iris, I fell in love. She is user-friendly, colorful and fun. I found that implementing the new color picker is very similar to Farbtastic.

Iris Color Picker Demo Plugin

To use the Iris color picker in a plugin requires:

  1. Running a version of WordPress that is 3.5 Beta or higher.
  2. Loading the ‘wp-color-picker’ script and style into your plugin options page.
  3. Adding a text input for your color value to your plugin options page.
  4. Writing a custom jQuery script to call Iris’s wpColorPicker method on your color text input field(s).

How does the code look for implementing steps 2-4?
I created a demonstration plugin to help answer that. The plugin doesn’t do anything itself, it is intended as a guide for developers interested in using the new Iris color picker in a WordPress plugin.

View on Github

Iris Color Picker Demo Plugin

Font Awesome Icons WordPress Plugin

Font Awesome plugin banner

Font Awesome is my favorite of the free font icon sets. All of the 220 pixel perfect icons are well designed, have great cross-browser support and are easy to use.

I am using the Font Awesome icon set to display the social icons to the header area of this site. I wanted to be able to use the icons without having to rely on my current theme, so I created a simple WordPress plugin.

The Font Awesome Icons plugin adds the Font Awesome font and necessary styles to any WordPress site. The plugin is available to download from the WordPress plugin repository or from my Github account.

Update October 7, 2012:
The plugin is no longer available from the WordPress plugin repository, but it is still available for download from it’s Github repository.

Download from Github

Usage Instructions

To use any of the Font Awesome icons on your WordPress site you have two options:

1. HTML Option

All code examples on the Font Awesome site apply: http://fortawesome.github.com/Font-Awesome/#code

Examples:
[prettify class="html"][/prettify]
[prettify class="html"][/prettify]
[prettify class="html"][/prettify]

2. Shortcode Option

Don’t want to worry about HTML tags? You can use a shortcode in your posts, pages and even widgets to display a Font Awesome icon.

The shortcode to use is [icon name=name-of-icon], where name=X is the class of the icon you would like to use.

Examples:
[prettify][icon name=icon-pencil][/prettify]
[prettify][icon name=icon-phone][/prettify]
[prettify][icon name=icon-chevron-left][/prettify]

Full Icons Set

Font Awesome Icon Set Full Vector List

WordPress Plugin Repository Now Requires Plugin URL

I went to the WordPress Plugin Repository today to submit a new plugin. While going through the submission process, I stopped and smiled when I saw something new.

The plugin submission form now has a new field requiring a link to a zip file of the entire plugin contents.

WordPress Plugin Repository submission form

This looks to be a step toward moving the plugin review process to be as through as the theme review process and will improve the overall code quality in the WordPress Plugin Repository.

Slides from WordCamp Milwaukee Presentation on WordPress Navigation

I held a session at WordCamp Milwaukee about WordPress Navigation Menus. I’ve shared the slides on SpeakerDeck, and you can download the child-theme with all the code referenced in the presentation from Github.

Thank you to all the attendees of my session. I hope everyone was able to get something out of it! I had some great discussions afterwards about working WordPress Navigation. So good luck to all of you with getting started with creating your own “zazzy” WordPress Menus.

Download Slides

 

Download Theme Files

WordCamp Milwaukee: Zazzy WordPress Menus

I am excited to be part of a pretty steller speaker lineup for WordCamp Milwaukee on June 2 & 3rd, 2012.

Tickets for WordCamp Milwaukee are still available for only $20.00 a person. Purchase a ticket now.

My topic will be customizing WordPress menus (in a slightly modified version of my talk at WordCamp Atlanta), or as I have titled it…

Zazzy WordPress Menus with CSS Tricks and jQuery Magic

Zazzles the Cat

Navigation is among the most important elements of a website’s design. Effective navigation allows visitors to quickly and easily find desired content, keeping them on your site.

The session will begin with a review of the custom menu structuring from within WordPress, including how to extend the flexibility of the Menus screen with available screen options. Then we will move onto how you can style your navigation menu with modifications to your theme’s CSS stylesheet. We will cover:

  • using and styling submenus
  • adding icons to navigation items
  • changing the formatting of hovered or active items
  • adding support for menu item descriptions

Finally, I will demonstrate a few more advanced techniques using jQuery and CSS that can improve your visitor’s experience and improve conversions.

  • Split long drop-down menus into columns

More

Did you notice 6 of the 14 speakers are female :)

Update: June 2, 2012

Looking for the slides or theme files used in this presentation?

View Presentation Slides

Where to Find Professional WordPress Developers

I am not the right fit for every WordPress development project. When I have to turn down a prospective client project, I recommend another developer when possible.

Often I cannot think (or do not know) of a specific developer that meets the needs of the project. I want to be helpful, so I do the next best thing. I suggest three resources that list quality WordPress developers:

WP Candy Pros

WPCandy Pros

WP Candy, the WordPress news and information blog, hosts the most complete directory of WordPress professionals. The directory can be filtered by region, specialty and price range.

WP Engine’s Consultants

WP Engine WordPress Consultant Listing

The specialized WordPress hosting service, WP Engine recently started their own consultants/developers list that includes specialties, bios, price-ranges and contact information. The consultants/developers WP Engine lists are hand-picked as resources to recommend to their own hosting clients.

Code Poet Directory

Code Poet Directory

Automattic, the company behind WordPress, maintains the Code Poet Directory. The companies and individuals in the directory can be filtered by region, specialty, platform and price-ranges. Those listed are considered to be enterprise-level WordPress professionals, web designers and developers.

Async Social Sharing Plugin Options Page

Async Social Sharing WordPress Plugin

Async Social Sharing Screenshot

I have never found a WordPress social sharing plugin that I loved. I just wanted a simple social plugin that would load any external scripts asynchronously, allowed me to share my posts on Twitter, Google+, Linkedin and Hacker News and never included the words “Sharing is sexy!“.

A few weeks ago I started working on developing my own social sharing plugin, and today it is available to the public via Github.

Download from Github

I hope to have the plugin approved and available via the WordPress plugin repository within the next week.

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

Features

The Async Social Sharing plugin loads the third-party social scripts asynchronously to improve site performance.

The plugin allows you to display the following sharing widgets:

  • Twitter
  • Facebook
  • Google+
  • Linkedin
  • Hacker News

An options panel is provided to allow unwanted social widgets to be disabled:

Async Social Sharing Plugin Options Page

Why is Asynchronous script loading better?

Asynchronous loading allows multiple files to load parallel to each other. Instead of having to wait for Twitter to respond with their script, the browser moves on and starts fetching the next request.

Async Social Sharing Firebug Performance

Credits

JavaScript code was inspired by Stoyan Stefanov’s Social Button BFFs blog post.
HackerNews button code by Ilya Grigorik


 

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

Sunburst Code Prettify WordPress Plugin

I have been using Github Gists and the Codebox application to save and share my code snippets, but I wanted to start posting them here on my website to make them easier to find and update.  I wasn’t quite happy with any of the existing code syntax highlighting plugins for WordPress, so I built my own, Sunburst Code Prettify.

Sunburst Code Prettify uses Google Code Prettify, a JavaScript module and CSS file that allows syntax highlighting of source code snippets. This plugin contains the CSS file for the Sunburst theme syntax highlighting formatting. You can find the other available syntax highlighting themes available in the Code Prettify Theme Gallery

Download from WordPress.org

HTML Example

[prettify class="html"]

Reset via Normalize

As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

The new reset can still be found in reset.less, but with many elements removed for brevity and accuracy.

[/prettify]

CSS Example

body {
text-align: left;
color: #222;
font-size:1.6em; /* 16 px equiv */
line-height: 1.5em; /* 24px equiv */
position: relative;
background-color: #22252E;
background-image: url(../halfbaked/images/linen.png);
background-repeat: repeat;
padding-top: 4.5em;
}

PHP Examples

[prettify class="php"]if (have_posts()) : while (have_posts()) : the_post(); [/prettify]

 $ideas_posts = $wpdb->get_results(
"SELECT * FROM $wpdb->posts
WHERE post_status = 'draft'
AND post_type = 'post' ORDER BY post_date DESC");
foreach ($ideas_posts as $memberpost):

JavaScript Example

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

Ruby Example

    # Formats date either as ordinal or by given date format
    # Adds %o as ordinal representation of the day
def format_date(date, format)
    date = datetime(date)
    if format.nil? || format.empty? || format == "ordinal"
        date_formatted = ordinalize(date)
    else
        date_formatted = date.strftime(format)
        date_formatted.gsub!(/%o/, ordinal(date.strftime('%e').to_i))
    end
    date_formatted
end

BootstrapWP: WordPress Theme Development Continues

Screenshot of BootstrapWP Version 1.0 in progress

On January 31st, Twitter released version 2.0 of their popular Bootstrap framework complete with a responsive stylesheet and new components. I have been working to keep BootstrapWP, the WordPress theme for Bootstrap as up to date as possible.

If you have been using any previous versions of the BootstrapWP for theme development, I encourage you to switch to the development branch on Github. The development branch contains many bug fixes along with overall style and device response improvements.

Usage: Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need

All development updates are displayed on the Demo site: http://www.rachelbaker.me/bootstrapwp/

BootstrapWP Development Change Log

 

Header.php

  • Added body data attributes: data-spy=“scroll” data-target=“.subnav” data-offset=“50” data-rendering=“true”

  • Changed navbar class to Bootstrap default of “navbar-fixed-top”

  • Updated wp_nav_menu function array, added “‘container’ => ‘div’, ‘container_class’ => ‘nav-collapse’,” to provide div wrapper with proper class

Functions.php

  • Added bootstrap-responsive.css to bootstrapwp_css_loader function

  • Added application.js to bootstrapwp_js_loader function and removed tablesorter.js

  • Revised pagination section to use ul class=“pager” instead of div id=“pagination”

Page-JSGuide.php

  • Updated Javascript Guide Template to match content from Bootstrap javascript.html file

Footer.php

  • Removed jQuery onload functions that are now all called in application.js

  • Added jQuery append function to automatically apply b class=“caret” to dropdown menu items in navbar

Style.css

  • Updated icon image location to match theme setup

  • Added .icon-white class with corrected image location

  • Removed over-ride of body padding to allow correct spacing with fixed navbar

  • Added styles for comment form

  • Added color primary button colors for comment and search submit buttons

Index.php

  • Edited content on index.php template to directly correlate with index.html Bootstrap file

Other/Misc.

  • Updated CSS and JS files to Bootstrap 2 Final Release files

  • Removed “lib” folder and replaced with Bootstrap “less” folder

  • Removed tablesorter.js file – as it is no longer used in Bootstrap 2.0

  • Removed wordpress.css file – as it is no longer used in Bootstrap 2.0

Bootstrapwp Theme: Twitter Bootstrap for WordPress

BootstrapWP Theme

I released Bootstrapwp, a powerful base WordPress theme powered by Bootstrap. Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components. Now you can use it with WordPress as a solid base to build custom themes quickly and easily.

Latest version release: .7 (01/22/2012)

You can view a demo of the Bootstrapwp theme running on WordPress at: http://rachelbaker.me/bootstrapwp/
View the style guide: http://rachelbaker.me/bootstrapwp/style-guide/
View the Javascript guide: http://rachelbaker.me/bootstrapwp/javascript-for-bootstrap/
Continue reading