Mangcoding

icon chat
Mulida Asti - Wednesday, 19 March 2025 - 3 months ago

4 Effective Ways to Fix jQuery Code Errors in WordPress

single image
Photo By Tim Gouw on Unsplash

Around 80% of all websites use jQuery – if your WordPress site is one of them, you may have encountered the error “Uncaught ReferenceError: jQuery is not defined” at some point, and you need to fix this jQuery code error.

This error message indicates that your site is unable to call functions from jQuery JavaScript, which can cause certain website elements to malfunction or stop working altogether.

In this article, we will discuss four methods to fix common jQuery errors for WordPress users.

Link Mangcoding

Common Causes of the “Uncaught ReferenceError : jQuery is not defined” Error

Here are some possible causes that may trigger the “Uncaught ReferenceError: jQuery is not defined” error on a WordPress site:

  • Plugin conflicts. A newly activated plugin may have a jQuery variable that conflicts with an existing plugin. Additionally, outdated plugins can also cause jQuery errors.
  • Blocked jQuery from CDN. If you are using a jQuery library hosted on a CDN (such as Google Hosted Libraries), it may be inaccessible or blocked due to excessive requests.
  • Corrupt jQuery file. This usually happens when downloading files from untrusted sources or websites with low security.
  • JavaScript execution issues. Your JavaScript might be running before jQuery is fully loaded, causing the site to call functions that haven’t been defined yet.
Link Mangcoding

4 Methods to Fix jQuery Errors

Now that you understand why the “Uncaught ReferenceError: jQuery is not defined” error occurs, it’s time to debug your WordPress site. Here are four solutions to fix this issue:

1. Add a Code Snippet to the wp-config.php File

The first and most effective way to fix the “jQuery is not defined” error is by defining the absolute file path (ABSPATH) in the WordPress core file. Add the following snippet to the `wp-config.php` file using a File Manager.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
define('CONCATENATE_SCRIPTS', false);
/** Absolute path to the WordPress directory. */ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); define('CONCATENATE_SCRIPTS', false);
/** Absolute path to the WordPress directory. */ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); define('CONCATENATE_SCRIPTS', false);

2. Include Google-Hosted jQuery with an Alternative Fallback

Setting up a fallback ensures that if the preferred CDN is unavailable, the server will use a cached version of jQuery to keep the site running 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. Manually Add jQuery to the Header File

If the previous methods do not fix the jQuery error, try manually adding the jQuery library to your header.php file:

A. Open Google Hosted Libraries and copy the latest jQuery CDN snippet. Here’s an example for version 3.x:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

B. Locate the header.php file in your theme’s folder.

Mangcoding Memperbaiki Error kode jQuery file header

C. Open the file and paste the copied snippet right below the head tag.

Mangcoding Memperbaiki Error kode jQuery code

D. Save the changes.

4. Ensure jQuery is Loaded Properly

If you have already added jQuery to your website’s files but still encounter the “Uncaught ReferenceError: jQuery is not defined” error, it could be due to improper loading.

Therefore, the final step is to review the source code of the relevant WordPress page and look for the …….. tag in the header section. Next, you can use the Inspect Element tool to quickly locate the snippet.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>


<script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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, ensure the spelling is correct. If necessary, copy and paste the jQuery library URL into a new browser tab to verify that it loads properly.

Link Mangcoding

How to Correctly Include the jQuery Library

There are two main ways to add a jQuery library to your website, including the source code in an HTML file or a new JavaScript file.

You can do this by downloading the jQuery file or copying the CDN snippet and adding it to the HTML file’s header section.

Although this is the easiest of the two methods, it requires updating all HTML files if you want to use the latest version of jQuery. That is why developers generally prefer the second method.

By placing the source code in a separate JavaScript file, you only need to make changes to that specific file and apply them to all HTML files that call the function.

No WordPress site is immune to the “jQuery is not defined” error. However, we can take steps to fix this issue as explained above:

  • Add the absolute path to the wp-config.php file.
  • Include Google-hosted jQuery with an alternative fallback.
  • Manually add the jQuery library to the theme’s header.php file.
  • Ensure jQuery is loaded correctly.

We hope this article helps you resolve jQuery errors in WordPress. Good luck!

That concludes the article on How to Plan and Build a Successful Website shared by Mangcoding. Hopefully, this article is useful and provides new knowledge. If you have constructive feedback or suggestions, feel free to comment or send them via Email or Mangcoding’s Social Media.

Source : 4 Effective Ways to Fix jQuery Code Errors in WordPress

Link Copied to Clipboard