Don’t focus on having a great blog. Focus on producing a blog that’s great for your readers. — Brian Clark

Include the Latest Version of jQuery in WordPress without Duplicates

Posted by Vincent on 15 June 2010 9:15 AM in Wordpress Help | 1 Comment |

At the time of this posting, WordPress 2.9.2 uses jQuery 1.3.2 but the latest version is 1.4.2. I wanted to use the latest version because it is supposedly about 3 times as fast as 1.3.2 as reported on the jQuery 1.4.2 release notes.

jQuery is automatically included in WordPress depending on the plugins or templates you use. Some of the plugins I use like the NextGen gallery plugin require jQuery to function properly.

The Wrong Way to Include jQuery into WordPress

Including jQuery into a normal web site is pretty straightforward. You simply add a line in between the <head> tag of your web page to load an external Javascript file.

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

If you did this in the WordPress header.php template file, you would end up with 2 versions of the jQuery library on your WordPress site instead of one! It is imperative that you only have 1 version of jQuery on your web site because 2 versions running at the same time may cause compatibility problems.

The Right Way of Including jQuery into WordPress

In your functions.php template file, add the following code to load the latest version of jQuery.

#THIS FUNCTION INCLUDES THE JQUERY LIBRARY INTO NON-ADMIN WORDPRESS PAGES
function jquery_initialise()
{
	#PAGE IS NON-ADMIN
	if(!is_admin())
	{
		#DEREGISTER DEFAULT JQUERY INCLUDES
		wp_deregister_script('jquery');
 
		#LOAD THE LOCAL JQUERY INCLUDES
		wp_register_script('jquery', '/wp-content/themes/mwc1/js/jquery-1.4.2.min.js', false, '1.4.2', false);
 
		#REGISTER CUSTOM JQUERY INCLUDES
		wp_enqueue_script('jquery');
	}
}
 
#INITIALISE JQUERY LIBRARY
add_action('init', 'jquery_initialise');

In the example above, I made a reference to a self-hosted copy of jQuery. What that means is I downloaded a copy of jQuery, uploaded it to my web site and referenced it from my WordPress installation.

There are a few CDN-hosted copies of jQuery. The most popular one is the Google Ajax API CDN. Here’s how you include the Google Ajax API CDN’s copy of jQuery into WordPress.

#THIS FUNCTION INCLUDES THE JQUERY LIBRARY INTO NON-ADMIN WORDPRESS PAGES
function jquery_initialise()
{
	#PAGE IS NON-ADMIN
	if(!is_admin())
	{
		#DEREGISTER DEFAULT JQUERY INCLUDES
		wp_deregister_script('jquery');
 
		#LOAD THE GOOGLE API JQUERY INCLUDES
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', false);
 
		#REGISTER CUSTOM JQUERY INCLUDES
		wp_enqueue_script('jquery');
	}
}
 
#INITIALISE JQUERY LIBRARY
add_action('init', 'jquery_initialise');

Once you have added the code above to the functions.php template, you will only have 1 version of jQuery in your WordPress without duplicates.

Similar Posts

Facebook Comments

1 Trackback On “Include the Latest Version of jQuery in WordPress without Duplicates”

Post a Comment


(Required)


(Required)