Uncaught Typeerror: $ Is Not a Function

The $ sign in jQuery is a syntax commonly used as a shortcut to access or define a JavaScript library. The code below illustrates that invoking the $ sign or the jQuery method results in all the <p> tags in a document. In other words, $() and jQuery() are strictly equal methods.

var getAllParagraphTags = $("p");       
 var getAllParagraphTags = jQuery("p"); 
 
 console.log($ === jQuery);

jQuery is a JavaScript library that makes it easy for developers to manipulate an Hypertext Markup Language (HTML) document. Developers can get elements from an HTML document to help users trigger events on a web page, similarly to working with the Document Object Model (DOM) interface. This way, websites will have functions such as click, scroll, resize, and submit.

WordPress is a free content management system which uses jQuery and other JavaScript libraries. The typeerror: $ is not a function is commonly seen when using jQuery with WordPress because of default scripting that prevents conflict with other libraries.

TypeErrors can be thrown at you when attempting to modify an unchangeable value or when using a value in an inappropriate way. The error can also occur when an argument is passed to a function incompatible with the type expected by the function or the operator inside of the function.

This article dives into the reason this error triggers as well as some possible solutions.

Why This Error Triggers in WordPress

Know that $() and jQuery() syntaxes are strictly equal methods. You must use jQuery() for compatibility with other libraries in WordPress. WordPress runs its own scripts before we can, and the jQuery library is auto set to the noConflict() mode, so the $() syntax shortcut to access it becomes unavailable. However, we can use it locally inside the function scope.

The below code examples throws an error with WordPress as we invoke a jQuery library with $().

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

$(function(){
    $(".element").typed({
        // jQuery code
    });
 });

Possible Solutions

We can fix this error by using jQuery(). We can use $() freely inside of our jQuery object after utilizing it.

jQuery(document).ready(function($){
    var allParagraphTags = $( 'p' );
  });

 jQuery(function($){
    $(".element").typed({
     // jQuery code
 });
  });

Another possible solution would be to set the variable $ to noConflict, overriding WordPress’ initial scripts like in the example below.

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

However, this could cause other errors with other pieces of code as WordPress utilizes many in its content management system. Using the jQuery() method in lieu of the method above is the better solution.

Conclusion

The $() shortcut to access jQuery throws an error in WordPress because the application sets your library to noConflict() mode to ensure compatibility with other libraries. Utilizing the jQuery() method prevents this error from triggering. Developers can then use $() once inside a function invoked with jQuery().

Note that overriding the noConflict() mode in WordPress to prevent this error is not suggested as it may trigger other errors. The preferred solution is to invoke jQuery() globally in lieu of the shortcut, $().