wp_enqueue_scripts Action Hook:
WordPress provides various names (or place holders) that can be used to inject callback functions within WordPress core’s execution lifecycle. These are called action and filter hooks.
wp_enqueue_scripts is a WordPress action hook.
Note: It’s not
wp_enqueue_script, it’s plural:wp_enqueue_scripts.
With this hook, we add script or style on the correct time of WP core execution. It doesn’t add any style or script itself, it simply injects our custom callback function so that WordPress may execute it on the right time. So the CODE is like:
function custom_script_style_adding_function() {
// CODE for adding styles / scripts
}
add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' );
Functions for enqueuing scripts & styles:
Since generally we add both scripts and styles in HTML <head> tag, WordPress doesn’t need separate action hooks to define when to add them, however, as scripts and styles have different HTML syntax, WordPress needs separate functions to actually add them to HTML CODE. For scripts, the function is wp_enqueue_script() and for styles, the function is wp_enqueue_style() (notice the use of singular words in these function names).
So when we use these functions to add our scripts and styles, the final CODE becomes something like:
function custom_script_style_adding_function() {
wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' );
wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' );
Enqueue scripts & styles in separate functions:
Any hook can be used to attach multiple callback functions. So we may use the wp_enqueue_scripts action hook to attach different custom functions for adding scripts and styles as well, like below:
// this function only adds scripts
function custom_script_adding_function() {
wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' );
}
add_action( 'wp_enqueue_scripts', 'custom_script_adding_function' );
// this function only adds styles
function custom_style_adding_function() {
wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_style_adding_function' );
This is essentially the same thing, the only difference is, here we are using separate custom functions to add scripts and styles. So other than the separation of CODE for styles and scripts, there is not much difference between this approach and the other approach above.
Further Reading:
There are other script & style related functions in WordPress that are useful for different scenario. For example, check the Related functions in the codex to know about other similar functions for scripts and styles in WordPress. This developer doc. also have some useful information.