2

I am new to WordPress. I have started creating my own custom theme. When I am creating it, I have found that add_action('wp_enqueue_script', 'custom_script'); can be used to add styles as well.

Can anyone explain me the difference between the uses of wp_enqueue_style and wp_enqueue_script to load styles and scripts?

6

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.

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.