The WordPress Codex article on how to create a WP child theme has lately added a sweeping short observation about how to include the parent theme’s stylesheet into the child theme.

Being sweeping and short could bring with it unclarity and mysteriousness in its wake. What I’m going to discuss here is just a case in point. Here’s what this is all about.

The Codex On How To Create A Child Theme
The Codex dedicates a thorough article on what a child theme is, how to create one, and why you should create one.

The how is illustrated in the following bit of code, which takes Twenty Fourteen as the parent theme.

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/

@import url(“../twentyfourteen/style.css”);

/* =Theme customization starts here
————————————————————– */
When it comes to explain the code above in relation to the @import directive, the article uses the following explanation:

…in the @import url line, twentyfourteen should be replaced with the name of your parent theme if you wish to import the parent’s stylesheet, and you’re using a theme that does not use wp_enqueue_style() in its functions.php file.

I must say that the comment above leaves me a bit baffled. Is using the @import method correct? Is there an alternative? Is the alternative better? But, most importantly, what is the alternative?

Just from the hint contained in the quote from the Codex article, it would seem to involve the wp_enqueue_style() WordPress function. But, in what way?

Given how child themes are such a crucial part of WordPress theme customization, it was time for me to do a bit of online research on this topic.

Here’s what I’ve found out.

The Alternative To @import In Child Themes
The suggested alternative to using the familiar @import directive in the child theme’s style.css file is to use the wp_enqueue_style() function inside functions.php in the child theme.

This method is proposed and defended by Konstantin Kovshenin in his article An Alternative to @import in WordPress Child Themes.

Here’s the sample code that illustrates this technique (use this code inside functions.php in your child theme).

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

function my_child_theme_scripts() {
wp_enqueue_style( ‘parent-theme-css’, get_template_directory_uri() . ‘/style.css’ );
}
By writing this code inside functions.php in your child theme, you can now have the parent theme’s styles at your disposal in the child theme without having to use the @import directive in the child theme’s style.css file (therefore you can cheerfully delete it).

You can then enqueue your child theme’s stylesheet below the parent theme’s stylesheet inside the same function, so that your CSS rules will also be applied to the child theme and override those of the parent when needed.

Why Does wp_enqueue_style Work?
As Konstantin explains, this technique works because

…the child theme’s functions.php is loaded before the parent theme’s. Unless, of course, the parent theme uses a different action priority, in which case we should just match it.

This simply means that we can rest assured that the parent theme’s stylesheet is added into the web page before the child theme’s stylesheet, therefore the latter overrides the former, as it should be.

A case when this might not happen is when the enqueue function used in the parent theme is hooked to a lower action priority number. An action priority number is one of the arguments inside the add_action() function . Here’s an example from the Codex article:

function echo_comment_id( $comment_id ) {
echo ‘Comment ID ‘ . $comment_id . ‘ could not be found’;
}

add_action( ‘comment_id_not_found’, ‘echo_comment_id’, 10, 1 );
According to the code above, when the comment_id_not_found action fires, the function called echo_comment_id handles it by … well, adding a message saying that the specific comment ID could not be found.

The action priority in the echo_comment_id function is ten. In the Codex article’s words, the action priority number, which is an integer number, is…

Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.

If you’re using a parent theme where such an action priority number is present in the add_action function that enqueues the stylesheets, then you simply add the same number in your add_action function in the child theme, and you should be fine.

Why Is Enqueueing Better Than @Importing?
Using the @import directive inside the child theme’s CSS document is not wrong. Actually, it’s very simple and less daunting to newbies who are just starting out customizing their WordPress themes. Possibly, this is the main reason why this technique is still prominent in the Codex article on child themes creation.

Having to deal with CSS alone, therefore not having to bother with PHP code and the concept of action hooks, is perhaps the easiest approach to get new WordPress users to create a child theme for their customizations.

What are we gaining by enqueuing then? As it happens, it’s page loading speed. Modern browsers should load all CSS documents in parallel. However, this doesn’t happen when @import is involved. Konstantin, quoting Google, explains:

The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.

Konstantin continues…

Which means that instead of 200ms, with @import it’ll take the web browser approximately 400ms to load both stylesheets.

What? That’s double the time! We should all know by now how important page load speed is to the success of a website, both for web visitors and Google ranking. Therefore, hopping on board of Konstantin’s suggested technique of adding the parent theme’s stylesheet to the child theme is a no-brainer for me. It also means, of course, that one never stops learning to be a better WordPress developer.

To Sum Up
In this post, I’ve discussed Konstantin Kovshenin’s suggested method of including the parent theme’s stylesheet into the child theme. This new technique involves using the wp_enqueue_style() function and the wp_enqueue_scripts() action hook to be used inside the child theme’s functions.php document.

I’ve illustrated how it works and why it’s better than using the @import directive inside the child theme’s stylesheet.

Even this small improvement on how to perform a simple but important task like creating a child theme, goes to show the strength and robustness of a software platform like WordPress. It’s the strength of being based on the steadfast work and cooperation of a dedicated community of developers and users all over the world. I hope it stays that way for a long long time to come.

How do you go about creating a child theme? Have you considered dropping @import? I’d love to hear all about it in the comments below.

Leave a comment

Your email address will not be published.