Load jQuery from Google AJAX Libraries API in Wordpress with "fallback script"

Question

I have added a Wordpress function to load jQuery Library from Google Hosted Libraries

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}

it create the something like this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

how can I include it with fallback option, as per html5boilerplate suggested

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

like this

Mangesh Parte · Accepted Answer · 2015-08-03 09:53:17Z

3

Try this. Replace your code with this code. This will handle all.

/************* ENQUEUE JS *************************/

/* pull jquery from google's CDN. If it's not available, grab the local copy. */

$url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'; // the URL to check against  
$test_url = @fopen($url,'r'); // test parameters  
if( $test_url !== false ) { // test if the URL exists  

    function load_external_jQuery() { // load external file  
        wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery  
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); // register the external file  
        wp_enqueue_script('jquery'); // enqueue the external file  
    }  

    add_action('wp_enqueue_scripts', 'load_external_jQuery'); // initiate the function  
} else {  

    function load_local_jQuery() {  
        wp_deregister_script('jquery'); // initiate the function  
        wp_register_script('jquery', get_template_directory_uri().'/js/jquery.js', __FILE__, false, '1.7.2', true); // register the local file  

        wp_enqueue_script('jquery'); // enqueue the local file  
    }  

    add_action('wp_enqueue_scripts', 'load_local_jQuery'); // initiate the function  
}

Put this code in functions.php

edited Aug 3, 2015 at 9:53

answered Aug 8, 2013 at 10:35

Mangesh Parte

2,1771 gold badge13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

laychinhan Over a year ago

The solution is ccurate, because the code check code is executed by php, which is server side and not client side, imagine if your hosting can reach googleapis but the user browser cant reach it, then your jquery will not be loaded into your html

Paolo Over a year ago

You don't want to use fopen(), because it will make your script slower and because it's not always available. html5boilerplate's fallback, done in JS, is better.

Rohan Kumar · Accepted Answer · 2016-09-06 04:29:23Z

Answer of @Mangesh Parte can be short like,

<?php
    function load_external_jQuery() {
        wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery 
        $url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'; // the URL to check against  
        $test_url = @fopen($url,'r'); // test parameters  
        if( $test_url !== false ) { // test if the URL exists if exists then register the external file  
            wp_register_script('jquery', $url);
        }
        else{// register the local file 
            wp_register_script('jquery', get_template_directory_uri().'/js/jquery.js', __FILE__, false, '1.7.2', true);  
        }
        wp_enqueue_script('jquery'); // enqueue the jquery here
    }
    add_action('wp_enqueue_scripts', 'load_external_jQuery'); // initiate the function 
?>

Popsyjunior · Accepted Answer · 2013-08-08 09:55:45Z

1

You can try this:

<script>
try { 
        //First check if jQuery exists..
    var test = jQuery.trim("test");
} catch(e) {
        //If it doesn't, add it manually..
    var script = document.createElement("SCRIPT");
    script.setAttribute("src", "js/vendor/jquery-1.9.1.min.js");
    document.head.appendChild(script);
}
</script>

answered Aug 8, 2013 at 9:55

Popsyjunior

3051 silver badge10 bronze badges

Comments

l2aelba · Accepted Answer · 2016-08-31 10:26:31Z

Why many answers with server-side solution ? Think about who lives in China and Google has been blocked.

Here is the correct answer (no server-side) :

For Wordpress 4.5.0 + : wp_add_inline_script() #

function jquery_enqueue_with_fallback() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery' , '//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js', false, '3.1.0', true );
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="'.esc_url(get_template_directory_uri()).'/libs/js/jquery.js"><\/script>\')' );
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts' , 'jquery_enqueue_with_fallback' );

No server-side checker
Scripts at the bottom
Real fallback (to local script)

Note : Change the version and your own local jQuery source.

Collectives™ on Stack Overflow

Load jQuery from Google AJAX Libraries API in Wordpress with "fallback script"

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related