using wp_enqueue_script to attach jquery-ui

Question

I am trying to load jquery-ui using wp_enqueue_script. I can check that jquery is loaded. jquery-ui is registered i.e. output of var_dump( wp_script_is( 'jquery-ui-tabs', 'registered' ) ); is bool(true) which indicates it is registered but it does not get included to the page.

I am using wordpress version 3.3.1

What is going wrong?

I am attaching the relavant snippet from functions.php from my theme.

<?php
function my_scripts_method() {
  wp_register_script('jquery');
  wp_register_script('jquery-ui-core');
  wp_register_script('jquery-ui-tabs');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Answer 1

Here's an alternative way to load a popular script like jquery-ui (using google api's)

<?php  
// first, check to see if jquery-ui is already loaded 
if( !wp_script_is('jquery-ui') ) { 
        // you don't have to use googleapi's, but I think it helps. It saves the user's browser from loading the same script again if it has already been loade>
    wp_enqueue_script( 'jquery-ui' , 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' );
}   
?>  

*If you are still having problems, try using the full path to the "siteroot", which is usually the directory you will find the wp-content folder in. So to load jquery-ui locally from your theme folder if it's not connecting, try something like:

    <?php  
// first, check to see if jquery-ui is already loaded 
if( !wp_script_is('jquery-ui') ) { 
    wp_enqueue_script( 'jquery-ui' , '/home/<myusername>/<mysite.com>/wp-content/themes/<mycustomthemename>/js/jquery-ui.min.js' );
}   
?>  

This only works if you have the file in that folder and inside of a js folder you created inside the theme. This is inadvisable if you need to change sites to a different url - but you will just have to update the folder if you do so.

Answer 2

I think you're looking for wp_enqueue_script, and not wp_register_script.

If the script comes with WordPress

 wp_enqueue_script( 'jquery-ui' );

Answer 3

You should register new scripts with the following method:

wp_register_script('jquery-ui', get_template_directory_uri().'/js/jquery-ui.js');

Currently your letting WordPress know of a new script with no source, you need to link to your source, too.

Also, after registering the script, in order to use it in your theme, you need to enqueue it:

wp_enqueue_script('jquery-ui');

Do that after the wp_register lines.

Answer 4

jQuery and jQuery-ui are already registered with WordPress. You need enqueue them to load them on the page. But you are using 'wp_register_script()' instead of 'wp_enqueue_script()' within your 'my_scripts_method()' function.

Please use the code below:

function my_scripts_method() {
  wp_enqueue_script('jquery');
  wp_enqueue_script('jquery-ui-core');
  wp_enqueue_script('jquery-ui-tabs');
}
add_action('wp_enqueue_scripts', 'my_scripts_method'); 

Note: you may want to load them conditionally by using 'wp_script_is()'. Example:

if( !wp_script_is('jquery-ui-tabs') ) {     
  wp_enqueue_script('jquery-ui-tabs');
}