How do I upgrade jQuery on a Wordpress theme?

It depends on how it is been integrated.  If it is packaged as part of the theme/site then you need to replace the files in the appropriate folder(s)... if it is simply calling the library from say Google, then you need to locate code similar to the following and update the number (3.3.1) to whatever version you wish to use instead

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Select allOpen in new window

I have done a lot of searching in all the site files. I found jquery.min.js in a lot of places, but no direct reference of where it is getting it.

I found a place on line where is said to do this in header.php. I asume this is php code because of the // comment.

Does this look correct?

	// include custom jQuery
	function shapeSpace_include_custom_jquery() {

	wp_deregister_script('jquery');
	wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);

Select allOpen in new window

Hey Richard,

By default, WordPress includes it's own version of jQuery - it's located in the /wp-includes/js/jquery folder, and as of WordPress v5, it ships with jQuery version 1.12.4 !!

This is the version of jQuery that gets loaded whenever jquery is set as a dependency of other scripts. Below is how you would load myscript.js and tell WordPress that your script depends on jquery.

wp_enqueue_script( ‘MyScript’, 'path/to/myscript.js', array('jquery') );

To update jQuery to a later version, you have several options. You could 'replace' the built in jquery with a different version, using code similar to what you've already posted. You would put that code in your functions.php file and add an action to fire the function. Something like this:

// include custom jQuery
function shapeSpace_include_custom_jquery() {
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

Select allOpen in new window

Now whenever a script depends on jQuery, it will load your version of jquery and not the WordPress version.

Of course, any theme may also be loading it's own version of jQuery (some do it very badly), so you may need to do some digging around. It amy also be that updating the jquery library breaks other things on your site. It's possible that you may end up needing to load 2 or more different version of the library. Things get a little trickier if you need to do that as may need to be loading up the library in noConflict mode.

Chris,

I tried exactly what you recommended, except that the file functions.php at the theme root consists of this:

<?php
/*
============================================================================
	*
	* Functions 
	*
============================================================================	
*/
require_once locate_template('/functions/functions.php');

?>

Select allOpen in new window

So I assumed that the one located in the subdirectory functions was the right one & I put the code there. like this:

/*
============================================================================
	*
	* Latest version of Jquery
	*
============================================================================
*/
// include custom jQuery
function shapeSpace_include_custom_jquery() {
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');
/*

Select allOpen in new window

I opened the site in a browser & got a blank page. I put the functions.php back as it was before, the site opens perfectly.

The overall goal of this is to overcome the following:

PCI Rapid Comply® vulnerability scan of RAIN ONE has completed and is not compliant.

My hosting company. after digging into it said I needed jQuery 3.1.1.

Don't know what to do next.

Thanks

Hmmm. I'm not familiar with the theme you're using so it may be doing other things. Technically, there's no reason why you can't just put the code in the main functions file, before the 'require_once' line.

Also, while you're doing any testing, it would make sense to turn on debug mode. You do this by editing the wp-config.php file and editing (or adding) these lines:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Now if you get any problems, such as a blank page, you should get some additional info, either on-screen or written to your log file (wp-content/debug.log). Don't forget to remove or comment those lines when you go into production.

What I would say though is that it's generally not a great idea to be editing theme files directly, as you'd lose any of the changes if you update the theme. Normally, you would create a child theme and make any changes there.

I poked around the shapeSpace theme, just downloaded, and I found that in the main functions.php file there is a place to customize the jQuery version.

	// wp_deregister_script('jquery');
	// wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js', array(), null, true);

Select allOpen in new window

I assume you would just uncomment those two lines and update the version you want to use.

As Chris mentioned, however, if you do not use a child theme to change this it will likely be overwritten with future theme updates.

To ResQTek Nancy,

Tried your code only, same effect.

Site loads as a blank screen. Put functions.php back the way it was before, site looks perfect.

I intend to try it with Chris' debug stuff tomorrow after 5 PM Eastern, as per the customer.

Richard

Well, it's not my code -- I found those lines in the functions.php file for the theme shapeSpace that I just downloaded earlier.
It seems like that's the theme you are using.
Those two lines are commented out in the existing code.

Looking forward to hearing what the debug info is.

From the opening comment, I thought the theme was Bee - not shapeSpace. The shapeSpace mentioned in the code earlier is just the name of a function - not the name of the theme !!

The theme IS Bee.

Those lines were NOT in the functions.php file for Bee, I added them but removed the function call shapeSpace that Chris had created.

My bad. Thanks for clarifying.

I found this through Google:

https://wpengine.com/support/including-a-different-jquery-version-in-wordpress/

They don't say where to put this, I assume in functions.php. Is that correct?

Thanks

I think WordPress specifies the jQuery version in the \wp-includes\script-loader.php file.

	// jQuery
	$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4' );
	$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' );
	$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

Select allOpen in new window

To bypass this, you would follow Chris' example and put the function in the functions.php of your theme.
What you are doing is unregistering the default version and instead registering yours.

Ideally, we use a child theme for this so that future theme updates don't overwrite it.

Hey Richard,

Generally, any code like that goes in your functions.php file, although you could write a plugin to do it if you want. If you do it in your functions.php file, then it's tied to the theme you're using. The advantage of doing it in a plugin is that it's not tied to your theme. Using the functions.php is generally the easier option.

Having said that, the code you've posted will include a SECOND copy of the jQuery library. That may be what you're trying to do, but it wouldn't solve the problem of your compliance, because you will still be loading up the old version of jQuery as well as the newly registered version.

To meet compliance you probably want to replace the built in jQuery with an updated version, rather than add another copy.

Generally the code I've posted should do that, but without any additional debug info, I can't offer you any other suggestions about why it's not working.

There is also a plugin to do this that I found, which would help with avoiding the child theme situation.
There may be others, but I landed on this one (as an example): https://wordpress.org/plugins/jquery-updater/

Chris Stanton,

I tried these and the change to jquery to load 3.1.1

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Nothing, blank page again.

I restored functions.php to the prior version, now it works.

I cannot find the file (wp-content/debug.log) on the server in the wp-content subdirectory.

So I'm basically no-where.

Richard

Hmmm. Not sure what else to suggest. Getting a complete blank page and NO errors or logging is strange. I don't have access to your theme as it's a paid theme, so I can't really look into anymore.

The code I've posted is the usual way of doing things, but if your theme is coded in a peculiar way, then it seems to break this. As it's a paid theme, you may be entitled to support from the theme author, so that may be your best bet to resolve this issue.

It's possible one of your plugins does not support jQuery 3.x.
That is why WordPress is still including 1.12.4 -- compatibility with plugins and themes.

I use this in wp-config.php to display PHP errors on white pages of death (this will display errors directly on the blank page for all to see):

error_reporting(E_ALL); ini_set('display_errors', 1);

Select allOpen in new window

Also, some have had success creating a blank debug.log file within wp-content, and the define( 'WP_DEBUG_LOG', true ); method started working.