jQuery is not defined error when caching [Solved]

Fixing the "jQuery is Not Defined" Error in WordPress When Caching is On

Encountering the "jQuery is not defined" error in WordPress can be frustrating, especially when caching plugins are enabled. This error often arises because caching plugins sometimes defer or asynchronously load JavaScript files, leading to jQuery loading later than scripts that depend on it. Fixing this issue requires ensuring that jQuery is loaded correctly and in the right order relative to other scripts. Here are several methods to address this problem effectively.

Ensure jQuery is Loaded in the Header

One common fix is to ensure that jQuery loads in the header instead of the footer. Many caching plugins have an option to defer JavaScript to the footer, which can cause jQuery to load after other scripts that depend on it. To force jQuery to load in the header, you can use the following code snippet in your theme’s functions.php file:

function load_jquery_in_header() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, NULL, false);
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'load_jquery_in_header');

Adjust Caching Plugin Settings

Caching plugins like WP Rocket or W3 Total Cache often provide settings to exclude specific scripts from being deferred or asynchronously loaded. Navigate to your caching plugin’s settings and look for options related to JavaScript optimization. Add jquery.js to the list of excluded scripts to ensure it loads properly before other scripts that rely on it.

Check for jQuery Dependency in Enqueued Scripts

When enqueuing custom scripts, it’s essential to declare their dependency on jQuery to ensure proper loading order. In your theme or plugin, make sure to enqueue scripts like this:

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Minify and Combine Scripts Carefully

While minifying and combining scripts can improve performance, it can also lead to loading order issues. If your caching plugin combines scripts, ensure that jquery.js is loaded first. This can usually be managed within the plugin’s settings. If the issue persists, consider disabling the minification and combination of scripts for troubleshooting.

Use a Local Copy of jQuery

Sometimes, relying on external CDN versions of jQuery can cause delays or loading issues. Use a local copy of jQuery by deregistering the external version and registering the local one. Here’s how to do it:

function use_local_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', false, '3.6.0', true);
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'use_local_jquery');

Check Theme and Plugin Compatibility

Some themes and plugins may not be fully compatible with your caching plugin’s settings. Disable all plugins and switch to a default theme (like Twenty Twenty-One) to see if the error persists. If the error is resolved, reactivate your plugins one by one to identify the conflicting one. Consult the plugin’s support or documentation for any known issues and fixes.

Summary

Fixing the "jQuery is not defined" error in WordPress when caching is enabled involves several steps, from adjusting caching plugin settings to ensuring proper script dependencies. By carefully configuring your site to load jQuery correctly, you can prevent this common error and ensure a smooth user experience. Each website may require a slightly different approach, so experimenting with these solutions can help identify the best fix for your specific setup.