Around 80% of all websites are running on jQuery – if your WordPress site is one of them, you might encounter the “Uncaught ReferenceError: jQuery is not defined” error at some point. This error message indicates that your site can’t call a function from the jQuery JavaScript library, causing one or multiple website elements to stop running.
Fortunately, there are multiple ways to fix this common error. In this article, we will go through four methods to do so for WordPress users.
What Is the jQuery Is Not Defined Error?
jQuery is not defined” is a common WordPress error that occurs when a website calls for a jQuery function before the library properly loads. Possible causes include conflicting plugins, a corrupted jQuery file, a blocked CDN, or your JavaScript code loads incorrectly.”
Common Causes of the jQuery Is Not Defined Error
Here are several possible causes that can trigger the “Uncaught ReferenceError: jQuery is not defined” error on your WordPress website:
- Conflicting plugins. A recently installed or activated plugin might have a jQuery variable that conflicts with one of your old plugins. Not using the latest version of your plugins could also cause the jQuery error.
- Blocked CDN-hosted jQuery. If you’re using a CDN-hosted jQuery like the Google Hosted Libraries, it might be down or blocked from reaching your server due to the huge number of requests.
- Corrupted jQuery file. This is usually the case when downloading a file from an unreliable website.
- JavaScript runs incorrectly. Your JavaScript runs before the jQuery code is fully loaded, causing your website to call for functions that haven’t been defined yet.
4 Methods to Fix the jQuery Is Not Defined Error
Now that you understand how the “Uncaught ReferenceError: jQuery is not defined” error occurs, it’s time to debug your WordPress website. In this section, we will show you four solutions to fix this issue.
1. Add a Snippet to the wp-config.php File
The first and most effective way to fix the “jQuery is not defined” error is to define the file path (ABSPATH) in the WordPress core file. Insert the following snippet to the wp-config.php file through a File Manager or an FTP client like FileZilla:
/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
define('CONCATENATE_SCRIPTS', false);
2. Include Google-Hosted jQuery With an Alternate Fallback
Setting a fallback helps to solve CDN loading issues. If your chosen CDN is unavailable, your server can run the cached version of jQuery to keep the site functioning normally.
// Fall back to a local copy of jQuery if the CDN fails
<script>
window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>'))
</script>
3. Add the jQuery Library Manually
If the previous methods don’t fix the jQuery error, try adding the jQuery library to your header.php file. Here’s how to do it using Hostinger’s File Manager:
- Go to the Google Hosted Libraries and copy the CDN code snippet of jQuery’s latest release. The following is the code snippet for version 3.x:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- Locate the header.php file in your theme folder.
- Open the file and paste the code snippet you obtained in the first step right below the <head> tag.
- Save the changes made.
Pro Tip
You can also use this method to add other JavaScript libraries to your WordPress website.
4. Make Sure jQuery Is Loaded
If you have already included jQuery in your website file, the “Uncaught ReferenceError: jQuery is not defined” error can be caused due to the code not loading correctly.
Therefore, the final step is to double-check the source code of the WordPress page in question and look for the <script src=””> tag in the header part. You can use your browser’s Inspect Element tool to find the snippet faster.
Here are some examples of the source code to look for:
<script src="https://www.hostinger.in/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
If the snippet refers to a file name like the first example, ensure it’s spelled correctly. Otherwise, copy and paste the URL of the jQuery library to a new web page to see if it loads.
Pro Tip
When copying and pasting a link, there might be extra spaces being added to it. Pay attention to this issue the next time you need to paste code snippets with URLs into your WordPress website files.
How to Include the jQuery Library Correctly
There are two ways to add the jQuery library to your website ‒ including the source code in the HTML files or a new JavaScript file.
You can do the former method by downloading jQuery files or copying the jQuery CDN code snippet and adding the file path or URL to the header section of your HTML files. We already covered how to do both in the previous sections.
Despite being the easiest of the two, this method requires updating all HTML files if you want to use the latest jQuery version. It’s why developers generally prefer the second method.
By putting the source code in a separate JavaScript file, you only need to make changes to that specific file and have it take effect on all the HTML files that call the function.
Conclusion
No WordPress website is immune to the “jQuery is not defined” error. Luckily, there are four easy solutions to fix this common issue:
- Add the absolute path to the wp-config.php file.
- Include Google-hosted jQuery with an alternate fallback.
- Manually add the jQuery library to the theme’s header file.
- Make sure jQuery is loaded correctly.
We hope this article has helped to solve your WordPress jQuery error. Good luck!
