Using jQuery With WordPress: A Quick Crash Course and Performance Tips

We’re going to be starting a series on innovative ways to use jQuery with WordPress and BuddyPress.

Before starting we should look at a couple of basics.  The first foundational item you will need in order to start adding jQuery effects to your WordPress site(s) is how to include jQuery in your theme.

If you’re developing a straight XHTML / CSS site, then the process is fairly straightforward. However, different CMS’s have various dynamic ways of calling JavaScript libraries into the site’s theme.

Usually, WordPress will load the version of jQuery included in /wp-includes/  by calling:

wp_enqueue_script('jquery');

There’s nothing wrong with this, but if you’d rather tap into Google’s AJAX Libraries API to increase your site’s performance, here’s how you do it:

How to Load jQuery From the Google Ajax Library

Copy and paste this into your functions.php file:

function my_init() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');

Source: Eric Martin of ericmmartin.com

Google keeps these files indefinitely, so you don’t have to worry about them one day disappearing and not being available for your site. I recommend using Google libraries, whether through a plugin or by adding to your theme’s functions. Anything that will make your site even the slightest bit faster will help you to gain a competitive edge.

Add Google Libraries to WordPress Using a Plugin

If you prefer the plugin option, then you can get the same function as above plus whatever options your plugin provides. Use Google Libraries supports a number of JavaScript libraries and lists the following as benefits for performance:

• increases the chance that a user already has these files cached
• takes load off your server
• uses compressed versions of the libraries (where available)
• Google’s servers are set up to negotiate HTTP compression with the requesting browser

How to Load jQuery in the Footer

Add this to your functions.php files:

function my_init() {
if (!is_admin()) {
wp_deregister_script('jquery');

// load the local copy of jQuery in the footer
wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);

// or load the Google API copy in the footer
//wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);

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

This is what the function above does:

1. It de-registers the local copy of jQuery that is ordinarily used by WordPress
2. It registers WordPress’ copy of jQuery and places it in the footer.
3. OR It calls the Google Library to load jQuery and places it in the footer. (if you uncomment that section)

After you do these things, then you’re safe to register your other external JavaScript files that you’re using.

The reason for loading jQuery in the footer is that it isn’t usually any use until all the content has been loaded anyway. Why make your users wait while your site loads all of your scripts before your content?

The server can only load so many requests at a time from a website. Unless jQuery is modifying the DOM as part of its functionality, you’re safe to put your scripts in the footer.

This post should be enough to get you started playing with jQuery and WordPress. Stay tuned for some more jQuery tutorials next week for enhancing your WordPress and BuddyPress sites!

Tags:

• javascript
• jquery