Skip to main content
X

Explore your training options in 10 minutes

JavaScript Tutorials

Uncaught Typeerror: $ Is Not a Function

Kelly M. - September 27, 2020


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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, $().

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Kelly M.

About the author: Kelly is a technical writer at Career Karma, where she writes tutorials on a variety of topics. She attended the University of Central Florida, earning a BS in Business Administration. Shortly after, she attended Lambda School, specializing in full stack web development and computer science. Before joining Career Karma in September 2020, Kelly worked as a Developer Advocate at Dwolla and as a team lead at Lambda School. Her technical writing can be found on Codecademy, gitConnected, and JavaScript in Plain English.

Skip to main content