Uncaught ReferenceError: $ is Not Defined

Are you having problems with a JavaScript code that you just included in your WordPress Website? Do you want to fix the “Uncaught ReferenceError: $ is Not Defined”? Then, let’s see how to resolve this issue once and for all.

Often, WordPress developers feel the need to add custom functionalities to their WordPress websites; functionalities that rely on JavaScript to work perfectly.

As an example, I created lately a custom Video slider using the famous Slick jQuery plugin and Custom Field pro. The client sent me a direct link to codepen.io and everything was there, the CSS, the HTML, and the JavaScript code ready to include directly into the WordPress theme.
I started working on the new slider, I created the Custom Field Pro fields, I created the theme template, I registred Slick CSS and JavaScript files and finally, I initialized the slider… But, The slider didn’t work.

Uncaught ReferenceError: $ is Not Defined!

The Code looked like this:

The problem with this code is that in WordPress, jQuery needs to be accessed through $ by passing a jQuery object to an anonymous function just like this:

This will revoke the need to call the .noConflict() function, or to set $ using another variable, and this is why we see $ as undefined…

How to fix the Uncaught ReferenceError: $ is Not Defined!

The fix is pretty simple Actually. If we want to use $ as default, we need to wrap the code with a function just like this:

So my code should look like this:

Finally, I hope you find this small Tip helpful. If you have an addition or have an issue, leave a comment and ill be happy to interact.

You May Also Like

About the Author: Editorial Staff

Leave a Reply

Your email address will not be published. Required fields are marked *