WordPress $ is not defined even if jQuery is loaded

Many times while using WordPress, if we try to use “$” to access jQuery, we get an error the “$ is not defined”. This happens because the jQuery library which is included in WordPress loads in “no conflict” mode. In the no conflict mode jQuery returns the control of “$”, and it is no longer accessible as function, variable or alias for jQuery. WordPress does this in order to prevent compatibility problems with other JavaScript libraries that can be loaded.

To solve this we can use “jQuery” instead of “$”. So, instead of using the standard code with “$”

$(document).ready(function(){
     $(#selector) ...
});

we can use the following code, which uses “jQuery” instead of “$”

jQuery(document).ready(function(){
     jQuery(#selector) ...
});

If you want to use the default “$” symbol, it can be done by wrapping the code within a function

(function($) {
    // You can use $() inside of this function
    $(#selector) ...
})(jQuery);

If you want to execute the jQuery code on document ready you can use the following instead of the above code:

jQuery(document).ready(function($) {
    // You can use $() inside of this function
    $(#selector) ...
});

Related posts:

  1. How to remove WordPress version number
  2. How to remove WordPress version parameter from JS and CSS files
  3. How to add featured image to WordPress RSS feed
  4. How to remove render blocking JavaScript with defer and async

5 thoughts on “WordPress $ is not defined even if jQuery is loaded”

  1. Hi,
    I’m having a problem with jquery multiselct . I’m not very sure if its because of $.
    I have the following piece of code in a file .
    $(“#test”).multiselect({
    multiple: false,
    header: false,
    selectedList: 1,
    minWidth: 120,
    height: 155
    });
    It works fine until I make a call to another jsp where i’m loading the jquery js files.
    I tried replacing $ with jQuery but it did not work.

Leave a Reply