jQuery or $ not defined WordPress Issue

jQuery is a well known and very popular javascript library. It is used to manipulate DOM tree, event handling, animation and for dynamic content loading with Ajax. jQuery is very easy to learn and use. We just need to add the jQuery library in the header section of your HTML page and then you can start using it. Using jQuery with WordPress is a little tricky because WordPress is using other javascript libraries that can conflict with jQuery and that is why we get the jQuery not defined or $ not defined error.

Common causes of jQuery not defined error

There could be many possibilities to encounter the jQuery not defined error. Some common issues are the followings:

Any of your plugin conflicting with other plugins.
JavaScript run before the DOM properly loaded.
You JavaScript code loads before the jQuery library.
jQuery hosted CDN could be blocked or down.

These are some common issues that cause the jQuery not found issue.

Solutions for the Uncaught ReferenceError: jQuery is not defined

Step 1: Correct way to include jQuery Library

jQuery library is already available in the WordPress itself. You don’t need to use any CDN hosted url to include it on your website. You can include jQuery with wp_enqueue_script() function. If you go through the documentation then the 3rd parameter accepts the values in array(). That you can use to include the jQuery. jQuery and many more libraries are pre-registered with WordPress with their unique name that you need to know. You can find the name it here and use as the example.

wp_enqueue_script("your_unique_handle", 'PATH_OF_YOUR_FILE', array('jquery'), '1.0.1', true);

Step 2: Properly structure javascript file

There are 2 ways to use jQuery in WordPress. I personally preferred the first one.

(function() {

    // Let the DOM loading first
    $(document).ready(function() {
       // your code goes here..
    });
})(jQuery);

And the alternative way is to use the jQuery instead of $

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

Step 3: Make sure the jQuery is loaded

The final step is to make sure that your jQuery library is properly loaded in your website. You can check it by viewing the source code. And make sure your javascript file is loaded after the jQuery load otherwise it will generate the same Uncaught ReferenceError: jQuery is not defined or Uncaught ReferenceError: $ is not defined.