Most elegant way to enqueue scripts in function.php with foreach loop

Question

I wonder is there a way of running wp_register_script and enqueue with the help of foreach loop to manage label and dir?

For example,

function wbs_app_components(){
$scripts_list=array(
            'jquery' => ToDir('/jquery/jquery.js', $LIBRARY_DIR),
            'bootstrap-jquery' => ToDir('/bootstrap/js/bootstrap.js', $LIBRARY_DIR),
    }
foreach ($scripts_list as $key => $value){
            // print_r($key);echo ("<br>");
            // print_r($value);echo ("<br><br><br>");
            wp_register_script($key,$value);
        }
}

add_action( 'wp_enqueue_scripts', 'wbs_app_components');

However, funny thing is that seems NONE of the script are attached and no error reported!

I wonder what could be the reason

Answer 1

You need to enqueue the scripts as well, not only register them. You can, however, just simply enqueue a script without registering it if you are not going to enqueue it conditionally.

I would try something like this: (Untested and requires PHP5.4+)

add_action( 'wp_enqueue_scripts', enqueue_scripts, 11 );
function enqueue_scripts()
{
    /**
     * Build an array of scripts to enqueue
     * key = script handle
     * value = path to the script without the get_template_directory_uri()
     */
    $scripts = [
        'script-1' => '/script.1.js',
        'script-2' => '/js/script.2.js',
        'script-3' => '/subfolder/script.3.js',
    ];
    foreach ( $scripts as $k=>$v )
        wp_enqueue_script( $k, get_template_directory_uri() . $v );
}

EDIT

As explanation to a comment to the answer, the add_action() call can go anywhere, it does not even needto be in the same template. It can go above or below the function declaration. I prefer to add the add_action() call above the function as this just makes more sense when you think about closures. When using closures, the code above will look something like this:

add_action( 'wp_enqueue_scripts', function ()
{
    /**
     * Build an array of scripts to enqueue
     * key = script handle
     * value = path to the script without the get_template_directory_uri()
     */
    $scripts = [
        'script-1' => '/script.1.js',
        'script-2' => '/js/script.2.js',
        'script-3' => '/subfolder/script.3.js',
    ];
    foreach ( $scripts as $k=>$v )
        wp_enqueue_script( $k, get_template_directory_uri() . $v );
}, 11 );

So you see, it just makes more sense :-)

Answer 2

If you want to enqueue your files separately use this code and still be able to register them(probably you want to use it after wards as well) then use this:

$template_directory = get_template_directory_uri();
$array_of_js_files = array( 
    array(
        'script_handle1',
        $template_directory . '/your_directory/file1.js',
        array(), //any dependency your script has
        '1.0.0', // version number 1.0.0 is an example
        true // in footer or not
    ),
    array(
        'script_handle2',
        $template_directory . '/your_directory/file2.js',
        array(),
        '1.0.0',
        true
    )
);

$array_of_css_files = array( 
    array(
        'css_handle1',
        $template_directory . '/your_directory/file1.css',
        array(), //any dependency your css file has
        '1.0.0', // version number 1.0.0 is an example
        'screen' // media
    ),
    array(
        'css_handle2',
        $template_directory . '/your_directory/file2.css',
        array(),
        '1.0.0',
        'screen'
    )
);


foreach( $array_of_js_files as $data ){
    wp_register_script( $data[0], $data[1], $data[2], $data[3], $data[4] );
    wp_enqueue_script( $data[0] );
}

// to enqueue your script or css file later simply refer to your the handle you created

foreach( $array_of_css_files as $data ){
    wp_register_style( $data[0], $data[1], $data[2], $data[3], $data[4] );
    wp_enqueue_style( $data[0] );
}

Note that this above code is untested but it should work.