DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Use Google-Hosted JavaScript Libraries (…still the Right Way)

Posted by on

I previously posted on how to include jQuery in your WordPress theme the Right Way. That is, to use the wp_register_script function to register the script first. It’s literally a one-liner in your header.php or functions.php file, but by default, it loads the internal version of jQuery that ships with WordPress.

It’s all the rage these days (for good reason), to use Google-hosted JavaScript libraries. They even encourage it. If you’d like to hop on the bandwagon, you can do so and still use the proper wp_register_script function.

UPDATE (December 2011)

As of WordPress 3.3, this is the best way to do it, using the proper hook (thanks David Hollander):

//jQuery Insert From Google
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}

Just add this code to your functions.php file:

if( !is_admin()){
   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');
}

That last line there gets the script queued up for you so you don’t need to do it again in the header. Assuming you have the proper wp_head(); call in your header, you’ll be all set! Note that we have wrapped this in a conditional tag to prevent that action on Admin pages. Because this Google-hosted version of jQuery is not in noConflict mode, it interferes with the rich text editor in the admin. This prevents that.

Remember, the reason for all this is to ensure that other WordPress stuff (plugins…) are aware that the script is already loaded so don’t go around loading another copy. Loading two copies of a JS library is just bad news.

Also, I always use jQuery as an example but of course this would work with any popular JavaScript library. For example, the MooTools path at Google is:

http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js

Google’s AJAX Developer’s API Guide is here.

ALSO… there are a crapload of scripts all ready to be queued up for your use in WordPress. See the full list here.

David wrote in to tell us that he was working in an HTTPS environment, and he used this alteration to ensure the URL for the Google-hosted version of jQuery was properly served from HTTPS when needed:

if (!is_admin()) {
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http".($_SERVER['SERVER_PORT'] == 443 ? "s" : "")."://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
   wp_enqueue_script('jquery');
}

20 Responses

  1. Totally glad I read this one early…I was including jQuery this way…but I didn’t realize that unless the conditional check for admin was there it could conflict with the RTE; thanks Chris!

  2. Yes, using the is_admin is a good idea to keep from killing your backend :)

  3. Jason Penney’s Google Libraries is one of the first plugins I add to a fresh WP install.

    It reregisters all the relevant libraries to load from the Google API, putting jQuery in noConflict mode as part of the deal.

  4. Thanks for the is_admin conditional tip Chris.Just learning WP so this site is helping me loads, keep the posts coming and I can’t wait to read the book.

  5. Been searching the web for this a while now. Thanks!

  6. I guess I am slow. What makes google jquery better than the jquery that is shipped? Why would I want to link to google?

    • You’ll save bandwidth on each visit and google server is faster than my server (at least in my area), so chances are your page loads a few ms faster :P Every bit counts! :)

      • There’s also the benefit of people having cached the Google copy, so if somebody has already visited a web site using the Google-hosted libraries, they won’t have to redownload it from your site as they normally would.

  7. Thanks a lot. One of the best hints i’ve seen in the last time. WP 2.8 should also be able to hook the scripts in the footer (before closing body), but right now, i haven’t figured it out how to do it (take a look at lesterchan WP-Poll)

  8. Thanks for this.
    Just a small issue-it loads below my custom script when it’s needed above!

    • You can solve that by setting your custom script as dependant on jQuery using the third variable.

      wp_register_script( 'custom', 'path/to/custom.js', array('jquery'), '1' );

  9. Great thanks –
    It occured to me after I posted that this is the way to go :)

  10. George Serradinho June 30, 2009

    I’m using Thesis and I will be trying to see If I can change the way they are using js.

  11. Regarding loading jQuery library from Google vs a locally stored version: I’m aware of all the benefits of this and switched to it for my work’s website.

    But one morning shortly after that people started coming to me saying our site was down.

    It was indeed not loading. A quick look at the browser’s status bar showed it was waiting for google.com. On a hunch I switched to a local copy of jQuery and the problem was fixed.

    I read reports shortly after of the almighty Google experiencing some problems that day. I know it doesn’t happen often and may not happen again for a long time, but this was enough for me to stick to locally hosted versions for all my sites.

    • Wouldn’t that be solved by just loading scripts at the bottom of the page above the /body tag? Then at least your site wouldn’t wait for the JS to load before loading everything else.

  12. What about loading the scripts into the footer? I thought for page load times you should put your scripts before the end body tag.

    Your thoughts?

  13. Great help! Thank you!

  14. One idea I’ve come across several times is that should google be having issues it makes sense to load the WordPress version of Jquery.

    Do you feel this is valid? If so can you suggest how I could alter the code above to do so?

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry