Question 166442 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Why isn’t jQuery enqueueing in WordPress?

I’m trying to replace the default WordPress jQuery with a CDN version. I’ve always been able to do this but am suddenly having issues – I’m not sure if its because of the latest WordPress updates or not. I use this code in functions.php:

function replace_default_jquery_with_fallback() {

    $ver = '1.12.4';
    $migrateVer = '1.4.1';

    // Dequeue first then deregister
    wp_dequeue_script( 'jquery' );
    wp_dequeue_script( 'jquery-migrate' );
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-migrate' );

    // Fallback
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write('<script src="' . includes_url( '/js/jquery/jquery.min.js' ) . '"></script>')' );
    wp_add_inline_script( 'jquery-migrate', 'window.jQuery||document.write('<script src="' . includes_url( '/js/jquery/jquery-migrate.min.js' ) . '"></script>')' );

    wp_enqueue_script( 'jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", '', $ver, false );
    wp_enqueue_script( 'jquery-migrate', "//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/$migrateVer/jquery-migrate.min.js", '', $migrateVer, false );
}
add_action( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');

This gets output to the head of the page:

<link rel='dns-prefetch' href='//ajax.googleapis.com' />
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />

But actual scripts aren’t queued. If I append ‘-test’ to either of the handles they appear but the inline fallback script does not.

Any help is greatly appreciated, thanks,
Tyler

Edit:
After some searching around, I’ve revised my code to the following:

add_action( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');
function replace_default_jquery_with_fallback() {
    $wp_admin = is_admin();
    $wp_customizer = is_customize_preview();

    if ( $wp_admin || $wp_customizer ) {
        // echo 'We are in the WP Admin or in the WP Customizer';
        return;
    } else {
        // Start of jQuery replacing
        $ver = '1.12.4';
        $migrateVer = '1.4.1';

        // Dequeue first then deregister
        wp_dequeue_script( 'jquery' );
        wp_dequeue_script( 'jquery-core' );
        wp_dequeue_script( 'jquery-migrate' );

        wp_deregister_script( 'jquery' );
        wp_deregister_script( 'jquery-core' );
        wp_deregister_script( 'jquery-migrate' );

        wp_register_script( "jquery-core", "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", array(), $ver, false );
        wp_register_script( "jquery-migrate", "//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/$migrateVer/jquery-migrate.min.js", array(), $migrateVer, false );
        wp_register_script( "jquery", false, array("jquery-core", "jquery-migrate"), null, false );

        // Fallback
        wp_add_inline_script( 'jquery-core', 'window.jQuery||document.write('<script src="' . includes_url( '/js/jquery/jquery.min.js' ) . '"></script>')' );
        wp_add_inline_script( 'jquery-migrate', 'window.jQuery||document.write('<script src="' . includes_url( '/js/jquery/jquery-migrate.min.js' ) . '"></script>')' );

        wp_enqueue_script( 'jquery' );
    }
}

And still no luck…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to find the solution here: https://wordpress.stackexchange.com/questions/209091/gravity-forms-loading-jquery

    I think Gravity Forms, even without a form on the page, was hijacking the 'jquery' handle making me unable to modify the enqueue. Using the solution in the post linked above has fixed my problem (moving gravity forms scripts to the footer, I load my jQuery in the header):

    add_filter('gform_init_scripts_footer', '__return_true');

  2. 0

    You’re trying to add script dynamically by storing the version number in a variable. You can do something like this:

    function replace_default_jquery_with_fallback() {

    $ver = '1.12.4';
    $migrateVer = '1.4.1';

    // Dequeue first then deregister
    wp_dequeue_script( 'jquery' );
    wp_dequeue_script( 'jquery-migrate' );
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-migrate' );

    // Fallback
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write('<script src="' . includes_url( '/js/jquery/jquery.min.js' ) . '"></script>')' );
    wp_add_inline_script( 'jquery-migrate', 'window.jQuery||document.write('<script src="' . includes_url( '/js/jquery/jquery-migrate.min.js' ) . '"></script>')' );

    wp_enqueue_script( 'jquery', "https://ajax.googleapis.com/ajax/libs/jquery/".$ver."/jquery.min.js", '', $ver, false );
    wp_enqueue_script( 'jquery-migrate', "https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/".$migrateVer."/jquery-migrate.min.js", '', $migrateVer, false );
}
add_action( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');

    This will help you to include jquery cdn in your wordpress site, without using https: with your cdn link it’ll not work and might show you an error on the frontend.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search