How to load a WordPress theme style the right way

When building a WordPress theme, it is essential to include a style.css file in the root. It is customary to include core styling rules in this file too. What’s more important is how to load it into your templates. WordPress recommends the wp_enqueue_scripts hook and wp_enqueue_style() method and using these are great, but there is still some room for trouble.

Consider the following fragment for a theme MyTheme

add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style( 'MyTheme', get_stylesheet_uri() );
} );

Problems Lie Ahead

Now this works fine for a base theme, but what happens when I make a child theme called MyThemeChild? Because get_stylesheet_uri() implicitly uses the stylesheet URI, the child theme’s stylesheet will be loaded and assigned the MyTheme handle.

WordPress Crash Course
In a base theme the template URI and stylesheet URI are the same, but in a base/child theme the template URI refers to the base theme and the stylesheet URI refers to the child.

This is bad. The child theme’s stylesheet is now attached to the base theme’s style handle (a plugin may specifically be interested in the base theme’s stylesheet) and now the base theme’s stylesheet isn’t loaded. This means that the child theme is now responsible for loading the base theme’s stylesheet. This can be corrected with some work.

An Improved Approach

Continuing with the previous example, this could be added to the child theme’s functions.php file.

add_action( 'wp_enqueue_scripts', function() {
  wp_dequeue_style( 'MyTheme' );
  wp_deregister_style( 'MyTheme' );
  wp_register_style( 'MyTheme', get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'MyChildTheme', get_stylesheet_uri(), [ 'MyTheme' ] );
}, 11 ); // set to 11 to ensure being run after the base theme's hook which uses the default 10

Here we’ve restored the base theme’s stylesheet to its intended handle, and made it a dependency of our own child theme’s stylesheet. This is messy though; it’s pretty weird that the base theme loads the child theme’s stylesheet and the child theme loads the base theme’s stylesheet. and goes against the notion of child theme as an extension of the base theme.

An Ideal Setup

Let me show you a better way of how the base and child theme can load their respective styles to completely circumvent the issue backwards dependency issue.

/* Base Theme functions.php */
add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style( 'MyTheme', get_template_directory_uri() . '/style.css' );
} );

/* Child Theme functions.php */
add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style( 'MyChildTheme', get_stylesheet_uri(), [ 'MyTheme' ] );
} );

This is clean! There are no tangled concerns or necessary hook priority overrides to consider.

I used get_stylesheet_uri() in the child theme code. This implicitly uses the stylesheet URI but this is safe to do in a child theme. WordPress doesn’t support chained themes as of the time of this writing so it is reasonable to expect that the child theme will never itself be a base theme – the child theme will always be the intended target of the stylesheet URI.