3

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');
?>

4 Answers 4

2

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.

1
  • Thanks. I was thinking of loading jduery from google cdn considering the time I've mucked around with trying loading jquery-ui . this seems good.
    – viyyer
    Jan 9, 2012 at 22:23
4

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' );
1
  • 1
    I have tried doing wp_enqueue_script() and still I don't see jquery-ui loading on any page at all.
    – viyyer
    Jan 9, 2012 at 21:49
0

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.

4
  • even for scripts which come installed with wordpress?
    – viyyer
    Jan 9, 2012 at 21:35
  • Scripts installed with WordPress (which is a gray area for me so apologies if I lack the knowledge) do not require wp_register_script as @Shane said, but just the wp_enqueue_script. If it does not load, it's either because it does not come with wordpress or you have no placed wp_head() in the header.php file.
    – Asko
    Jan 9, 2012 at 21:52
  • I can assure you that wp_head(); is present in header.php and I know that it is present in wp-includes/js/jquery directory. I think there is an general issue with loading jqueryui with wordpress 3.3+ . From some links posted on this forum It does seem a problem across the board. wordpress.stackexchange.com/questions/36503/… wordpress.stackexchange.com/questions/38102/… wordpress.stackexchange.com/questions/36503/…
    – viyyer
    Jan 9, 2012 at 22:00
  • If it is a bug, then your only solution is either to wp_register_script that file which is in the wp-includes folder or add the file to your theme and wp_register_script to there.
    – Asko
    Jan 9, 2012 at 22:08
0

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');
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.