Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@the-great-manta

the-great-manta Jan 24, 2013

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

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

This comment has been minimized.

Show comment Hide comment
@Otto42

Otto42 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.

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

This comment has been minimized.

Show comment Hide comment
@fedegonzaleznavarro

fedegonzaleznavarro Sep 9, 2014

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.

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

This comment has been minimized.

Show comment Hide comment
@mastef

mastef 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 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

This comment has been minimized.

Show comment Hide comment
@mastef

mastef Sep 22, 2014

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

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

This comment has been minimized.

Show comment Hide comment
@moorscode

moorscode Oct 20, 2015

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

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