Use Google-Hosted JavaScript Libraries (…still the Right Way)
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.
As of WordPress 3.3, this is the best way to do it, using the proper hook (thanks David Hollander). Just add this code to your functions.php file:
//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');
}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.
There can be only one
Remember, the reason for all this is to ensure that other WordPress stuff (plugins, theme functions, et al) are aware that the script is already loaded so don’t go around loading another copy. Loading two copies of a JavaScript 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:
https://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.jsGoogle’s AJAX Developer’s API Guide is here.
One more thing
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');
}Or more simply you can always link to the HTTPS version and done.
About the author
Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.
20 responses
-
JasonTotally 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!
-
Yes, using the is_admin is a good idea to keep from killing your backend :)
-
Chris Coyier Post AuthorThat idea was all you!
-
-
Peter WilsonJason 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
noConflictmode as part of the deal.-
Yeah, that plugin really helps :)
-
-
KarloThanks 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.
-
larseBeen searching the web for this a while now. Thanks!
-
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.
-
-
-
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)
-
SarahThanks for this.
Just a small issue-it loads below my custom script when it’s needed above!-
Peter Wilson
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' );
-
-
Sarah
Great thanks –
It occured to me after I posted that this is the way to go :) -
George SerradinhoI’m using Thesis and I will be trying to see If I can change the way they are using js.
-
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.
-
JasonWouldn’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.
-
-
Jim GaudetWhat 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?
-
Great help! Thank you!
-
Charles AngellOne 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?
