Adding dependencies to script enqueing

2 Views

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

For instance, when I do the following:

Read More
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?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. 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).

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