You are currently viewing How to Fix “WordPress Jquery is Not Defined” Error?

How to Fix “WordPress Jquery is Not Defined” Error?

Today, more than 80% of websites run on jQuery, if your wordpress website is one of them, you might encounter the “Uncaught ReferenceError: jQuery is not defined” error at some point. This error message indicates that your website can’t call a function from the jQuery JavaScript library. This may cause one or multiple website elements to stop running. Luckily there are multiple methods to fix this common issue. 

In this comprehensive tutorial, we will go through the methods to do so for WordPress users.

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

“jQuery is not defined” error in wordpress is a common error that occurs when a website calls for a jQuery function before the library loads properly but the jQuery.com JavaScript library is unavailable or isn’t functioning correctly. It is caused possibly due to conflicting plugins, a corrupted jQuery file, a blocked CDN, or your JavaScript code loads incorrectly.”

It can crash your wordpress website because of corrupted WordPress’s plugins or jQuery files, hosting issues, or CDN problems. Simply, your website can’t communicate with its library because of broken or conflicting code.

Main Reasons of the “jQuery Is Not Defined Error” in WordPress

“Uncaught ReferenceError jQuery is not defined” in WordPress is pretty common. Here are some key reasons of this problem:

  • Corrupted WP Themes or Plugins: If you recently installed a new wordpress theme or plugin, it could be conflicting with old plugins or you need to update them.
  • Errors with JavaScript or jQuery file: If you download a jQuery file from a potentially incompatible website, these types of errors can arise.
  • JavaScript Running Incorrectly: Your JavaScript file runs before the jQuery code is properly loaded, causing your website to call for functions that haven’t been defined yet.
  • Blocked CDN-hosted jQuery: If you are using a CDN(Content Delivery Network) hosted jQuery, it could be overloaded or temporarily out of action.
  • Poor Performing Host: If your host controls your jQuery, it could be underperforming. It can cause this error.

Negative Impacts of this Error

A “jQuery is Not Defined” error in WordPress can impose some negative effects on your website’s functionality and user experience:

  1. Broken Functionality: jQuery is an important JavaScript library used by many WordPress themes and plugins. If jQuery is loaded incorrectly, features that are based on it, such as sliders, forms, and interactive elements, may not work.
  2. Poor User Experience: When this error occurs, interactive elements fail to function, visitors may find the site difficult to navigate or use, leading to frustration.
  3. Increased Bounce Rate: If essential features on your website are broken, users are likely to leave the site quickly, increasing the bounce rate.
  4. Negative Impact on SEO and site credibility: user experience is so important for search engines. A high bounce rate and poor functionality can cause lower search engine rankings. A site that appears broken or unprofessional can damage your website’s or brand’s credibility and trustworthiness.
  5. Loss of Revenue: If your site faces this error e-commerce functionalities or call-to-action elements are disrupted and it can lead to a direct loss of sales or leads.

How To Fix the “Uncaught ReferenceError: jQuery Is Not Defined” WordPress Error

Before starting fixing the error, create a site backup if something goes wrong. Setting automated backups is recommended. Beyond this, we also recommend running any changes you make to your site through a staging environment. Don’t make any changes to your live website while troubleshooting. Finally, ensure you have access to an FTP or File Transfer Protocol client. This program helps you edit code behind the scenes, and you can get login details from your host.

Remember, if you don’t have the time to fix this error yourself or if you should just prefer expert support, you can skip ahead and contact Supportfly.

1. Check jQuery is Included

    • Firstly, check that your website code includes a jQuery library. WordPress typically installs this for you. Right-click anywhere on your web page and select “View Page Source” to open the source code.
    • Now find the code that makes up your page. From here, press CTRL+F on Windows or CMD+F keys on Mac to open a search bar.
    • Search for “jquery.min.js.” The phrase should appear in the code if your website has a library installed. If it doesn’t appear, check the Network tab of your browser’s dev tools to see if you notice any jQuery takes being loaded. In your root folder, typically in “public_html,” look for a folder called “wp-includes”.
    • Open “wp-includes” and then open the file named “script-loader.php.” Now in the source code, search for a line that starts with “wp_enqueue_script.” and after the word “script” in this phrase paste the below given bold lines-

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

    • In WordPress you can do this all using Plugin. You can add code to your site using this plugin without editing text files.

    Go back to your website and see if the problem is resolved.

    2. Check jQuery is loading correctly

      • Now, we need to check, jQuery file is loading as expected. To start, right-click anywhere on your web page and select “View Page Source.” and search for queries in the code that start with “<script src=” and include “jquery” in the same lines.
      • If you see lines in the code matching this description, it’s likely loading correctly. Now move to the next step if you can’t see any matches.
      Check jQuery is loading correctly

      3. Set up Google-hosted jQuery with an alternate fallback 

        A CDN, or Content Delivery Network, might be to blame for your jQuery woes. This is a series of networked servers that speed up WordPress but can sometimes cause functionality issues if it goes down unexpectedly. So, it’s worth setting up a Google-based jQuery you can fall back on now and in the future. To do this, you add the following code:

        // Fall back to a local copy of jQuery if the CDN fails

        <script>

        window.jQuery||document.write(‘<script src=”mysite.com/wp-content/themes/my_theme/js/query.min.js”><\script>’))

        </script>

        Save, and check your site once again.

        4. Add a snippet to wp-config.php File

        • Still, if the above given ways don’t work, you need to edit your website’s configurations. Look for the wp-config.php file in your root folder.
        Add a snippet to wp-config.php File
        • Right-click on the webpage anywhere and download the file to your preferred drive so you have a manual backup, and open the file in your root folder to begin editing.
        • Now, find the following line:

        /* That’s all, stop editing! Happy blogging. */

        Paste the following above that line:

        /** Absolute path to the WordPress directory. */

        if ( !defined(‘ABSPATH’) )

        define(‘ABSPATH’, dirname(__FILE__) . ‘/’);

        define(‘CONCATENATE_SCRIPTS’, false);

        You just defined the ABSPATH, which will help your website to recognize that jQuery is available. Save the file and try to reload your website.

        5. Manually add the jQuery Library to header.php

        • If step four didn’t resolve the error, try adding the jQuery library manually. Head to Google Hosted Libraries. Here, copy the code snippet for the latest version of jQuery from the link above, for example, the snippet listed under “3.x snippet.”:

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

        Manually add the jQuery Library to header.php
        • Now, find the marked folder “wp-content” in your root folder “public_html”, then go to the “Themes”,  then the folder marked with the name of the theme you’re using.
        • In this theme folder, you should see the header.php file. Right-click and save this to your usual drive, and open the version in FTP. Then, paste the snippet below the tag marked, save, and try to re-access your site.

        6. Alternatively, Contact Supportfly WordPress Experts

        We get it. Muddling around with code is a bit daunting, especially if you need to make changes to your theme’s functions.php file. So if you’re unsure about making potentially harmful changes to your site, it’s best to contact an expert. Contact Supportfly’s WordPress Experts, they will help you in making code changes and look deeper into issues such as jQuery errors.

        We provide premier WordPress Management, Consulting and Support services, and Solution Experts. With SupportFly, you get an expert team for WordPress Management service to boost your website performance. 

        Our WordPress management service involves ongoing management, optimization, and security measures to ensure smooth performance and exceptional user experiences. Our WordPress Management Service team provides a comprehensive solution to handle all aspects of your WordPress website, allowing you to focus on your core business while we take care of the technical intricacies.

        Conclusion

        Delaying the resolution of a “jQuery is Not Defined” error in WordPress can extend the time your visitors have to wait for your WordPress page to load. Fortunately, with some code editing, fixing the WordPress admin jQuery error is simpler than you might expect.

        However, we understand that many prefer to seek assistance from developers to resolve WordPress errors efficiently and that’s where we step in. When you sign up as a Supportfly partner, you get  24×7 support and WordPress site management.