Themes with jQuery or jQuery UI enqueue problem

Over past time, we have seen in our support forum that, many jQuery related problems arise because of wrong enqueuing. WordPress provides a nice API to correctly enqueue scripts and styles without leading into any kind of conflicts. But not all theme and/or plugin developers respect this and it results in conflict with almost all third-party plugins that use jQuery and/or jQuery UI.

What is wrong

• Changing jQuery or jQuery UI from local copy to Google CDN, like http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js.
• Hard coding jQuery or jQuery UI to the header.php or through wp_head hook.
  [html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>[/html]

Why is it wrong?

• WordPress has a set of default scripts and styles that is bundled with each new release.
• These bundled scripts are meant to be included whenever we are in need of the library.
• As plugin and theme developers, we and all good folks use WP’s bundled resources and give compatibility to specific versions (for eg, our eForm plugin, since it gives compatibility for both WP 3.5 and 3.6, has support for both jQuery UI 1.9 and 1.10).
• It also gives basic level of compatibility across different plugins and themes by loading the script/style only once no matter how many times it has been called.

Now when someone breaks the rule, it leads to the following inevitable side effects:

• Compatibility issues of many plugins and themes. When we are giving support for WP 3.6, we are expecting jQuery version 1.10.2 not a legacy 1.8.
• Conflict of multiple enqueues. We are calling the jQuery from WP’s own APIs, but some theme or plugin has hardcoded it inside a <script> tag. This would result in multiple enqueue of the same script of possibly different versions.
• Dependency conflict. WordPress 3.6 has jQuery 1.10.2 and the compatible jQuery UI version 1.10.3. If one of them has been changed by either of the methods, then it would lead to dependency problems.

How to Fix it

Fixing such issues is not simple if you are not familiar with codes and stuff. If you have paid for a theme, then contact the theme support first and show them this page. They should be able to solve this without much of a problem. Also, it is kind of guaranteed that none of the theme from WordPress repository will have any issues regarding this. Otherwise, please continue reading.

Reverting to default jQuery

Search the functions.php file or other similar files related to scripts and styles for this kind of code.

[php]
function modify_jquery() {
if ( !is_admin() ) {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’, false, ‘1.8.1’ );
wp_enqueue_script( ‘jquery’ );
}
}
add_action( ‘init’, ‘modify_jquery’ );
[/php]

Remove it completely and add this code instead.

[php]
function add_jquery() {
wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘add_jquery’ );
[/php]

Reverting to default jQuery UI

Search the functions.php file or other similar files related to scripts and style for this kind of code.

[php]
function add_jquery_ui() {
wp_enqueue_script(‘jquery-ui’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js’, false, ‘1.8.8’);
}
add_action( ‘init’, ‘add_jquery_ui’ );
[/php]

Remove it completely and add this code instead.

[php]
function add_jquery_ui() {
wp_enqueue_script( ‘jquery-ui-core’ );
wp_enqueue_script( ‘jquery-ui-widget’ );
wp_enqueue_script( ‘jquery-ui-mouse’ );
wp_enqueue_script( ‘jquery-ui-accordion’ );
wp_enqueue_script( ‘jquery-ui-autocomplete’ );
wp_enqueue_script( ‘jquery-ui-slider’ );
wp_enqueue_script( ‘jquery-ui-tabs’ );
wp_enqueue_script( ‘jquery-ui-sortable’ );
wp_enqueue_script( ‘jquery-ui-draggable’ );
wp_enqueue_script( ‘jquery-ui-droppable’ );
wp_enqueue_script( ‘jquery-ui-datepicker’ );
wp_enqueue_script( ‘jquery-ui-resize’ );
wp_enqueue_script( ‘jquery-ui-dialog’ );
wp_enqueue_script( ‘jquery-ui-button’ );
}
add_action( ‘wp_enqueue_scripts’, ‘add_jquery_ui’ );
[/php]

Removing hard coded jQuery

Search your theme’s header.php for code like this.

[html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>[/html]

Remove it and add this code to the functions.php file.

[php]
function add_jquery() {
wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘add_jquery’ );
[/php]

Removing hard coded jQuery UI

Search your theme’s header.php for code like this.

[html]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>[/html]

Remove it and add this code to the functions.php file.

[php]
function add_jquery_ui() {
wp_enqueue_script( ‘jquery-ui-core’ );
wp_enqueue_script( ‘jquery-ui-widget’ );
wp_enqueue_script( ‘jquery-ui-mouse’ );
wp_enqueue_script( ‘jquery-ui-accordion’ );
wp_enqueue_script( ‘jquery-ui-autocomplete’ );
wp_enqueue_script( ‘jquery-ui-slider’ );
wp_enqueue_script( ‘jquery-ui-tabs’ );
wp_enqueue_script( ‘jquery-ui-sortable’ );
wp_enqueue_script( ‘jquery-ui-draggable’ );
wp_enqueue_script( ‘jquery-ui-droppable’ );
wp_enqueue_script( ‘jquery-ui-datepicker’ );
wp_enqueue_script( ‘jquery-ui-resize’ );
wp_enqueue_script( ‘jquery-ui-dialog’ );
wp_enqueue_script( ‘jquery-ui-button’ );
}
add_action( ‘wp_enqueue_scripts’, ‘add_jquery_ui’ );
[/php]

Removing wp_head hook for hard coded scripts

Hard coded scripts can also be put by hooking into wp_head. If you do not find code for jQuery and/or jQuery UI in header.php, then you might want to search functions.php for codes like this…

[php]
function print_jquery() {
echo ‘<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>’;
echo ‘<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>’;
}
add_action( ‘wp_head’, ‘print_jquery’ );
[/php]

Simply remove them and add the corresponding jQuery and/or jQuery UI enqueue code to the functions.php.

Fixing other issues

Removing google CDN or hardcoded jQuery might also raise some issues with jQuery.noConflict(). If things happens to break in your theme, then search all .js files and all <script> tags and replace codes like this…

[js]
$(document).ready(function() {
// le code
});
[/js]

to this…

[js]
jQuery(document).ready(function($) {
// le code
});
[/js]

In theory, you’d need to replace $ with jQuery or provide a closure for jQuery object.

If the problem still persists, then feel free to contact our support.