It’s Time To Change How You Set Up Your WordPress Child Theme

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.
Advertisements

11 thoughts on “It’s Time To Change How You Set Up Your WordPress Child Theme

  1. Hi Maria

    This is a great article you have written.. I does explain a lot however I am still confused.

    I am a newbie (albeit been working with wordpress for a while) and this subject confuses me greatly..

    I have some CSS that uses the @import directive and I would like to add it to the child theme functions.php.

    Should I be using a statement line like

    add_filter( ‘x_enqueue_ABC_stylesheet’, ‘__return_true’ );

    OR Should I be leaving things as is in functions .php where the stylesheet is loaded like

    function fonts_head_output() {

    ?>

    <?php

    }

    add_action( 'wp_head', 'fonts_head_output', 99999 );

    OR with the above code change the add_action directive to the add_filter (x-enqueue directive along with moving the CSS file to the parent themes folder??

    Your comments / suggestions would be appreciated..

    Kind Regards

    Rick M – Loft 109 Backpackers Hostel
    Tauranga

    New Zealand

    • Hi Rick,
      If you need to include a CSS document into your child theme via functions.php, enqueue it together with your other stylesheets and scripts. Something like this:

      function mytheme_styles() {
      //the parent theme's main CSS file
      wp_enqueue_style( 'mytheme-parent-styles', get_template_directory_uri() . '/style.css', array(), '0.1', 'all' );
      //a stylesheet inside the child theme
      wp_enqueue_style( 'mytheme-imported-styles', get_stylesheet_directory_uri() . '/css/somestylesheet.css', array(), '0.1', 'all' );
      //your theme's main stylesheet file
      wp_enqueue_style( 'mytheme-styles', get_stylesheet_uri() );
      }

      add_action( 'wp_enqueue_scripts', 'mytheme_styles' );

      If you have a stylesheet that imports another stylesheet using the @import directive, but you want to import it using functions.php, first delete the @import directive from the stylesheet, then enqueue the imported stylesheet inside functions.php using the method illustrated in the code snippet above.

      I hope I’ve understood your question correctly 🙂

  2. Hi Maria

    Wow, I do think you have explained well & I think I get it, however I think I have missed some info that might change things a little. I am using some fonts from MyFonts and the X Theme. I have been advised to add this code to the functions.php in the child theme directory which allows for the stylesheet to be added to the header of each page. My current Functions.php has the line

    // 01. Enqueue Parent Stylesheet
    // =============================================================================

    // add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ );

    I have been advised to add this code to the functions.php in the child theme directory which allows for the stylesheet to be added to the header of each page.

    // 2.1 Add MyFont Files
    // =============================================================================

    // function fonts_head_output() {

    // ?>
    //
    //

    // <?php

    // }

    // add_action( 'wp_head', 'fonts_head_output', 99999 );

    After I had posted my question I noticed the code had not been fully inserted (probably a safety thing with WordPress and php code. Will this make a difference in how I should code to remove the @import??

    I'm wanting to use best practise as I believe this @import is one of the issues that pagespeed is pinging me on.

    Many thanks

    Rick M – Loft 109 Backpackers Hostel
    Tauranga

    New Zealand

    • Hi Rick,
      The code you posted above shows that the parent theme you’re using has its own filter that allows you to import its stylesheet into the child theme from inside functions.php rather than style.css. Therefore, I think, based on what I see from where I stand, that should be enough to include the parent’s stylesheet without using the @import directive inside the child theme’s stylesheet, which you can safely delete or comment out.

      A suggestion: when you add code snippets to the editor, select the entire snippet and click the code button at the top of the editor. This will wrap your snippet with the code tag, which ensures that it’s displayed correctly on the web page.

      Cheers 🙂

      • Sorry, unfortunately it does not work for my particular theme. I was fooled by the cache. I really don’t have enough PHP skills to do it myself and theme developer wants me to pay for custom modification work. Mehh, might just have to concede this one and let @import reign supreme on this particular website.

  3. Most likely because I am trying to do it on a theme purchased from themeforest a few years ago. THe theme must have some custom stuff in it that is different from a default theme (e.g. Twenty Fourteen) Some more recent themes i have used don’t even use the @import command on child themes anymore and have properly used the wp_enque method.

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s