I’m building a WordPress theme which will soon need jQuery UI (just core and effects, no CSS included) (http://hildasjcr.org.uk). I’m using my own builds of both jQuery and jQuery UI, because I need to use jQuery Effects and I like the “$” notation. I’ve included the scripts in functions.php like this:
function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . "/js/jquery-1.7.2.min.js");
wp_enqueue_script( 'jquery' );
wp_deregister_script( 'jqueryui' );
wp_register_script( 'jqueryui', get_template_directory_uri() . "/js/jquery-ui-1.8.21.custom.min.js");
wp_enqueue_script( 'jqueryui' );
wp_register_script( 'footer', get_template_directory_uri() . "/js/footer.js");
wp_enqueue_script( 'footer' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
Which gives the following HTML Code (stripped to the relevant bits):
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Current Students</title>
<link rel="stylesheet" type="text/css" media="all" href="http://hildasjcr.org.uk/wp-content/themes/hildas/style.css" />
<script type='text/javascript' src='http://hildasjcr.org.uk/wp-content/themes/hildas/js/jquery-1.7.2.min.js?ver=3.3.2'></script>
<script type='text/javascript' src='http://hildasjcr.org.uk/wp-content/themes/hildas/js/jquery-ui-1.8.21.custom.min.js?ver=3.3.2'></script>
<script type='text/javascript' src='http://hildasjcr.org.uk/wp-content/themes/hildas/js/footer.js?ver=3.3.2'></script>
</head>
Unfortunately, jQuery UI appears to load but is not useable – jQuery runs fine, but jQuery UI functions are all undefined.
I can even see jQuery UI listed in the developer tools panel of Chrome, and read the code in there.
So, what’s gone wrong, and how do I fix it?
The issue was with HTML5 Boilerplate, which was the basis of the page. jQuery was included a second time in the footer, and the two instances of jQuery didn’t like each other.