Skip to content

Instantly share code, notes, and snippets.

@wpsmith
Last active March 19, 2018 20:55
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save wpsmith/4083811 to your computer and use it in GitHub Desktop.
Save wpsmith/4083811 to your computer and use it in GitHub Desktop.
PHP: Enqueue Google CDN jQuery with fallback to WordPress
<?php
add_action( 'wp_enqueue_scripts', 'wps_enqueue_jquery' );
/**
* Enqueue jQuery from Google CDN with fallback to local WordPress
*
* @link http://codex.wordpress.org/Function_Reference/wp_enqueue_script
* @link http://codex.wordpress.org/Function_Reference/wp_register_script
* @link http://codex.wordpress.org/Function_Reference/wp_deregister_script
* @link http://codex.wordpress.org/Function_Reference/get_bloginfo
* @link http://codex.wordpress.org/Function_Reference/is_wp_error
* @link http://codex.wordpress.org/Function_Reference/set_transient
* @link http://codex.wordpress.org/Function_Reference/get_transient
*
* @uses get_transient() Get the value of a transient.
* @uses set_transient() Set/update the value of a transient.
* @uses is_wp_error() Check whether the passed variable is a WordPress Error.
* @uses get_bloginfo() returns information about your site.
* @uses wp_deregister_script() Deregisters javascripts for use with wp_enqueue_script() later.
* @uses wp_register_script() Registers javascripts for use with wp_enqueue_script() later.
* @uses wp_enqueue_script() Enqueues javascript.
*/
function wps_enqueue_jquery() {
// Setup Google URI, default
$protocol = ( isset( $_SERVER['HTTPS'] ) && 'on' == $_SERVER['HTTPS'] ) ? 'https' : 'http';
// Get Latest Version
$url = $protocol . '://code.jquery.com/jquery-latest.min.js';
// Get Specific Version
//$url = $protocol . '://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';
// Setup WordPress URI
$wpurl = get_bloginfo( 'wpurl') . '/wp-includes/js/jquery/jquery.js';
// Setup version
$ver = null;
// Deregister WordPress default jQuery
wp_deregister_script( 'jquery' );
// Check transient, if false, set URI to WordPress URI
delete_transient( 'google_jquery' );
if ( 'false' == ( $google = get_transient( 'google_jquery' ) ) ) {
$url = $wpurl;
}
// Transient failed
elseif ( false === $google ) {
// Ping Google
$resp = wp_remote_head( $url );
// Use Google jQuery
if ( ! is_wp_error( $resp ) && 200 == $resp['response']['code'] ) {
// Set transient for 5 minutes
set_transient( 'google_jquery', 'true', 60 * 5 );
}
// Use WordPress jQuery
else {
// Set transient for 5 minutes
set_transient( 'google_jquery', 'false', 60 * 5 );
// Use WordPress URI
$url = $wpurl;
// Set jQuery Version, WP stanards
$ver = '1.8.2';
}
}
// Register surefire jQuery
wp_register_script( 'jquery', $url, array(), $ver, true );
// Enqueue jQuery
wp_enqueue_script( 'jquery' );
}
@the-great-manta
Copy link

hi,
really nice work here,
one small suggestion
why not use the microsoft cdn as the second option in case the google cdn does not work out?
cdn is still better than any local copy vis a vis download time.
here is the url in case you should decide to use it.http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js
thanks again for this repo,
im going to incorporate it with my wp plugin.
cheers.
-the-great-manta

@Otto42
Copy link

Otto42 commented May 20, 2014

This actually makes no real sense. Why would you do a wp_remote_head request to jquery.com or google.com every 5 minutes? The result is likely always going to be the same, and there's no fallback here at all, realistically.

Understand that JS is loaded from the user's browser, not from your server. Pinging another server to see if it is up is fine, but it's google. It's up, I assure you. The question of fallback isn't whether the server is up, but whether or not the user's browser can access that server. Given that you have no idea about their browser configuration, doing any sort of fallback like this on the server-side code is rather pointless.

@fedegonzaleznavarro
Copy link

Hey @Otto42, since you are so smart and found all that is WRONG with the script, why don't you provide everyone with a good solution for loading JQuery through WordPress from CDN or a local source, instead of just criticizing like 12 year old. Ever heard of constructive criticisms? Grow up, this is a community that tries to help and build of each other for the better of everyone else, so stop polluting it with your immature banter and if you take 5 minutes to comment, make it useful.

@mastef
Copy link

mastef commented Sep 22, 2014

@Otto42 here in Asia Google's ( and other provider's ) CDNs are not always up or reachable. Rest assured

But as Otto pointed out I don't understand this solution neither, as you're just mirroring the 'latest' jquery version in your WordPress every few minutes, it's not useful as the file never changes. Also be advised that the jquery-latest.min.js is always going to be jquery 1.11.1 and that JQuery advises against using it : http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/

You'd rather want to set up a frontend fallback. So when the browser tries to load the latest jquery version from CDN, and fails, you'd serve the local one instead.

( This cannot be accomplished with this PHP server-side solution. )

@mastef
Copy link

mastef commented Sep 22, 2014

Here's an article with great advice on how to handle this correctly : http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

@moorscode
Copy link

Like the other gents were mentioning there are some flaws using the technique described here.

  1. Sure it seems fine to 'just' fetch the head request, but that's a request for every request on your site or even server.
  2. Do you really want to delay your script output the time it takes to connect to a remote host? This could be up to the timeout limit (default 2 seconds).
  3. If your server can connect to the CDN in a certain time, it is by no means a guarantee that the client will as well.

These are things you learn when working with high-volume servers and can be a server/website killer.

Which leads to a solution I came up with (which can be improved on) using a fairly common method of JavaScript fallback in the following gist: https://gist.github.com/moorscode/b04e648200c844bf3f6d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment