1

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?

Improve this question
3
  • 1
    Did you somewhere wrap those efforts in a function and hook it to the proper hooks?
    – kaiser
    Mar 20, 2013 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, 2013 at 12:58
  • See my answer and take a look at the Conditional Tags list.
    – kaiser
    Mar 20, 2013 at 13:10

2 Answers 2

Reset to default
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).

Improve this answer
3
  • 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, 2013 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, 2013 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, 2013 at 13:41
0

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' );
}
Improve this answer
4
  • 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, 2013 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, 2013 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, 2013 at 16:37
  • @William Exactly! You got it :)
    – kaiser
    Mar 21, 2013 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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