Quick fix for jQuery “Uncaught TypeError: $ is not a function” in WordPress

jQuery is an old library used on millions of websites. Likewise, WordPress used and still uses it extensively in plugins and themes. While I strongly advise everyone to switch off the usage of this library, we still have to support it in old projects.

One of the common problems I see lately is the jQuery $ (dollar) variable not being recognized. As a result, you may see a message like this in the dev console:

Uncaught TypeError: $ is not a function

Preferred solution if you have access to JS code and have permission to edit:

There are dozens of solutions to this problem. But most of them require modifying the existing code.

So, use the full jQuery keyword instead of the shorthand “$”. Replace all instances of “$” with “jQuery” in your code. This is because WordPress uses the “no-conflict” mode, which prevents the “$” symbol from being used as an alias for the jQuery object.

Replacing the $ variable with jQuery would be a fix, but wrapping it in a function like this should be easier because you change the scope of dollar variable to local function:

(function($){
    // Your normal jQuery code goes here
})(jQuery);

… and many other similar solutions.

Doing so is preferred when you have access to the code and you are allowed to edit it. But when you can’t or don’t want to change it, you can achieve it with this workaround as follows.

Your site may not load jQuery at all, so in this case, you must call it

Enqueue jQuery in your theme or plugin. WordPress includes a copy of jQuery by default, but it’s always better to use the latest version of jQuery from a content delivery network (CDN) or from a local file. You can enqueue jQuery by adding the following code to your functions.php file:

function zwp_enqueue_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'zwp_enqueue_jquery');

Load jQuery before your custom code

Make sure that jQuery is loaded before your custom JavaScript code. You can do this by either adding your code to the bottom of the page, just before the closing tag, or by using the jQuery.ready() method to ensure that the page is fully loaded before executing your code.

jQuery(document).ready(function() {
    // your code here
});

No conflict mode

Check for jQuery conflicts with other plugins or scripts. Sometimes, two plugins or scripts may try to use different versions of jQuery or other JavaScript libraries, causing conflicts. You can use the jQuery.noConflict() method to avoid conflicts between different versions of jQuery. For example:

var $j = jQuery.noConflict();
$j(document).ready(function() {
    // your code here
});

The alternative solution when you may not have access to JS code:

Add this in the functions.php file of your theme, or in a new plugin.

add_action('wp_enqueue_scripts', function(){
	wp_add_inline_script('jquery', 'var $ = jQuery.noConflict();');
});

What this does, is adding the no conflict jQuery code, which re-registers the dollar variable.

It should do the trick.

One last note, if the above code does not work for you. Check the source code. You may have two or more versions of jquery enqueued on the page. Make sure to leave only one.

Conclusion

In conclusion, encountering the “Uncaught TypeError: $ is not a function” error message in jQuery when working with WordPress can be frustrating. However, there are a few quick fixes that can help resolve the issue. The first step is to ensure that the jQuery library is loaded correctly and in the right order. Another solution is to use the jQuery.noConflict() method to avoid conflicts with other JavaScript libraries. Additionally, wrapping the jQuery code inside a document.ready() function can also help solve the issue. By applying these solutions, you can avoid the error and ensure that your jQuery code works seamlessly with WordPress.