Using jQuery with WordPress

If you’re a theme developer, you’ll (perhaps) be looking at keeping up with the latest in javascript/AJAX and incorporating a few tweaks into your brand new theme – in some ways, it’s been made very easy for you (and in one or two ways it’s just a little tricky…)

So, assuming you have a basic knowledge of PHP, theme design and javascript, here’s how it works:-

Loading up jQuery

WordPress arrives with jQuery already bundled, so this bit’s easy enough. But we need to get it loaded onto the page, which doesn’t happen automatically…

The plan here would be to get some nice tabbed divisions going, maybe in the sidebar, courtesy of jQuery.

<?php
add_action('template_redirect', 'them_js_head_load');

function them_js_head_load(){

 // we don't need this on admin pages, so...
	if(is_admin()) return;

      wp_enqueue_script('tabber', get_bloginfo('template_directory') . '/scripts/tabs.js', array('jquery', 'jquery-ui-core', 'jquery-ui-tabs'), '1.0');
}
 ?>

In this code, we’ve enqueued a custom script tabs.js, that’s going to initiate the whole process – and we’ve also declared its dependencies – jquery, jquery-ui-core, jquery-ui-tabs, the user interface sublibraries, also bundled into WordPress as standard.

These are already registered, so only the handle is required, here: ‘jquery-ui-tabs’, etc.

The full list of bundled libraries is at: WordPress wp_enqueue_script.

Vital! – The snippets of jQuery code you’ll find while out and about on the net make extensive use of the shortcut $ to express the jQuery global object. This isn’t going to work in WordPress, so at all times we use jQuery(document).ready(function($) – and then it will work… Once inside the function, we can use $ as a shortcut.

The reason for this slight complication is that Prototype and Scriptaculous libraries arrived first into WordPress and have got to hold on to using the $ shortcut. And don’t be tempted to dabble with jQuery.noConflict() here – you won’t get good results.

And from here, since you know what you want to put in your theme in terms of flashy javascript/AJAX add-ons, I’ll leave you to get on with thieving some snippets and getting them up and running….

* Update – some of this information is superseded by changes in the way WordPress handles the loading of javascript – there’s a follow-up here – More about WordPress and jQuery