We’re big fans of open source at Bailey. Many of the tools and technologies we use to create websites fall into the open source spectrum. One such tool that we’ve become very fond of is WordPress. We’ve used WordPress to create customized CMS driven sites for several clients, with great success. We even used it to power our own website! Throughout the many projects we’ve used WordPress on, I’ve picked up a few tips and tricks that help streamline the development process and make working with WordPress that much more exciting. In the spirit of the open source community from which WordPress comes from, I’d like to share a few of those items with you. Some may be common sense, others not so much, but I find them all useful.

1. Theme Development
If you’re using one of the default themes (the Twenty Eleven default theme is a great place to start), make sure you duplicate the theme directory and rename your copy to something unique before you start modifying. This keeps the default theme intact, and should you do serious damage to your custom theme, or your WordPress installation seems to have gone south, you can simply revert to the default theme and immediately rule out your custom theme as being the problem. Another bonus is that when you do a core upgrade, you don’t lose your customizations as you would if you were merely making changes to the default theme.

2. Working with jQuery
While it’s not mandatory to write a single line of jQuery code to create a custom WordPress theme, it’s my favorite JavaScript library at the moment, so I tend to use it on almost every project I work on. Problem is, depending on your plugin situation, WordPress may need to load other JavaScript libraries that conflict with jQuery’s use of the ‘$’ character. In most cases, any issues regarding this can be easily avoided by simply initializing jQuery in no-conflict mode and passing the ‘$’ as a parameter on document ready.

Instead of this:

$(document).ready(function(){
//run when DOM is loaded and ready to be manipulated
});

Do this:

jQuery(document).ready(function($){
//run when DOM is loaded and ready to be manipulated
});

This allows the use of the ‘$’ inside the ready function without conflicting with any other libraries that may be loaded.

3. Use WordPress to handle loading CSS and JavaScript
Using wp_register_style and wp_register_script to load CSS and JavaScript helps to keep things organized. Instead of having to copy and paste from header to footer, or footer to header to change when your scripts get loaded, you can simply change a parameter in the register function to specify loading in the header or footer. You can then use add_action to call your register functions with WordPress’ init hook. Another practice I’ve found useful is to load scripts from Google Code whenever possible if you’re not using your own CDN solution.

function my_init() { // load remote version of jquery in the footer
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', false, '1.6.1', false);

}
}
add_action('init', 'my_init');

This takes away some of the work your host has to handle, and loads jQuery through Google’s CDN, which generally helps with page load time, since there’s a good chance your visitor has already cached the script from viewing another site. As an added bonus, it makes updating to the newest version of the script as easy as changing a version number.

4. Use Plugins
Chances are, if you’re trying to do it, someone else has already done it, or at least done something very similar. A few of my favorites are Formidable Forms (http://wordpress.org/extend/plugins/formidable/) to handle user input forms, Advanced Typekit (http://wordpress.org/extend/plugins/advanced-typekit/) for loading the Typekit js library and administering it from within the WordPress admin, and Pods (http://wordpress.org/extend/plugins/pods/) for enhancing WordPress to turn it into a more robust platform for relationship-based content management.

5. Helper functions
Every developer has a set of functions that they regularly use project after project. While working with WordPress (Pods data specifically), I found myself regularly needing to view contents of arrays to verify that the correct data was being pulled in, or to view how deeply certain data I desired was nested within an array. I stumbled upon a simple modification of the php print_r function which formats an array into a much more human-readable way. This then transitioned into making the function into a plugin, in which you can customize the array output from within the WordPress admin. You can download it here (http://wordpress.org/extend/plugins/print-array/). Hopefully you find it as useful as I do.

6. Styling hooks
Something I’ve found very useful when working with WordPress is to add the page/post name as a class to the body element on every page. This gives you an easy way to target specific pages within your CSS without having to write a bunch of clumsy if statements to add special classes or IDs in later on. This is similar to the way the Twenty Eleven theme adds an ID to the html element using IE’s conditional comments. It allows you an easy way to target specific browsers without having to write any Javascript browser detection or use CSS hacks.