24

Currently I'm working on a theme, and did some styles and scripts enqueue. When enqueued the scripts, I used wp_register_script() first, and then enqueued with wp_enqueue_script() - because I got that's the proper way of enqueuing the scripts. But in enqueuing the styles, I used only the wp_enqueue_style() with all its parameters. But just now I got an answer from s_ha_dum saying that using the wp_register_style() would make theme child theme-friendly - I wonder, without the wp_register_style() I's using only the wp_enqueue_style() and my theme's working fine with the enqueued styles. I enqueued them like:

add_action( 'wp_enqueue_scripts', 'wpse20131025_styles' );

function wpse20131025_styles(){

    wp_enqueue_style( 'site-styles', get_template_directory_uri() . '/style.css', '', '', 'screen' );
    wp_enqueue_style( 'menu-styles', get_template_directory_uri() . '/css/menu.css', '', '', 'screen and (min-device-width: 800px)' );
    wp_enqueue_style( 'mobile-menu-styles', get_template_directory_uri() . '/css/mobile-menu.css', '', '', 'screen and (max-device-width: 799px)' );

}

While the wp_enqueue_style() has all the parameters that present in wp_register_style() ($handle, $src, $deps, $ver, $media) then why should I repeat them? Or, what exactly the purpose of wp_register_style() other than wp_enqueue_style()?

0

1 Answer 1

41

First of all let's say that regarding these functions what is valid for styles is exactly valid for scripts, but there are some exceptions to the contrary explained in the answer.

Main difference between wp_enqueue_* and respective wp_register_* functions, is that the first adds scripts/styles to the queue, the second prepares scripts/styles to be added.

You probably already know that, but there is a second difference; wp_register_* can be used in every hook, even in an early hook like init, but wp_enqueue_* should be used on wp_enqueue_scripts hook (or admin_enqueue_scripts for backend) 1.

The typical scenario of using both functions is when you want to register scripts/styles on theme init, and then enqueue them conditionally on some pages, e.g.

add_action('init', 'my_register_styles');

function my_register_styles() {
    wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
    wp_register_style( 'style2', get_template_directory_uri() . '/style2.css' );
    wp_register_style( 'style3', get_template_directory_uri() . '/style3.css' );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

function my_enqueue_styles() {
    if ( is_front_page() ) {
        wp_enqueue_style( 'style3' );
    } elseif ( is_page_template( 'special.php' ) ) {
        wp_enqueue_style( 'style1' );
        wp_enqueue_style( 'style2' );
    } else {
        wp_enqueue_style( 'style1' );
    }
}

In this way the conditional enqueuing is more readable and less verbose.

In addition, if you want to enqueue one or more of the registered styles/scripts also in the backend, you can use the registered handle in a function hooking admin_enqueue_scripts without having to pass all params again.

Sure this is more useful for scripts, because of wp_localize_script that in previous scenario can be called once, after script registration, and then on conditional enqueuing just enqueue the script, even if it is used more than once: this keeps code simpler and DRY.

When you register a script/style and immediately after you enqueue it, it's just an unnecessary task, that actually can be completely avoided:

wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
wp_enqueue_style( 'style1' );

There's no advantage to enqueuing a style (or script) in like this, just use wp_enqueue_style with all params of wp_enqueue_style and you are done.

Previous sentence is also true regarding the child theme friendship. To overwrite a style in the child theme, when the parent is using wp_register_style immediately followed by wp_enqueue_style, you have to de-register the style and register again with another URL. If the parent is only using wp_enqueue_style, in the child theme you can use wp_dequeue_style and enqueue the new style, so in the child theme you need 2 lines of code in both cases.

However, what is very child theme friendly is to wrap the functions that enqueue and/or register styles and scripts in a if ( ! function_exists( ... in this way child theme can overwrite parent theme styles and scripts all in one place:

if ( ! function_exists( 'my_register_styles' ) ) {
    function my_register_styles() {
        wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
        wp_register_style( 'style2', get_template_directory_uri() . '/style2.css' );
        wp_register_style( 'style3', get_template_directory_uri() . '/style3.css' );
    }
}

if ( ! function_exists( 'my_enqueue_styles ') ) {
    function my_enqueue_styles() {
        if ( is_front_page() ) {
            wp_enqueue_style( 'style3' );
        } elseif ( is_page_template( 'special.php' ) ) {
            wp_enqueue_style( 'style1' );
            wp_enqueue_style( 'style2' );
        } else {
            wp_enqueue_style( 'style1' );
        }
    }
}

Now in the child theme it's possible to write another my_register_styles and/or my_enqueue_styles function and change all styles (if needed, of course) without having to deregister/dequeue styles one by one.


1 Here's another difference from scripts and styles: wp_enqueue_script can be used in the body of a page (typical use is in a shortcode) and the script will be put in the footer.

4
  • Excellent G.M. nice inner-reviewed the matter so holistic. Kudos to your effort. :) Nov 25, 2013 at 11:38
  • Thanks @MayeenulIslam I started answering before toscho marked question as duplicate. Glad it was useful for you, so it probably will be so for others :)
    – gmazzap
    Nov 25, 2013 at 11:48
  • @gmazzap Incredibly useful, just searched for wp_register_style vs wp_enqueue_style and your reply helped me understand the matter thoroughly.
    – lowtechsun
    Nov 15, 2016 at 18:13
  • Great answer, thanks.
    – EmSixTeen
    Dec 2, 2020 at 18:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.