It´s been more than two years already since Konstantin Kovshenin published his post An Alternative to @import in WordPress Child Themes. On it, Konstantin pointed out that using the CSS @import directive to import the parent theme stylesheet from the child theme style.css will double the time needed for the stylesheets to load, and showed us a better way to do it by enqueuing the parent theme stylesheet from our child theme’s functions.php file (more about it in a moment).

I´ve been using the enqueuing alternative myself for quite a long time now. For instance, my Divi Children plugin stopped using the @import directive since the 2.0.8 update, more than a year and a half ago.

But then I realized I had not posted about this on the WPTD Blog yet, and that some posts of my Child Themes Tutorials series were out of date because of it.

Actually, the old method of importing the parent theme stylesheet by using @import is no longer considered best practice as reflected on the WordPress Codex (although at the moment of publishing this post it still appears in some WordPress documentation, as in the case of the Theme Handbook for instance).

Better late than never, so I didn´t want to finish this year without talking about the right way to include the parent theme styles in child themes.

The problem with @import

Even though modern browsers can load assets in parallel, the mere fact that @import is used within the child theme´s stylesheet means that this stylesheet needs to be loaded before the browser even knows that it still needs to download yet one more stylesheet (the parent theme´s style.css called by the @import directive).

This is the way we used to do it, importing the parent stylesheet by means of @import within the child theme´s style.css:

See what I mean? On top of the time it takes the browser to download the child theme´s stylesheet we have to add the time to download the parent stylesheet, because this new download process won´t even start before the child theme´s stylesheet has been loaded and parsed, which makes the whole process much slower than it should be.

The right way to do it

The right way of enqueuing the parent theme stylesheet is to forget about the @import method and to use the wp_enqueue_style() WordPress function in your child theme’s functions.php (which means that, in case you still don´t have a functions.php file in your child theme´s directory, you´ll need to create one).

The function should be added by using the wp_enqueue_scripts hook (which, despite its name, is used for enqueuing both scripts and styles).

So, for an existing child theme that used the old method, all you´ll need to do is:

• Delete the @import line from your child theme´s style.css file.
• Create a functions.php file in your child theme´s directory (if you don´t have one yet).
• Add the following code to your child theme´s functions.php file:

When a child theme is being used, the get_template_directory_uri() function returns the absolute path to the parent theme directory, so a correctly hooked line like the one using wp_enqueue_style() in the code above is all we need.

• About
• Latest Posts

Luis Alejandre

Luis is the creator of the WPThemeDetector tool and the chief editor of this blog. You can read more about Luis in our About page.

Latest posts by Luis Alejandre (see all)

• All Top Ten WordPress themes are premium now - 18 December, 2017
• Child Theme Detection Just Got Better - 17 January, 2017
• Child Themes: Enqueuing the parent theme stylesheet instead of using @import - 31 December, 2016