Most of the time ‘jQuery is not defined’ is because the jQuery you are trying to execute is loading before the jQuery that comes default in the WordPress frontend. You can fix this by instructing WordPress to execute the jQuery after your script. There are two scenarios for this. In this article I will show both.
Table of Contents
- What does the ‘jQuery is not defined’ error mean?
- How to fix ‘jQuery is not defined’ error
- Learn WordPress customization throughly with an online course at Udemy
What does the ‘jQuery is not defined’ error mean?
Usually this means that the jQuery you are trying to execute is being run by the browser before the jQuery file. The solution is to simply run it afterward but depending on how you are adding it in the first place there are two ways to do this which I will discus below.
For those that are not aware of how the browser loads files read on otherwise you can skip to the next section if you just want to know the fix.
The browser, after requesting the website files from the server, will load them to the users browser screen in a particular order. If the jQuery that is causing the error uses jQuery but the jQuery library (which WordPress will load by default) has not first been loaded then you will see this error.
How to fix ‘jQuery is not defined’ error:
If you are adding the Javascript via a Hook:
If you are adding the jQuery via a WordPress hook like wp_enqueue_script() then there is a parameter in this Hook has that will allow you to tell WordPress what other files it should wait for before loading the particular jQuery which is causing the error.
Here is an example of this from the wild,
<?php
wp_enqueue_script( 'admin-js', get_template_directory_uri() . '/admin.js', array('jquery'), '1.0', false );The ‘array(jQuery)’ part tells WordPress to wait until jQuery has loaded on the page BEFORE loading the jQuery admin.js.
You can read more about wp_enqueue_scripts() here as it has more parameters that you may want to know about.
If you are adding the Javascript via HTML:
If you are adding jQuery via a script tag in an HTML template or file (perhaps in footer.php) then make sure to load it as the last script tag directly before the closing </body> tag.
PROTIP: If you are still having issues then I suggest you add the jQuery using the WordPress Hook described in the above section as this is the native way to add jQuery and as such it will be more easily understood and worked with within your site.
Learn WordPress customization throughly with an online course at Udemy
If you are having difficulty understanding this tutorial and then I suggest you start from scratch with WordPress in general. The best way to learn is with a better all around general understanding of WordPress. Check out some of the courses on Udemy related to WordPress. They cover developer level courses and more non-dev CMS editor type tutorials as well.
