Home » @import » Child Themes: Enqueuing the parent theme stylesheet instead of using @import

Child Themes: Enqueuing the parent theme stylesheet instead of using @import

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 @import directive).

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:

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 @import line 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:

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.

child themes enqueuing the parent theme stylesheet instead of using import - Child Themes: Enqueuing the parent theme stylesheet instead of using @import

Luis Alejandre

Luis is the author of the WPThemeDetector device and the leader editor of this weblog. You can learn extra about Luis in our About web page.
child themes enqueuing the parent theme stylesheet instead of using import - Child Themes: Enqueuing the parent theme stylesheet instead of using @import

Latest posts by means of Luis Alejandre (see all)

Liked this publish? Please percentage it!

Check Also

Child Theme Detection Just Got Better

Child Theme Detection Just Got Better

Child Theme Detection Just Got Better. I´m happy to announce that we have simply up to …