How to add JavaScript file using wp_enqueue_scripts?

In WordPress you should enqueue your scripts (and styles) using the wp_enqueue_scripts action hook.

The main reason for this is to ensure that your script/style is only added once. You can, if you wish, aslo add conditions so that a script/style is only added to certain pages.

You say in your question that your script is located at js/file.js – presumabily this is within your Theme?

If so, try the code below (place it in functions.php), if not, please provide further details.

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

    wp_enqueue_script('my-custom-scripts', get_stylesheet_directory_uri().'/js/file.js');

}

Note that dispite the name, this action hook should also be used to enqueue your style sheets. For more information, please take some time to view the pages below –

• wp_enqueue_scripts action hook

  • wp_enqueue_script function

  • wp_enqueue_style function