Child Themes: Enqueuing the parent theme stylesheet instead of using @import.
It´s been greater than two years already since Konstantin Kovshenin printed his publish An Alternative to @import in WordPress Child Themes. On it, Konstantin identified that using the CSS
@import directive to import the parent theme stylesheet from the kid theme taste.css will double the time wanted for the stylesheets to load, and confirmed us a greater option to do it by means of enqueuing the parent theme stylesheet from our kid theme’s purposes.php document (extra about it in a second).
I´ve been using the enqueuing selection myself for relatively a very long time now. For example, my Divi Children plugin stopped using the
@import directive since the 2.zero.eight replace, greater than a 12 months and a part in the past.
But then I noticed I had now not posted about this on the WPTD Blog but, and that some posts of my Child Themes Tutorials collection had been out of date as a result of of it.
Actually, the outdated way of uploading the parent theme stylesheet by means of using
@import is now not regarded as very best apply as mirrored on the WordPress Codex (even if at the second of publishing this publish it nonetheless seems in some WordPress documentation, as in the case of the Theme Handbook for example).
Better past due than by no means, so I didn´t need to end this 12 months with out speaking about the proper option to come with the parent theme kinds in kid topics.
The downside with @import
Even even though fashionable browsers can load property in parallel, the mere undeniable fact that
@import is used inside of the kid theme´s stylesheet signifies that this stylesheet must be loaded ahead of the browser even is aware of that it nonetheless must obtain but another stylesheet (the parent theme´s taste.css known as by means of the
This is the manner we used to do it, uploading the parent stylesheet by means of method of
@import inside of the kid theme´s taste.css:
Theme Name: Child Theme Name
/* import parent kinds */
/* Child theme kinds underneath this line */
See what I imply? On best of the time it takes the browser to obtain the kid theme´s stylesheet we need to upload the time to obtain the parent stylesheet, as a result of this new obtain procedure received´t even get started ahead of the kid theme´s stylesheet has been loaded and parsed, which makes the entire procedure a lot slower than it will have to be.
The proper option to do it
The proper manner of enqueuing the parent theme stylesheet is to disregard about the
@import way and to use the
wp_enqueue_style() WordPress serve as for your kid theme’s purposes.php (because of this that, if you nonetheless don´t have a purposes.php document for your kid theme´s listing, you´ll want to create one).
The serve as will have to be added by means of using the
wp_enqueue_scripts hook (which, regardless of its title, is used for enqueuing each scripts and kinds).
So, for an present kid theme that used the outdated way, all you´ll want to do is:
- Delete the
@importline out of your kid theme´s taste.css document.
- Create a purposes.php document for your kid theme´s listing (should you don´t have one but).
- Add the following code on your kid theme´s purposes.php document:
* Loads the parent stylesheet.
serve as load_parent_stylesheet()
add_action( ‘wp_enqueue_scripts’, ‘load_parent_stylesheet’ );
When a kid theme is getting used, the
get_template_directory_uri() serve as returns the absolute trail to the parent theme listing, so a appropriately hooked line like the one using
wp_enqueue_style() in the code above is all we want.