1

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

  • No need to enqueue jQuery like you are doing. Simply use this code: wp_enqueue_script('jquery'); This is because jQuery ships with every WordPress copy. – MMK Jul 28 '15 at 12:09
  • @MMK thanks! this is just a quick example, there are many other js I load actually :) – Ezeewei Jul 28 '15 at 12:14
5

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 :-)

| improve this answer | |
  • This is the correct answer. Always enqueue after registering. – Hendrik Luehrsen Jul 28 '15 at 13:00
  • @Pieter Goosen Ah, interesting, but I did do that add_action in the bottom though... does that mean add_action should be running before it? This is what I have at the end of function wbs_app_components(){ its add_action( 'wp_enqueue_scripts', 'wbs_app_components'); – Ezeewei Jul 28 '15 at 13:30
  • add_action() can go any place, it does not matter. With closures, it is just easier to do it at the top. :-) – Pieter Goosen Jul 28 '15 at 14:25
  • Also see my edit above :-) – Pieter Goosen Jul 28 '15 at 14:36
  • My pleasure. Enjoy :-) – Pieter Goosen Jul 28 '15 at 15:09
0

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.

| improve this answer | |

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.