Loading jQuery from a CDN in WordPress

Hey there! I'm currently working on a CLI tool to deploy WordPress apps to DigitalOcean. Check it out! It's free and open source.

This may seem like an easy task to do but is quite tricky in WordPress. Using a CDN these days is very popular, cheap and helps speed up your website taking the load off your web server. I personally love Amazon CloudFront! The tips at Google Code suggest you serve all your static content from different domains, preferably ones without cookies, so CDNs are perfect.

All the problem with WordPress is script dependancies, and this applies not only to jQuery but to all the other predefined javascript libraries (prototype, scriptaculous, thickbox, see wp_enqueue_script for more info). It’s all about the handles and plugins that use jQuery will probably use the jquery handle in their dependency lists, which will automatically make WordPress include the standard jQuery from its wp-includes directory. This means that using the code:

wp_enqueue_script("my-handle", "https://konstantin.blog/jquery.js");

You might end up including two instances of the jQuery library, one from your CDN (s.kovshenin.com) and another one from the WordPress wp-includes directory, which will end up in a total mess. Strange though, that you cannot redefine an already known handle, such as jquery like this:

wp_enqueue_script("jquery", "https://konstantin.blog/jquery.js");

The javascript library will still be loaded from the default location (wp-includes on your local web server). So the right way to do it is with a little hack in your functions.php file (in case you’re doing it within your theme) or any other plugin file (in case you’re doing it within your plugin):

add_filter('script_loader_src', 'my_script_loader_src', 10, 2);
function my_script_loader_src($src, $handle) {
	if ($handle == "jquery")
		return "https://konstantin.blog/js/jquery.1.3.2.min.js";

	return $src;

Then any call to wp_enqueue_script with the jquery handler will output the correct path to your CDN version of jQuery. Oh and please, try not to use generic function names like my_script_loader_src, I used that just as an example, we don’t want any function name conflicts and can’t expect other plugin/theme developers to use non-generic names ;)

11 thoughts on “Loading jQuery from a CDN in WordPress

    • Hey, yeah well maybe and maybe not. I believe filters in WordPress are very fast though we should probably look at what exactly does the deregister script function do. But I believe that the process of deregistering and registering a script again (which probably also involves dependancy checks) is more complex than passing a string through a filter. One more thing, I don't think that using the jQuery library provided Google is a good thing to do, well at least with WordPress. The jQuery included with WordPress always runs in compatibility mode, that means that you cannot use the $() function, which avoids conflicts between other frameworks, such as Prototype, MooTools, etc that are also shipped with WordPress. The jQuery at Google is probably the original version. I use the word probably alot, that's probably because I'm unsure, so don't run off blaming Google before you compare the two ;)


    • It's the main jQuery (Prototype and MooTools too I guess) function. Used for almost everything, like if you'd need to select all the links on your website with a certain class and then hide them, you would use something like $("a.classname").hide(); Take a look at this slideshow called jQuery in 15 minutes for more info.

  1. uberVU - social comments

  2. Tweets that mention Loading jQuery from a CDN in WordPress -- Topsy.com

Comments are closed.