Include the Latest Version of jQuery in WordPress without Duplicates

Posted by admin_mwc on 15 June 2010 9:15 AM in Wordpress Help | 5 Comments

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.

About the Author

admin_mwcVince is a web designer & developer with a passion for creating web sites with clean and functional designs and source code that is valid, efficient, readable, secure and search engine friendly.

Vince is also an animal lover and vegetarian. He is currently taking his first baby steps to realise his dream of living off-the-grid in Australia so that he can live freely in a self-sufficient and eco-friendly manner.

Similar Posts

4 Comments On “Include the Latest Version of jQuery in WordPress without Duplicates”

Dj Samy

On 20th September 2010 8:28 AM, Dj Samy said:

great post ! i was searching on how to do this !

But i still have a problem.

i want to put this http://ajaxdump.com/?QJ8wklIb on my wordpress website, i have added your code for jquery from google, but nothing happens when i add the codes of the slide.

can you help please !

thank you very match for your post ;-)

jon

On 29th November 2010 6:29 AM, jon said:

This is a great post. I have been messing this up on the code placement for jquery in the proper template for a while and did not even no it .
Thanks for the great tips keep it up it helps everyone so much
jon

Randy

On 8th October 2011 12:23 PM, Randy said:

This is awesome!

I got my jGallery working on WordPress 3.2.1.
I have problem with the Gallery scroll bar and advised to use jQuery 1.4.2!

Thanks Man!

Angela

On 15th January 2012 1:24 PM, Angela said:

Is there a better way to do this with WordPress 3.3? I’ve heard it includes the latest jquery library and didn’t know if the above method was somehow redundantly loading jquery.

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

  1. Nothing found for 2010 06 17 Create-jquery-slide-gallery-wordpress-posts

Post a Comment