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) ...
});