Diagnosis

jQuery version incorrect

343

UberMenu 3.0 requires jQuery 1.11.1 or higher (but less than jQuery v2), which should automatically be included with WordPress 3.9 or higher. If your theme or another plugin has changed the jQuery version, that can cause javascript errors that can break the menu as well as other javascript component on your site.

Background

Every version of WordPress comes packaged with a version of jQuery. Because WordPress is a modular framework, and resources like jQuery are shared between all plugins and themes, all plugins and themes need to assume that the default version of jQuery for a particular version of WordPress is present.

It is possible to programmatically change the version of jQuery used, however no theme or plugin should ever change the version of jQuery from the version packaged in WordPress Core. Only the site administrator/developer should ever change the version of jQuery – and in that case, it becomes their responsibility to ensure all plugins and themes they use are compatible. See Why loading your own jQuery is irresponsible

For example, WordPress 4.0 is packaged with jQuery 1.11.1. If the theme enqueues jQuery 1.6 instead, this creates major conflicts.

The Problem

Newer versions of jQuery include functions not available in older versions. If your theme or another plugin loads an older version of jQuery, UberMenu’s javascript will throw an error when those functions are called, breaking the menu functionality.

Identifying the issue

Check your javascript console. The most common problem will be an error related to off() not being a function (this is a new function in jQuery 1.7).

If you see a javascript error in the console, check your page source (View Source). Check your script tags to locate your jQuery library – I like to search for the string “jquery” with CTRL+F.

In UberMenu 3, you can also use the UberMenu Diagnostics functionality to test for this.

Here are some common incorrect scripts:

<script type='text/javascript' src='http://mysite.com/wp-content/themes/mytheme/jquery.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>

And here is what the default, correct inclusion would look like

<script type='text/javascript' src='http://mysite.com/wp-includes/js/jquery/jquery.js'></script>

Look at the URL, or open the jQuery file itself and check the header to determine the version.

Here’s a table of appropriate versions of jQuery for each version of WordPress:

WordPress VersionjQuery Version
4.11.11.1
4.01.11.1
3.91.11.0
3.81.10.2
3.71.10.2
3.61.10.2
3.51.8.2
3.41.7.2
3.31.7.1
3.21.6.1
3.11.4.4
3.01.4.2
2.91.3.2

(Note that UberMenu 3.0 requires WordPress 3.9+ and jQuery 1.11.1+)

If your version of jQuery is less than 1.11.1, either:

1. You are using WordPress < 3.9, in which case you need to upgrade (WordPress 3.9+ is an UberMenu requirement). 2. Your theme or another plugin is loading an incorrect version of jQuery. You also may have multiple versions of jQuery loaded - for instance, if a plugin/theme didn't deregister the default jQuery library before loading their own, or if jQuery was inserted through any method other than the proper wp_enqueue_script. Having a duplicate version of jQuery loaded can cause major issues; unless you are 100% sure of what you’re doing, you should only load one version (make sure it’s the right one!)

The Solution

You need to make sure the version of jQuery being used in your site is the proper version. As of WordPress 3.4, that version is jQuery 1.7.2. You will need to remove any improper versions of jQuery.

While this will vary widely from theme to theme, here’s what you should look for in your theme (a good place to start is the functions.php file, but a global search is often very useful) or plugin files.

What to look for

A common pattern is to dequeue the version of jQuery included with WordPress, and load the Google CDN version instead. This works nicely for the current version, but when you upgrade WordPress and the theme isn’t upgraded, you’re now loading an old version.

Look for these functions:

wp_dequeue_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
wp_enqueue_script( 'jquery' );

If you’ve found multiple versions of jQuery in your site source, either the theme/plugin enqueued the jQuery library using a different tag than ‘jquery’, or they dumped it into the header without enqueuing properly. The easiest way to find these is to do a global search on the path/URL to the script that you found in the source.

Once you find the problem, remove or comment out the code. You may wish to alert the developer of the theme/plugin, so they can update their code to use WordPress best practices. All that is required to use jQuery is to call:

wp_enqueue_script( 'jquery' );

with the appropriate action hook. More information can be found here: wp_enqueue_script.

See also this article > Overriding Default Libraries and Using Content Delivery Networks

It’s important to note that this should only be done on plugins or themes used on sites that you will be personally maintaining. Any plugins or themes that you release for public use should use the libraries included with WordPress.