How To Fix the “Uncaught TypeError: $ Is Not a Function” Error

WordPress fully supports JavaScript as well as the jQuery library. However, the way in which WordPress implements jQuery can lead to errors when you’re trying to execute functions. One of the most common issues is the “Uncaught TypeError: $ is not a function” error.

Troubleshooting this error is relatively simple if you understand what causes it. The “$” alias is at the core of the problem, and jQuery and WordPress offer several ways to circumvent it so you can run the functions you need.

In this article, we’ll explain what the “Uncaught TypeError: $ is not a function” error is and what causes it. Then, we’ll also show you how to troubleshoot it. Let’s get started!

What Is the “Uncaught TypeError: $ Is Not a Function” Error in WordPress?

The “Uncaught TypeError: $ is not a function” error is a common JavaScript error that occurs when the jQuery library is not loaded correctly or there’s a conflict with other scripts using the ‘$’ symbol.

In WordPress, this error has more to do with how the Content Management System (CMS) implements jQuery and less with loading problems.

jQuery is a popular JavaScript library. It’s widely used in WordPress themes and plugins for handling various dynamic elements, animations, and AJAX operations:

In jQuery, the “$” symbol is an alias for the jQuery object, which is the primary object you interact with when working with the library. It makes the code shorter, more readable, and easier to write.

The “Uncaught TypeError: $ is not a function” is somewhat difficult to troubleshoot because you won’t see a clear error message. Unlike other WordPress errors, this problem can be triggered by misconfigured elements on your site or even a 404 error page:

The most effective way to diagnose the problem is by taking a look at the developer console or by using WordPress debug logs.

What Are the Main Causes of the “Uncaught TypeError: $ Is Not a Function” Error?

The “Uncaught TypeError: $ is not a function” error has everything to do with jQuery. You’ll run into this problem when a function that includes the “$” symbol is executed while the website is being loaded.

Here are some potential causes behind the error:

1. The jQuery library is not properly loaded. If the jQuery library isn’t properly loaded or enqueued, the ‘$’ symbol won’t be recognized as a valid function and it will throw an error. This is typically not a problem in WordPress because the Content Management System (CMS) loads the library natively.
2. You’re using jQuery in noConflict mode. By default, WordPress runs jQuery in noConflict mode. That means it doesn’t recognize the “$” symbol as a function name. To use it, you’ll need to put a workaround in action.
3. Plugin or theme conflicts. Some plugins or themes may have improperly coded JavaScript that interferes with the proper functioning of jQuery or uses the ‘$’ symbol in a way that causes problems with other scripts.

To summarize, WordPress is not configured to recognize the “$” symbol. However, that doesn’t mean you can’t run jQuery code within the CMS. After all, the library is part of WordPress. What you’ll need to do is use a workaround to avoid problems with the “$” symbol.

How To Fix the “Uncaught TypeError: $ Is Not a Function” Error (2 Ways)

Before we get to work, it’s important to note that jQuery is already a part of WordPress. Some tutorials will instruct you to enqueue jQuery, but the library has been a part of the Content Management System (CMS) for a while.

WordPress also runs jQuery in “noConflict” mode out of the box. That means it releases the “$” symbol so that other libraries can use it. Instead of disabling “noConflict” mode, here’s how you should approach this problem.

1. Use “jQuery” Instead of “$”

If you run into problems while using the “$” symbol in functions, you can use “jQuery” instead. To give you an example, here’s what a basic jQuery function using “$” may look like:

$(function() {
  // Your code here will run once the DOM is ready
});

In this case, a quick fix would be to replace the “$” symbol with jQuery. The code would then look like this:

jQuery(function() {
  // This code will not trigger the error
});

Alternatively, you can “wrap” the code in an immediately invoked function expression that contains the jQuery symbol. The following example would not trigger the “Uncaught TypeError: $ is not a function” error because it uses the jQuery symbol as a wrapper:

jQuery(function ($) {
    // You can use $ inside the wrapper
    console.log($('.primary-menu'));
});

After making these changes to the code, you can use your browser’s developer console or the WordPress debug log to see if the error persists. If it does, you may need to map “jQuery” to another symbol to circumvent more errors.

2. Use a Custom Alias in jQuery

“$” is the default alias for the jQuery object. However, since WordPress runs jQuery in noConflict mode, you might need to map an alternative alias to avoid conflicts with other libraries.

This process is relatively simple, as you can map the alias to a new symbol with a single line of code:

vvar $j = jQuery;

That code replaces the default alias with “$j” but it can be anything else you want. Some developers prefer this approach versus having to type the full “jQuery” object, as we showed in the previous method.

If you’re not sure where to add this code, you can read our tutorial on how to add code to the header and footer in WordPress. Keep in mind that even if you register a new alias, you’ll still be able to use “jQuery” instead of that symbol.

Summary

WordPress enables you to use jQuery on your website. However, if you want to avoid errors such as “Uncaught TypeError: $ is not a function”, you’ll need to understand how the CMS implements the library. WordPress uses jQuery’s “noConflict” mode, which means it doesn’t recognize the “$” symbol.

The “Uncaught TypeError: $ is not a function” error appears when you try to use a function that calls jQuery using “$”. To circumvent this problem, you can type the full jQuery object instead or map the alias to a different symbol to avoid conflicts.

If you use Kinsta, you can enable WordPress debug mode in the MyKinsta dashboard to diagnose problems. Plus, all of our plans offer top-quality support to help you troubleshoot any issues that you may encounter. Check out our plans!