WordPress Theme jQuery and JavaScript Usage Tips

jQuery grew in popularity exponentially in last couple years, and is pretty much a standard “tool” of a web developer. jQuery 1.5 is due soon, expected with hope to come again with some great new features.

jQuery wordpress What’s the best way to use jQuery and JavaScript in our WordPress themes tho? According to the WP Codex the wp_enqueue_script() function should be used instead of the typical <script> tag. I prefer using wp_enqueue_script() in my theme’s functions.php but I do see people using it directly in the theme’s header.php.

WordPress has already jQuery included, so in order to make the library available in our theme, we can just use:
[ad]

wp_enqueue_script( 'jquery' );

However jQuery will be loaded in no-conflict mode, therefore instead of the $ alias we would use jQuery. So instead of the:

$(document).ready(function () {
	$(selector)...
});

we need to use:

jQuery(document).ready(function () {
	jQuery(selector)...
});

I prefer tho using the $ alias, so I do pass it to the function:

jQuery(document).ready(function ($) {
	$(selector)...
});

The scripts we “enqueue” this way will be also available for use in the WP backend, which is normally not what I’m after, so the
if ( !is_admin() ) comes in handy.
I do normally use some default styles (jQuery dependent) which I want to apply to all pages and store these in my external file moonpixel.js, and usually there are also other jQuery dependent scripts which I would like to apply only to certain pages. These scripts need to be registered and then “enqueued”. So at the end of the day I do end up with something like this in my functions.php:
[ad]

// javascript on init
function theme_init()
{
    if ( !is_admin() )
		{
			wp_enqueue_script('jquery');
			wp_register_script('moonpixel', get_template_directory_uri() . '/_scripts/moonpixel.js', array('jquery'), '1.0' );
			wp_register_script('contact', get_template_directory_uri() . '/_scripts/contact.js', array('jquery'), '1.0' );
			wp_register_script('gallery', get_template_directory_uri() . '/_scripts/gallery.js', array('jquery'), '1.0' );
			wp_enqueue_script('moonpixel');
		}
}
 
add_action('init', 'theme_init');
 
 
// javascript in the theme - template based
function enqueue_template_specific()
{
    if ( !is_admin() )
		{
			if ( is_page_template('page-contact.php') )
			{
				wp_enqueue_script('contact');
			}
			if ( is_page_template('page-patient-gallery.php') )
			{
				wp_enqueue_script('gallery');
			}	
		}
}
 
add_action('wp_print_scripts', 'enqueue_template_specific');

I do use the jQuery ready handler within the external scripts, so these end up looking like this:

jQuery(document).ready(function ($) {
	$('.navigation ul li:first-child').addClass('first');
	$('.navigation ul li:last-child').addClass('last');
	$('hr[noshade]').css({border:'none'});
        ...
});
  • Hung@ry

    cool tips, instead of using the jQuery which comes with WP, you could use also the Google hosted one:

    if( !is_admin()){   wp_deregister_script('jquery');   wp_register_script('jquery', ("http://ajax.googleapis.com/aja..."), false, '');   wp_enqueue_script('jquery');}