Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

What is the point of the dependencies parameter when using wp_enqueue_script()?

For instance, when I do the following:

wp_enqueue_script(
    'jscripts',
    get_stylesheet_directory_uri() . "/scripts/jscripts.js",
    array('jquery-ui-datepicker'));

echo wp_script_is('jquery-ui-datepicker', 'queue')
    ? '<br>' . '[jquery-ui-datepicker] Script is enqueued' . '<br>'
    : '<br>' . '[jquery-ui-datepicker] Script not enqueued' . '<br>';

I get the output 'Script not enqueued' (and the function does not work properly). However, when I do this:

wp_enqueue_script(
    'jscripts',
    get_stylesheet_directory_uri() . "/scripts/jscripts.js");

wp_enqueue_script('jquery-ui-datepicker');

echo wp_script_is('jquery-ui-datepicker', 'queue')
    ? '<br>' . '[jquery-ui-datepicker] Script is enqueued' . '<br>'
    : '<br>' . '[jquery-ui-datepicker] Script not enqueued' . '<br>';

It works properly and it displays 'script is enqueued'.

Having read the documentation, it would seem like when you specify the handle of dependencies for a script that you are about to enqueue, it will enqueue those dependencies before enqueing it. But, this doesn't seem to be the case. How does this all work?

share|improve this question
1  
Did you somewhere wrap those efforts in a function and hook it to the proper hooks? –  kaiser Mar 20 '13 at 10:59
    
What I did was have a function called at the beginning of the template. I had considered doing it in the functions.php file and then doing add_action('wp_head', ...), but then wouldn't that mean that it would be enqueueing those scripts on EVERY page (even ones that don't use it?) –  William Mar 20 '13 at 12:58
    
See my answer and take a look at the Conditional Tags list. –  kaiser Mar 20 '13 at 13:10

2 Answers 2

Try this. You have to call wp_enqueue_script at the appropriate time, so that it can queue your scripts until the dependencies you specify are called -

add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts(){

    wp_enqueue_script(
        'jscripts',
        get_stylesheet_directory_uri() . "/scripts/jscripts.js",
        array('jquery-ui-datepicker'));

    echo wp_script_is('jquery-ui-datepicker', 'queue')
        ? '<br>' . '[jquery-ui-datepicker] Script is enqueued' . '<br>'
        : '<br>' . '[jquery-ui-datepicker] Script not enqueued' . '<br>';

}

This is assuming your scripts are to be called on the front end. Substitute wp_enqueue_scripts with admin_enqueue_scripts if it is for the admin area (for a plugin, for example).

share|improve this answer
    
But then wouldn't this enqueue the jquery-ui-datepicker whenever I enqueued ANY script? (even one that is not related to it)? –  William Mar 20 '13 at 13:01
    
No, only when you enqueue get_stylesheet_directory_uri() . "/scripts/jscripts.js". You add other scripts using wp_enqueue_scripts('my-script', 'script-url/my-script.js');. That way, WP will enqueue it as soon as it sees it, as there are no dependencies for that script. –  David Gard Mar 20 '13 at 13:38
    
Just a thought - if you are meaning it will enqueue jquery-ui-datepicker because the function enqueue_my_scripts() will always be called, then yes it will. To avoid this, you can within the function to ensure that you want that script (i.e. check the page ID). –  David Gard Mar 20 '13 at 13:41

Please use the files & hooks that are meant to be used:

  • wp_enqueue_scripts public/templates/themes
  • admin_enqueue_scripts Admin UI
  • login_enqueue_scripts

Then wrap everything in a function and hook it from your functions.php file:

add_action( 'wp_enqueue_scripts', 'wpse91592_enqueue_scripts' );
function wpse91592_enqueue_scripts()
{
    wp_register_script(
         'custom_script'
        ,get_stylesheet_directory_uri()."/js/custom_script.js"
        ,array( 'jquery', 'jquery-ui-datepicker' )
         // This argument uses the last update time as version number
         // to prevent browser caching in case of an update
        ,filemtime( get_stylesheet_directory()."/js/custom_script.js" )
         // Now we load it in the footer to not mess up loading times
        ,true
    );

    // The script is registered.
    // Now we're taking "conditional tags" to only load it when we need it
    if (
        is_front_page()
        OR is_archive()
        OR ...
    ) 
        wp_enqueue_script( 'custom_script' );
}
share|improve this answer
    
but my question is - what is the point of the argument "array('jquery', 'jquery-ui-datepicker')"? It would appear that it works whether I specify this argument or not. –  William Mar 21 '13 at 15:23
    
It works in the case that you already loaded jquery up front. If you wouldn't have done it, then it wouldn't load. This is the dependencies array that tells wordpress what needs to be loaded before this plugin/file can be loaded. So it does two things: (1) Define a loading order and (2) load the files in case they aren't loaded or enqueued. –  kaiser Mar 21 '13 at 15:28
    
When you say 'load' do you mean registered? So what you are saying is that if I register item1 and item2 and then on the next line I enqueue item2 specifying that it depends on item1, it will then automatically enqueue item 1 before enqueuing item2? –  William Mar 21 '13 at 16:37
    
@William Exactly! You got it :) –  kaiser Mar 21 '13 at 16:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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