Using jQuery 2.x

Greetings,
This might be a stupid question, but I’ve been trying to use jQuery 2.x instead of the 1.11.
Already updated the bower.json and it shows the correct jquery is installed, however it still loads the v1.11.x and not the v2.x

I’m also using Soil.

Thank you :slight_smile:

You have to unenqueue the WordPress jquery and enqueue dist/scripts/jquery.js

We used to do this but changing the WordPress version of jquery upsets people. We removed this in 8.2.0. Check out 8.1.1 for the code that enqueues jquery.

On mobile so can’t go into more detail

3 Likes

Thank you @austin, I will look into the code.
Really I thought in previous Sage versions I did not had this issue :wink:

I need to use jQuery 2.x (2.1.4), but the theme loads the 1.11.3 version (Masonry doesn’t seems work with jquery 1.11.3 version)… I don’t understand how to remove jQuery 1.11.3 and use 2.1.4… can you help me to do this?
I use Sage 8.2.1.

Thank you!

I don’t think the Masonry problem you’re running into is related to the jQuery version.

If you want to still use jQuery 2.x, keep in mind that this isn’t recommended by WordPress, so things may break. You’ll have to do something similar to what we recently removed in Sage — in this commit you can see how we use to unregister core’s jQuery and register our own:

if (!is_admin() && current_theme_supports('jquery-cdn')) {
  wp_deregister_script('jquery');

  wp_register_script('jquery', bower_map_to_cdn([
    'name' => 'jquery',
    'cdn' => 'google',
    'file' => 'jquery.min.js'
  ], asset_path('scripts/jquery.js')), [], null, true);

  add_filter('script_loader_src', __NAMESPACE__ . '\\jquery_local_fallback', 10, 2);
}

Soil does things a bit differently now. It always uses the same jQuery version that core uses, but instead loads it from the Google CDN with core’s jquery.js as a fallback.

2 Likes

I’ve seen people on these forums have trouble with masonry. I would try searching and seeing if you have the same issue as they did.

Hello Guys,

I am doing some final checks and came across an issue when I did a lighthouse report. It complains that the jquery version is out of date.

I know sage uses the core jquery and in other developments when I wanted to update the jquery version I would deregister the script with something on the lines of:

function replace_core_jquery_version() {
    wp_deregister_script( 'jquery' );
    // Change the URL if you want to load a local copy of jQuery from your own server.
    wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
}
add_action( 'wp_enqueue_scripts', 'replace_core_jquery_version' );

However, I don’t seem to be understanding how to do this in sage. I don’t want to place something like the above in the functions file and what ben posted a good while back seems to be the route to take.

however totally unsure what that code should be OR where to place it in sage. I am using the latest version of sage.

Can anyone @alwaysblank or @ben provide the code and steps required to replace the core packaged jquery for version 2.2.4 so that its like what ben posted above and only used for frontend and not WordPress admin? finding it difficult to accomplish this last step.

thank you.

Maybe this will help:

Code taken from the question linked above (I suggest you to read the original thread).

function replace_core_jquery_version() {
    wp_deregister_script( 'jquery-core' );
    wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
    wp_deregister_script( 'jquery-migrate' );
    wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
}

add_action( 'wp_enqueue_scripts', 'replace_core_jquery_version' );

Thanks for the reply.

I actually didnt want to use the finctions file to use this for the new sage theme and as I stated that i dodnt know how to use the old version that was being used that was posted by ben with the new theme.

Yes, your suggested code works but its not how the new sage would use it? I have read the link also.

What I did was use a WordPress plugin to achieve what I wanted which gets auto-updated when available and also keeps the admin jquery as default. Not ideal but works until someone can clarify the steps to exactly take for doing this via the sage theme without faffing around with the functions file OR perhaps I am not understanding any of this right!