This is a very generalized introduction, it is by no means exhaustive, or complete. You are encouraged to further educate your self on the issues you may be experiencing.

With the release of WordPress 5.5, the tool known as jQuery Migrate was no longer enabled by default (this is part of the upgrade path towards jQuery 3 in WordPress core).

Unfortunately, some users were negatively affected by this, it was sort of expected, and a plugin to help those users was put out before the release called Enable jQuery Migrate Helper. It functions as a temporary solution until the next release of WordPress, but by then code should be updated.

That said, there are various themes and plugins that are no longer being maintained, and users are a bit lost as to what they can do. Ideally, if this is you, looking for a maintained alternative will be the best solution. Which is not always the most timely solution.

If you are one of the unlucky ones, using an unmaintained plugin or theme, and are experiencing issues relating to jQuery Migrate no longer being enabled on your site, the following is a list of the most common deprecated functions, and how to manually fix them.

Please note that this will require you to modify your plugin or theme, and these changes will be overwritten if the theme or plugin is updated.
If you do not want this to happen, please consider forking the plugin, or creating a child theme, but as a temporary solution this may do.

It also requires you to make changed to code, if you are not comfortable doing so, you may likely find other developers who may take this on as a freelance task, or if you have an agency or developer you often use, check with them.

Before you start

Here are some key phrases that will be used, and are important to know so you can quickly identify what needs to be changed.

• [selector] – This is used to reference specific HTML markup that your JavaScript code will run against. Often in this format: $( [selector] ).function()
• [function] – A word that tells the code what to do at any given time, this is what actually performs the code on your markup. Often in this format: $( 'body' ).[function]()
• [event] – Something that happens to make the code run. Often in this format in more modern code: $( 'body' ).on( [event], function() {
• $ or jQuery – This is used to tell your browser to use the jQuery library, it may use either of those two, and you should keep using the one that’s already used. The examples here will use the $ shorthand, as it is more widely used, but there may be other formats as well, so always replicate the start of the code.

You’ll notice that the [selector] has either single, or double, quotes surrounding it, these need to be there so that JavaScript knows it is looking at text, and not a function (this is why the [function] above does not have the quotes around it).

Often you can just search your file for the function name as mentioned below, to find where you need to make changes in your code.

jQuery.fn.live() is deprecated

jQuery documentation about the .live() event handler

Example: $( 'button' ).live( 'click', function() {
Modern example: $( 'body' ).on( 'click', 'button', function() {
Explanation: The above will run whenever a button on your site triggers the [event] of click (the button is clicked), and will then run a series of code.

Example fields:

• [selector] – 'button'
• [function] – .live
• [event]– 'click'

The most common of issues that have been popping up is the use of the .live() function that jQuery used. For clarity, this was deprecated in 2011, but is also one of the easiest problems to resolve.

If you look at the modern example above, you will see that the [selector] has been replaced with a much broader one, this is done because a generic example can not know the structure of your website, and that will always work.
Next the [function] has been replaced with the modern equivalent, but the [event] is still the same.
Finally, notice that the original [selector] has been made a part of the parameters used by the modern [function], and that the rest of the line is retained as it was.

jQuery.browser is deprecated

jQuery documentation about the .browser() function

There is no alternative to this function. It was used to detect what kind of browser a visitor was using, but it was unreliable, and removed for that reason.

If you need to determine what kind of browser a visitor is using to apply special styles or similar (the common use of it), you should look to have a developer add feature detection instead.

jQuery.fn.size() is deprecated

jQuery documentation about the .size() function

Example: $( 'button' ).size()
Modern example: $( 'button' ).length
Explanation: This would count how many items of the [selector] (in this case, buttons) are found on the page. Note that the modern example does not end in a parenthesis, this is correct, it should not have any parenthesis on the end.

Example fields:

• [selector] – 'button'
• [function] – .size

The manner of checking the size like this, is often used to see if one or more HTML elements exist on a page, before trying to manipulate them with JavaScript, or to check how many items exist in a collection (array) before doing a loop. It should be a simple matter of replacing .size() with .length in all those cases.

jQuery.fn.load() is deprecated

jQuery documentation about the .load() event

This function has three uses, and only two of these are deprecated (if you got the warning, one of the two methods below were detected, so you should look for them and fix them).

Example: $( 'body' ).load()
Modern example: $( 'body' ).trigger( 'load' )
Explanation: This would tell the browser to run any code set to run when the page had finished loading, even if it had already finished loading previously.

Example: $( 'body' ).load( function() {
Additional Example: $( 'img' ).load( function() {
Modern example: $( 'body' ).on( 'load', function() {
Additional Modern Example: $( 'body' ).on( 'load', 'img', function() {
Explanation: The above example will run some code when the chosen [selector] has finished loading.

Example fields:

• [selector] – window, 'body' or 'img'
• [function] – .load
• [event] – 'load'

If body or window is used as the [selector], then the functions are meant to run when the page it self has finished loading.

The additional example and modern example would be used to run whenever an, in this example, image was finished loading on the page.

---

Those were the most common problems that have, so far, popped up for users.

Are you having other related issues, or maybe you have tips on how something could be explained even better, please do let me know!

Updated 2024-05-27: Some typographical errors were fixed, and references to the free service o helping convert jQuery code was removed.