WordPress “jQuery is Not Defined” Error: 5 Ways to Fix It

“jQuery is not defined”. This frustrating error message comes up on your WordPress website when its JavaScript code tries to use the jQuery library before it’s properly loaded. It sounds simple, but there are several culprits at play here, from plugin conflicts to incorrect file paths and more.

Ignoring it can lead to broken features and unresponsive elements, meaning a poor user experience. But don’t worry; it’s fixable and even avoidable. That’s what we aim to cover through this blog.

I’ll explain the causes of this error and how the WordPress experts take care of them. Let’s begin.

What is the “jQuery is Not Defined” Error in WordPress?

“jQuery is not defined” is a JavaScript error. It occurs when our website’s code attempts to utilize the jQuery library before it has been properly loaded by the browser. jQuery is a popular JavaScript library that simplifies common web development tasks, such as DOM manipulation, animations, and AJAX calls.

Essentially, this error message indicates that your website’s JavaScript code is trying to use a tool (jQuery) that it can’t find. That leads to malfunctions in interactive features or dynamic elements that depend on jQuery.

What Causes the “jQuery is Not Defined” in WordPress?

This error stems from issues that prevent the jQuery library from being correctly loaded or initialized before it’s called upon by your website’s JavaScript code. Here are the common causes.

Plugin or Theme Conflicts

Plugins or themes might interfere with each other’s functionality, particularly if they load different versions of jQuery or load their scripts in a conflicting order.

Moreover, older plugins or themes may not be compatible with the latest WordPress version or other updated plugins, leading to conflicts in script loading.

Incorrect File Paths

If the path specified in your code to the jQuery library contains typos or errors, the browser won’t be able to locate and load the file. In some cases, the jQuery file itself might be missing from your WordPress installation or theme directory.

Missing Dependencies

If jQuery plugins or custom scripts depend on jQuery, but these dependencies are not properly defined, the “jQuery is not defined” error can occur.

Other than these, although rare, corrupted WordPress core files might interfere with jQuery’s loading process. It may happen after failed updates or server issues.

If you need help troubleshooting the cause of concern with undefined jQuery, get help with our expert WordPress developers.

How to Fix the WordPress “jQuery is Not Defined” Error?

The solution method depends on the cause. After troubleshooting the issue, follow one of the solution methods.

Make Sure jQuery is Loaded

Sometimes, this error occurs when jQuery is included but not loaded. So first, before trying complex solutions, you need to confirm whether jQuery is actually present and accessible on your WordPress website. For that, you will need to find the script source and paste the URL in a new browser or tab.

Let’s say the <script src= is set to this:

<script src=“http://code.jquery.com/jquery-1.11.2.min.js”

type=“text/javascript”></script>

Then copy http//code.jquery.com/jquery-1.11.2.min.js and paste it into a new window or tab. If the jQuery file loads and you see the entire content, then you can rest assured that the included jQuery is loading properly.

Use the Network Tab to Debug

The best browsers for web developers have a range of developer tools with a Network tab. This tool diagnoses website loading issues, including the “jQuery is not defined” error. It provides a detailed view of all network requests made by your browser when loading a webpage. It gives you insights into what files are being loaded, their loading order, and potential problems.

Here’s how you go about this process:

Step 1: In most browsers, you can press F12 (or right-click and choose “Inspect” or “Inspect Element”).

Step 2: Click on the “Network” tab within the developer tools panel.

Step 3: Refresh the webpage with the Network tab open to capture the loading process.

Step 4: Type “jquery” in the filter box to quickly locate requests related to the jQuery library.

Step 5: Then you need to check for the 404 errors. A 404 error next to “jquery.js” or a related file indicates that the browser couldn’t find the file at the specified location. It might be due to:

• Incorrect File Path: There might be a typo in the URL or the file might be in a different directory.
• Missing File: The jQuery file might be missing from your server.

Step 6: Look for status codes other than 200 (OK), which indicate successful loading. For example, a 500 error suggests a server-side issue.

Step 7: Click on the jQuery request and navigate to the “Headers” tab. Look for:

• Content-type: It should be “application/javascript” or “text/javascript”.
• Caching headers: Issues with caching might prevent the latest version from loading.

Step 8: Next, analyze the loading order through a waterfall view. You can see the order in which they were initiated and completed.

Step 9: Ensure that “jquery.js” is loaded before any other JavaScript files that depend on it. If a script tries to use jQuery before it’s loaded, you’ll get the “jQuery is not defined” error.

For example, let’s say the actual path is http://yourwebsite.com/wp-content/themes/your-theme/jquery.js but the file path in the request URL looks like http://yourwebsite.com/wp-content/themes/your-theme/js/jquery.js. Then you have found the incorrect file path and will see a 404 error for “jquery.js”.

Add a Code Snippet to wp-config.php File

Now on to the most effective solution method. By editing the wp-config.php file, you can influence how WordPress handles JavaScript files. So adding a particular code snippet to it can help resolve the “jQuery is not defined” error.

You can access the wp-config.php file through an FTP client or using a cPanel offered by the WordPress hosting provider. Upon access, add the following code snippet.

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

Then, save the changes and refresh the website. See if the “jQuery is not defined” error is resolved.

This code excerpt disables WordPress’s default behavior of concatenating (combining) JavaScript files. It can sometimes resolve conflicts that arise from the order in which scripts are combined and loaded.

Add the jQuery Library Manually

Another reason why you might be seeing the “jQuery is not defined” error is because the jQuery is missing from your WordPress website altogether. That involves downloading the jQuery file and inserting a code snippet into your theme’s header.php file to include it.

Here’s how you go about it.

Step 1: Go to the official jQuery website.

Step 2: Choose the “Download the compressed, production jQuery 3.x” option (replace “3.x” with the latest version number) and save it (jquery.min.js) to your computer. The smaller size will ensure faster loading.

Step 3: Use an FTP client or your hosting control panel’s file manager to connect to your website.

Step 4: Go to /wp-content/themes/your-theme-name/, replacing “your-theme-name” with the actual name of your active theme.

Step 5: Locate and open the header.php file in a text editor.

Step 6: Find the closing </head> tag in the header.php file and insert the following code snippet before it.

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

• <?php echo get_template_directory_uri(); ?>: This WordPress function dynamically retrieves the URL of your current theme’s directory.
• /js/jquery.min.js: This specifies the path to the jQuery file within your theme’s directory. Make sure to adjust this path if you place the jquery.min.js file in a different location within your theme’s folder.

Step 7: Now, upload the downloaded jquery.min.js file to your theme’s directory (or the location specified in the code). Create a “js” folder if it doesn’t exist.

Step 8: Save the changes to the header.php file.

Now, refresh your website and check if the “jQuery is not defined” error is resolved.

Include Google-hosted jQuery with a Local Fallback

Finally, you can include a Google-hosted jQuery with a local fallback. This strategy ensures your website loads quickly and reliably. You get the Google Content Delivery Network’s (CDN) speed and efficiency, while providing a backup in case the CDN is unavailable.

With a Google-hosted CDN, your website can load jQuery from a server geographically closer to the user. That means faster load times. And the local fallback means your website will automatically fall back to using a copy of jQuery on the local server if the CDN fails to load.

Here’s how you go about this process: 

Step 1: Connect to your server via FTP or your hosting’s file manager.

Step 2: Navigate to your active theme’s directory (/wp-content/themes/your-theme-name/) and open the functions.php file in a text editor.

Step 3: Add the following code snippet to your functions.php file.

<script>
window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>'))
</script>

Finally, save the functions.php file and refresh your website to see if everything is working correctly.

If you still see this error on your website, I suggest you get help from professional WordPress web experts. We will do a comprehensive analysis of your website and identify the root cause of the issue to implement the best strategy.

FAQs on WordPress “jQuery is Not Defined” Error

To Summarize

Although the “jQuery is Not Defined” error on WordPress websites can be quite frustrating, you can take care of it quite easily. But first, you need to confirm whether jQuery is loaded at all. If it’s present, you can pinpoint the error through the Network tab.

Depending on the root cause, you can debug it through the Network tab, add a code snippet to your wp-config.php file, or manually add the jQuery library. You can also include a Google-hosted jQuery with a local fallback.

Still having issues with the jQuery error on your site, connect with our WordPress professionals today!