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:
|
1 2 3 4 5 6 7 8 9 |
/* Theme Name: Child Theme Name Template: parent-theme-folder */ /* import parent styles */ @import url(../parent-theme-folder/style.css); /* Child theme styles below this line */ |
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
@importline 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:
|
1 2 3 4 5 6 7 8 9 |
<?php /** * Loads the parent stylesheet. */ function load_parent_stylesheet() { wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'load_parent_stylesheet' ); ?> |
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.
Luis Alejandre
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
I prefer use @import method. Because @import method can show my own child theme name when scanned on theme detector. Enqueue method only show the parent theme name.
Now there is no need for it, even in that case. Please see our new post about better child theme detection.
Now when I add custom CSS it has no effect? it works fine with @import
It should work, Michael. You must be having a cache issue.
Enqueue your custom style sheet as well in the functions file and it should work.
Super useful information, I have read many other articles regarding the same topic but something was always missing. You have done a good job BRO. Keep it up for beginners just like me. I am surely going to use the 2016 with a child theme now.
This was particularly true for sites where the parent theme stylesheet is enqueued