As you probably know by now, Google hosts most of the major JavaScript libraries on its own content distribution/delivery network (CDN) for everyone to use.
However, WordPress actually comes bundled with many of the same JavaScript libraries. So, what are you to do when you want to use Google’s copy?
Sure, you could simply include the call to the Google JavaScript library of your choice in your theme files, but that would cause the library to load twice in many cases (potentially causing conflicts all over the place).
The way to handle this, quite simply, is to tell WordPress not to use its local copy of the library; but to use Google’s copy instead. To do so, you simply “deregister” the WordPress copy (for these examples, I will be showing how to use Google’s jQuery library), then register (and potentially enqueue) the Google copy.
However, there is one major gotcha to this whole thing. WordPress relies on specific code and configurations within these JavaScript libraries when building the administration area.
Since your theme’s functions.php file is used even in the administration area (otherwise, how would you do cool things like registering custom post types), you could potentially break the admin area if you deregister the WordPress copy of the library. Therefore, you want to make sure you only use Google’s copy of the library when you’re viewing the website; not when you’re using the admin area.
To accomplish this, you should place some code similar to the following in your theme’s functions.php file.
// Make sure we're not in the admin area, first
if( !is_admin() ) {
// Remove the local copy of jQuery from the list of registered script libs
wp_deregister_script( 'jquery' );
// Register Google's copy of the script lib
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', array(), '1.5.1', true );
// Enqueue the script (assuming you're going to use it everywhere on your site)
wp_enqueue_script( 'jquery' );
}
In the code above, you’ll notice that, after the word ‘jquery’ in the Google URL, I’ve included just the numeral “1”.
Google hosts multiple versions of each JavaScript library, and allows access to each. If you were to put “1.5.1” in that spot, Google would always serve up version 1.5.1 of jQuery. If you were to put “1.4.2”, Google would always serve version 1.4.2.
However, the less specific you are when indicating the version number, the more liberty Google takes in serving it up. For instance, if you were just to put “1.4” in that spot in the URL, Google would actually serve up the latest version of jQuery 1.4.x (which, in that case, would be jQuery 1.4.4). If you just use the numeral “1”, as I did above, Google will always serve up the latest and greatest 1.x version of jQuery (which, at the time of this posting, since there is no jQuery 2.x, would effectively be the latest and greatest version of jQuery).
Therefore, if you want Google to serve you a specific version of jQuery, you will need to specify that version number after the word “jquery” in the URL.
Also, you should be familiar with the wp_register_script() function and know how it works. The code above will move the jQuery <script> tag to the bottom (footer) of your pages, rather than placing it inside the <head> area of your code.
In some rare cases, this could cause some JavaScript not to work properly on your site, so you may want to change the true to false if you notice weird things happening in your theme.
Post Your Comment