Loading scripts from CDN’s can boost your pages’ performance, but what if the CDN is not available one day. Your site is not only depending on your host provider but now the CDN’s as well. This article will explain how to add some fallback scripts that will load copies of your scripts from your web server only if the CDN is not available.
Let’s first look at the most common script web pages will load from a CDN. jQuery can be added to your page using google’s CDN by adding the following to your page.
Normally, this works great. Since this script is very important to the page, it would be nice to have a backup where it gets downloaded from the web server this page is from and have it downloaded ONLY if jQuery didn’t get loaded from the script tag above. To do this we just need to test if jQuery is in the javascript namespace. If it’s not, then we should load from our web server. Here’s how we can do this
(Click Here to see article on this inline script) Basically, this says if windows.jQuery doesn't exist (it's false), then it will add a script tag into the DOM. Since the OR ('||') is short-circuited, if jQuery does exist (it's true), it won't even run the right-side of the OR.
Now, how do you add this to WordPress and make sure it is added where it needs to be (in the right order with the other scripts) using the wp_enqueue_script function. There really isn't a great way to add a quick inline script using wp_enqueue_script. It expects a path to a file. While working on Bones for Genesis, the original author (either cdukes or eddiemachado) used the WordPress 'script_loader_tag' filter to add Internet Explorer conditionals for the jQuery script tag. I thought, 'Why not use it to add a fallback?' This would put the inline script exactly where it needs to be; right after the script tag to the CDN. Here's the code. This filter is called for every enqueued script. We check for the script's handle, and if so, add the inline script right after the $tag variable. The $tag variable contains the script tag for the enqueued script.
//Add the filter hook
add_filter( 'script_loader_tag', 'bfg_fallback_script_conditionals', 11, 3 );
//This function checks the handle to see if we need to add a fallback
function bfg_fallback_script_conditionals( $tag, $handle, $src ) {
if( 'jquery' === $handle ) {
$fallback ="\n" . '' . "\n";
$output = $tag . $fallback;
} else {
$output = $tag;
}
return $output;
The handle is the same handle you used when you do the wp_enqueue_script.
That's it! I also wanted to have a fallback for my bootstrap.js so here's the complete function
function bfg_fallback_script_conditionals( $tag, $handle, $src ) {
if( 'jquery' === $handle ) {
$fallback ="\n" . '' . "\n";
$output = $tag . $fallback;
}elseif( 'bootstrap' === $handle ) {
//Append a fallback to a local copy of bootstrap if CDN not available
$fallback_src = get_stylesheet_directory_uri() . '/js/bootstrap.min.js';
$output = $tag;
$output .= "\n".'';
} else {
$output = $tag;
}
return $output;
