Uncaught ReferenceError: jQuery is not defined occurring on your WordPress website? Then you are at the right place, as I’m going to discuss in detail how you can fix jQuery errors in WordPress.”

Most of the website are using jQuery these days. In fact, this JavaScript library is used for anything from prompting interactivity into WordPress pages like hovers to creating animations and effects. Whatever fancy effects you see on any WordPress site, it is all javascript. Although it is known to offer high flexibility, it is also common to experience runtime errors.

One of the most common JavaScript errors in WordPress is “jQuery is not defined”. The error message means that the website cannot call a function from the jQuery JavaScript library. As a result, one, or several website elements may stop, or not work properly.

Here in this TemplateToaster WordPress Theme Builder, blog I’m going to discuss in detail ways to find and fix this common jQuery error in WordPress. So, let’s begin.

What is “jQuery is Not Defined Error” on WordPress?

jQuery is not defined is a common WordPress error that occurs when a website calls for a jQuery function but the library is unable to load the function properly. In simple words, this error may occur on your website because for some reason, when the browser tried to load the website and called for that specific jQuery file, it was unavailable.

There are many reasons you may come across the “jQuery is not defined” error. Some of these are mentioned below.

What Causes “jQuery is Not Defined Error” on WordPress Site?

There are many reasons why you may come across the jQuery is not defined error while using a WordPress website. Here are some of the potential reasons why you may experience an “UnCaught ReferenceError” jQuery is not defined” error while using the WordPress site.

  • Conflicting plugins: The old plugins installed on your WordPress website are conflicting with the ones that you have recently installed. So if you have recently installed or updated plugins on your website or some of the plugins on your website have not been updated, then this may be the cause for the jQuery not defined error.
  • A slow or poor-performing hosting environment: This can increase the total time it takes for the jQuery to respond when requested. Make sure to check your server resources or the error log to validate this.
  • Overloading your CDN-hosted jQuery: If you are using CDN-hosted jQuery then it might be unable to reach out to the server. A slow or inconsistent host can be the cause of the error. Also, it could be down or may not be able to reach out to the server because of many requests. If you are not using CDN then eliminate this reason.
  • JavaScript on your website is running before the jQuery is fully loading. First, the jQuery should fully load, only then the code will work correctly, using the data from the jQuery dependency.
  • The framework may not be implemented correctly. The order of code snippets is very important. This can be the reason for the error, and also for other code issues between the sources.
  • There might be an error or typing issue in the version of jQuery. Maybe you’ve recently edited a file or plugin, which may be causing the issue.

It might be the reason why you may come across problems like some of the plugins not working properly, slider animations not playing, and more. So, it is important to know how to fix jQuery errors on WordPress.

How to Fix WordPress Error “Uncaught ReferenceError: jQuery is not defined”?

Now that you know the most common cause of jQuery is not defined error, it is time to understand the solutions that can help you fix this WordPress error. But before we dive into the solutions, make sure to make a backup of your website, you can use the WordPress plugin for backup. Having a backup will help you lose any important data.

Solutions to Fix “jQuery Is Not Defined Error”

Method 1: Inclusion of jQuery Library

The first thing you need to do is check the code and make sure the jQuery is included and will load before the script. Also, the jQuery should load once only. If it is loading multiple times it will cause the error.

Check out the Network tab of your browser’s dev tools to know if the jQuery is being loaded or not. This way you can quickly check and confirm.

Alternatively, you can also check various plugins and themes that may be causing the error. Make sure to review the code of your website and check if jQuery is included. It is best if you only load it once.

However, if jQuery is not included, then pass it as a third argument, and add it to your wp_enqueque_script() function as given below snippet

wp_enqueue_script( 'tt-mobile-menu', get_template_directory_uri() .
'/js/mobile-menu.js', array('jquery'), '1.0', true );

To find this code go to the wp-includes folder, and then open the script-loader.php file. However, if this method does not work, or you find out that the jQuery is already included then follow the next solutions.

Method 2: Make Sure the jQuery is Loaded

The jQuery is not defined error may also occur if jQuery is included but not fully loaded. So you need to make sure it is fully loaded. Simply find the script source and paste the URL into a new browser or tab.

For example, if the <script src- is set as:

<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>

Then you need to copy and paste the http://code.jquery-1.11.2.min.js section into the new window or tab. If the jQuery loads and shows the complete content, then you can proceed with the next solution.

Method 3: Structure of the JavaScript File

Also, make sure to check the structure of the JavaScript file is correct. It should start as:

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

Alternate: Wrapping the code in a function
If you want to go with the default “$” symbol, you can wrap the code within a function as follows –

(function($) {
// Use $() inside of this function
$(#selector) ...
})(jQuery);

Method 4: Add Google-Hosted jQuery With A Local FallBack

This is a good solution to add to your JavaScript as sometimes running jQuery on localhost can help enhance the overall website experience. Also, it helps resolve any other CDN-related issues.

// Fall back to a local copy of jQuery
window.jQuery || document.write('<script src="http://code.jquery.com/jquery.min.js"><\/script>’
))

Method 5: Add A Snippet to the wp-config.php File

If the above-mentioned solutions to fix jQuery not defined errors do not work then you need to define the file path (ABSPATH) in the WordPress core file. You need to insert the given below snippet in the wp-config.php file using a File Manager or FTP client.

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
define('CONCATENATE_SCRIPTS', false);

Method 6: Add jQuery Library Manually

Well, if none of the solutions for how to fix jQuery errors in WordPress work, then this is the last method to fix the issue. You can directly go to the header.php file and insert the jQuery library. Here is how you can do it:

  • First of all, go to the Google-hosted libraries and copy the latest version of the CDN code snippet of the jQuery library.
  • Then, find the header.php file in the theme folder.
  • Open the header file and paste the jQuery library from step one right after the head tag as shown below: 
    <head>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  • Lastly, make sure to save the changes.

How to Avoid “jQuery Not Defined” Error on WordPress?

Notably, there are two methods to insert the jQuery library into your WordPress website. The first one is to include the source code in the HTML files or a new JavaScript file.

You can do the first method easily- simply download the jQuery files or copy the jQuery CDN code snippet and insert the file path or URL in the header of the HTML files. We have already discussed how to do this in the above methods.

Although this is the easiest method, it requires you to update all of the HTML files using the latest jQuery version. This is the main reason why developers prefer the other method.

So, by adding the source code in a different JavaScript file, you only need to modify that particular file. And have it take effect on all of the HTML files that call the function.

Conclusion: Fix jQuery Is Not Defined Error

And that’s about it. After following the above-mentioned methods you should be able to fix the WordPress Error “Uncaught ReferenceError: jQuery is not Defined”.

The main reason for this error is that the browser is unable to connect with the jQuery library. So there are limited solutions to fix this issue. However, by following the methods mentioned in this post you should be able to resolve jQuery errors on your WordPress site.

However, if none of these solutions works make sure to contact your hosting provider for help. Hope you have got the necessary information, and this will help you out. If you have any queries you can post in the comment section below.