Why do you have to enqueue the parent theme stylesheet in a WordPress child theme? I’ve created style.css
in the child theme and when I add a change to it, it works without the functions.php
file that enqueues the parent stylesheet, such as changing the background color of an element. I’ve searched for and answer but can find nothing that tells my why. Everything just says that you have to.
1 comment
Comments are closed.
When it comes to loading the styles in WordPress themes there are many ways to skin a cat.
Parent enqueues child style.css –
In some themes the parent
style.css
is enqueued withwp_enqueue_style()
within the parent themephp
code.The 2015 default theme is an example of this method. In
functions.php
line 233 there is the linewp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
. When the theme is standaloneget_stylesheet_uri()
returns the theme’s ownstyle.css
. When a child theme is presentget_stylesheet_uri()
returns the child themestyle.css
.The above is the likely case for your parent theme.
Child enqueues parent style.css –
From the child theme you can load the parent styles by by one of two methods.
enqueue_style()
with parameters pointing to the parent theme. Some php similar to:wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
. This is the method you are talking about.@import
from within the child themestyle.css
file. A typical line of code for this would read:@import url( '../parent-theme-folder/style.css' );
. This is not ideal as@import
slows down your page load time.Better Method – Don’t use root style.css
It’s not strictly necessary to use
style.css
in the root folder at all. The only thing WordPress strictly needs this file for is to read the theme information in the top comments. This very requirement means that thestyle.css
can’t be minimised, or at least is a pain to minimise. Minimising is the process of removing all the spaces in a file of code to reduce the file size. This reduces page load speed.So now a lot of modern themes are enqueuing their main style from a different minimised
css
file in a theme subfolder. The mainstyle.css
simply consists of the informational comment section read by the core php code but not loaded on the front end.