Fall Back Google CDN in JavaScript

Question

In HTML5 Boilerplate it Grab Google CDN's jQuery with this JS code

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

I tried to transpose it to WP with this PHP code

function sbi_cdn_jquery()
{
    global $wp_scripts;

    wp_deregister_script('jquery');

    echo '<script src="//ajax.googleapis.com/ajax/libs/jquery/' . $wp_scripts->registered['jquery']->ver . '/jquery.min.js"></script>';
    echo '<script>window.jQuery || document.write(\'<script src="' . get_bloginfo('wpurl') . '/wp-includes/js/jquery/jquery.js"<\/script>\')</script>';
}
add_action( 'wp_enqueue_scripts', 'sbi_cdn_jquery' );

But this does not work !

Is this possible to fallBack Google CDN in JavaScript with WP ?

Thank for your help.

Answer 1

Scripts don't get printed at the wp_enqueue_scripts hook, but rather at the wp_print_scripts hook. That said: don't echo/print scripts, period. Instead, enqueue them properly.

Caveat: This method is Plugin territory, and should not be included as Theme code in a publicly distributed Theme.

You deregister jQuery, but the step you're missing is registering and enqueueing your own version:

<?php
function sbi_cdn_jquery() {
    // Deregister core-bundled jQuery
    // This is dangerous! Understand the
    // potential consequences before doing this!
    wp_deregister_script( 'jquery' );

    // Register custom jQuery version
    wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' );

    // Enqueue cusotm jQuery
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'sbi_cdn_jquery' );
?>

Refer to the Codex entry for wp_register_script() and wp_enqueue_script() regarding arguments for these functions.

Answer 2

I use this function to register and enqueue the various scripts my theme uses:

function cosmos_enqueue_scripts() {

// Load jquery from Google CDN (protocol relative) with local fallback when not available
if ( false === ( $url = get_transient('jquery_url') ) ) {

    // Check if Google CDN is working
    $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
    $resp = wp_remote_head($url);

    // Load local jquery if Google down
    if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

        $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
    }

    // Cache the result for 5 minutes to save bandwidth
    set_transient('jquery_url', $url, 60*5);
}

// Deregister Wordpress' jquery and register theme's copy in the footer
wp_deregister_script('jquery');
wp_register_script('jquery', $url, array(), null, true);

// Load other theme scripts here
wp_enqueue_script('modernizr', get_template_directory_uri() . '/js/vendor/modernizr-2.5.3.min.js', array(        ), null, false);
wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/vendor/bootstrap.min.js'      , array('jquery'), null, true );
wp_enqueue_script('main'     , get_template_directory_uri() . '/js/main.js'                      , array('jquery'), null, true );
}
add_action('wp_enqueue_scripts', 'cosmos_enqueue_scripts');

Answer 3

Posted the same answer on jquery stopped working after deregistering wordpress stock version, but adding here for reference:

If you're stuck on using a Google hosted version of jQuery, there are two plugins that come to mind:

• Use Google Libraries
• WP jQuery Plus

It's better to just use the core if you're not 100% comfortable with JavaScript debugging (if anything pops up as it did) and do not control the environment completely.