Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Replace default WordPress jQuery script with Google Library

Last updated on by
Elegant Themes
Replace default WordPress jQuery script with Google Library

There are default scripts that comes with each WordPress installation. These scripts are at disposal of theme and plugin authors to use in their work. From our experience, jQuery is one of the most used scripts in plugins and themes. In this article, we will show you how to replace the default WordPress jQuery script with Google Library script.

You are probably wondering why should you replace the default WordPress jQuery script with the one from Google Library? jQuery is being used on a lot of sites including the big ones. Google Library has become the standards for including scripts in web design. It could be because Google Libraries are using Google’s CDN which is extremely powerful. Because it has now become a standard, a lot of other sites are utilizing it as well. Chances are that your website user has also visited one of those other sites that are using Google’s Library for scripts. So the script is already cached in your user’s browser. This makes loading of the jQuery script very fast on user’s end. In today’s world when we are fighting for each microseconds and optimizing our site, who wouldn’t love to cut out a microsecond from the loading time?

Now you are probably wondering, how do I do this? Well its pretty simple. Open your theme’s functions.php file and paste the following snippet:

//Making jQuery Google API
function modify_jquery() {
	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.8.1/jquery.min.js', false, '1.8.1');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'modify_jquery');

You are done with this. While we are talking about optimizing WordPress load time, you should also look at How WordPress plugins affect your site’s load time. Another good resource would be how to add scripts in WordPress the right way.

Note: You should not do this on theme’s or plugins that you will not be controlling forever (i.e client sites, free/commercial theme or plugin that you want to distribute to the masses). On your own site, this trick brings performance benefits. But if you don’t keep your jQuery up to date, then you run the risk of having plugin compatibility issues. You can always use a plugin: Use Google Libraries. This plugin allows your site to use common javascript libraries from Google’s AJAX Libraries CDN, rather than from WordPress’s own copies. It also keeps the libraries up to date as long as you keep that plugin up to date.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Ihsan says:

    I tested code above and i replace the last line with this to make it work and better

    add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );

  2. Alejandro says:

    Hi, Thank you for your tips. I do not know Why when using this function, the jquery from Google is loading twice, I mean, I have two HTTP request instead of one, Here is the test: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.

    With jquery.easing the same happends, but this time with 3 HTTP request for the same file.

    Any ideas? I’ve been looking into the code but didn’t find duplication of wp_enqueue_script(”);

    Thank you in advance

  3. Mathieu says:

    Thanx! The jQuery used to break up my admin functionality now that’s solved.

  4. Mitch says:

    Thanks much appreciated.

  5. Joseph Chambers says:

    What if I want to load either HTTP or HTTPS based on whatever the visitor is visiting our page on.

    for most things we can change: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js and it works. However; something in the wp_register_script() is throwing a error ( White page with the word: Error ) when I change that. thoughts, solutions?

  6. Sajid Iqbal says:

    Thanks Syed for this great post. Saved me a lot of time.

  7. Matt Ogborne says:

    Very helpful, Thank you!

    Matt

  8. Riversatile says:

    Hi,

    Here is the latest version of the googleapi jquery file.

    When you copy/paste the code above, don’t forget to replace the jquery URl by this one :

    http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

    Then replace “1.4.4″ by “1.6.2″

    Like that :

    //Making jQuery Google APIfunction modify_jquery() { 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.6.2/jquery.min.js’, false, ’1.6.2′); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);

    • vnu says:

      Could anyone tell me if I need to modify (!is_admin) to “minimum” capability if I use a plugin plugin like thethefly ‘s tabs and accordions . So the tabs created on pages are view-able by everyone?

      Thanks !

  9. Melissa Cleaver says:

    Thanks so much for the code, but when I tried to use it in my functions.php file, I got a fatal error, no matter where in the code I put it. Am I doing something wrong here?

  10. swanie says:

    Question: does Google Library do a good job at pulling in the alt tag info from the media library? … I have several professional themes that use a main page jQuery slider, but they don’t pull in the alt tag … thus, the source code look like: alt=”" … which of course, is an seo no-no. I’ve never used the Google Library script … I’d be curious how that works. What’s your experience?

    • Editorial Staff says:

      Alt tag for what? This is only replacing the javascript….

      • swanie says:

        OK … I guess I’m specifically talking about jQuery sliders … I have purchased several professional themes with a main page jQuery slider … here’s one of them: http://coloradospringsautomechanics.com … if you view source, it pulls in the images, but not the alt tags … the alt tag is empty.

        I guess by reading this post, this Google Library approach could possibly resolve that.

        Another solution could be to break open the plugin files and add to the alt tag so I should have:

        img src=”file.jpg” alt=”" title=”"

        Just wondering why these jQuery sliders don’t pull in the alt tags. That make sense? Am I off-subject?

        You guys rock, by the way.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.