Fix jQuery problems on upgrade to WordPress 5.5 / 5.6

We’ve recently been updating sites to WordPress version 5.5.3 and 5.6. We’ve come across a few errors and we’re going to log them here so that we can share any useful advice for our clients and readers.

jQuery Index Of … – Warning / Error

Go to your theme’s JS folder and look for the minified JS file and change the following:

jQuery(window).load(function () 

To

jQuery(window).on(‘load’,function () 

Slick Slider not working

Slick Slider and Autoptimize 

If you use Slick Slider and autoptimize and update to 5.6, it’s likely that you will run into an issue with the slider not being styled correctly. To fix this go into the autoptimize settings and turn OFF Aggregate JS files.

Installing “Enable jquery migrate helper” plugin

https://wordpress.org/plugins/enable-jquery-migrate-helper/

This plugin will allow you to pick which jQuery version is used by jQuery on WordPress 5.6. It also can log errors that occur in both backend and frontend. The options available in this plugin are:

jQuery Version

You can only change jQuery versions in WordPress 5.6 or later

Live deprecations
Show deprecation notices, on each admin page, as they happen

Public deprecation logging
Log deprecations caused by anonymous users browsing your website

Caution: This option may lead to more deprecations being discovered, but will also increase the amount of database entries. Use sparingly and under supervision.

WordPress admin plugin settings

We’ve noticed a few issues on the backend while updating to 5.5 and 5.6. Some plugin “Settings” pages have not appeared correctly, and some widget/sidebar settings also have had display issues. This can sometimes be rectified by using “Enable accessibility mode” in the widget settings area, however “jquery migrate helper” may be required to get all widgets working properly. The most common issue has been browsers saving cached versions of old jquery.js, so deleting browser cache is always the first thing to check if experiencing wp-admin problems.

Update Themes

We’ve seen some themes that have various issues on WP 5.6, e.g. many have had the mobile menu break when moving to WordPress 5.6 and using the new jQuery version. The easiest fix for this is to ensure the theme is updated to the latest version. If there is no recent update for the theme, then manual editing of theme files will be required.

It is advisable to export theme settings before updating a theme, as you will be able to reinstate any lost settings that may occur during the update.

Update all plugins

Make sure to update your plugins as many will have updates that introduce support for the new jQuery version.  

Additional Links

https://make.wordpress.org/support/2020/12/handling-potential-jquery-issues-in-wordpress-5-6/

Let us know if you have any tips and advice for resolving WordPress jquery errors.

Share on:

Leave a comment