@import Styles of a Child Theme via PHP

Using child themes in WordPress is a valid way to modify an existing theme, but the CSS @import directive is slow, so it's worth avoiding.

It takes 200ms to load the child theme's style file and 200ms to load the parent theme's CSS. And this sequence is unchanging. And modern browsers should take about 200ms to load both files, due to the presence of parallel loading, but for that both files should start loading at the same time. However, due to the nested calling of one to the other this can never happen...

Read also: More about Child Themes.

Excerpt from Google:

The browser must load, parse and execute first.css before it detects that second.css needs to be loaded as well

This means that using @import instead of 200ms the browser will always take 400ms to load both files.

Here is a typical style.css of a child theme:

/**
 * Theme Name: My Child Theme
 * Template: parent-theme
 */
@import url(../parent-theme/style.css);

/* CSS Child theme styles */
.foo{
	// styles
}

@import! via PHP

You can disable the use of @import through the features of the theme functions.php file and the wp_enqueue_style() function:

// Faster than @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

function my_child_theme_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

To understand how this works, let's look at loading sequence and connecting styles:

  1. First, the functions.php of the child theme is connected. In it, we queue the style.css of the parent theme.

  2. Then connect functions.php of the parent theme. In it we queue style.css of child theme.

As a result, the HTML code of the page will include styles in the right order:

<link rel='stylesheet' id='parent-theme-css'  href='http://example.com/wp-content/themes/parent-theme/style.css' type='text/css' />
<link rel='stylesheet' id='child-theme-css'  href='http://example.com/wp-content/themes/child-theme/style.css' type='text/css' />

I.e. there is no need to take into account the dependence of child theme styles on parent theme - the necessary order will be achieved automatically.

Done!

If a child theme's stylesheet doesn't come automatically from the parent theme

This means that the parent theme is not written correctly and you should think about changing the theme. But if changing the theme is not an option, you can try to connect the child theme styles in the child functions.php, taking into account the dependence of the parent styles.

To do this, open the functions.php file of the parent theme and find where the styles file is connected. Most likely, the theme connects this file without considering the child theme, i.e. the theme does not support child themes, i.e. does not use get_stylesheet_uri(), but uses get_template_directory_uri(), like this

wp_enqueue_style( 'mytheme-style', get_template_directory_uri() .'/style.css' );

We need to specify the ID of mytheme-style as a dependency when we connect a child style file. So child styles file will depend on mytheme-style and will be include only after parent mytheme-style file is included.

So, in the child theme functions.php file you should use the following code:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles(){

	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', ['mytheme-style'] );
}

As a result, the HTML will include the styles in the right order.

Dependencies on other theme files

For example, in parent theme file of zeroing (resetting) styles - normalize.css is connected separately, and it should be connected at the very beginning, before other styles. This dependency must be preserved.

Let's say we have the following code in parent theme functions.php:

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

function my_theme_scripts() {

	// reset styles, to basic styles
	wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );

	// theme styles (child or current)
	wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}

Now, if we plug in the styles of the parent theme in the child theme:

// Faster than @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

function my_child_theme_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Then we get the following order in HTML:

  1. parent-style
  2. normalize
  3. child-style

But we need:

  1. normalize
  2. parent-style
  3. child-style

You can fix this by specifying a dependency when connecting parent-style in a child theme. The dependency must be specified on the ID normalize. That is, in the child theme we need to include the styles of the parent theme:

// like this
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', ['normalize'] );

// not like this
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

The result is that immediately after normalize.css the parent theme's styles will be connected, and then the child's styles. Just what you need!

The same dependency can be specified for fonts and other css styles that should be connected before the main styles.