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 a 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) ...
});
Contact Us
  • Tencent AI Lab, Shenzhen, China
  • cshzxie [at] gmail [dot] com