CODEWITHSUNDEEP
javascriptjqueryhtmlwordpressjquery-ui
TDN169
TDN169

Reputation: 1427

Wordpress - jQuery UI fails to load

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?

Upvotes: 0

Views: 1339

Answers (1)

TDN169
TDN169

Reputation: 1427

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.

Upvotes: 1

Related Questions