The first task of creating a child theme in WordPress is to import the css from the parent theme into the child theme. While its not a necessity, the majority of WordPress users will want to do this, its kind of one of the main reasons for using a parent.
The Most basic Approach
style.css
Anyways, first things first you will need to create a style.css file in the root directory of your child theme. Within that child theme you will need to specify it’s name, it’s parent, etc. Now here is where it gets tricky for us SASS and Less users. Under that initial information section of the css file, most people will import the parent css into this child css file in order to access the existing parent css stylings like so:
@import (../theparenttheme/style.css);
Ok, but what if we want to use SASS in our child theme? How do we combine the imported css and our compiled sass all in the one style.css file? The Answer is WE DON’T.
style.scss
The first thing you will need to do is create a style.scss file (or style.less if you’re using Less) in the same root directory as the style.css. We then remove the code from within the css file (both the info section and the import statements) and move it into the scss file. We then need to change the import to import the style scss file from the parent. It will look something like this:
@import “../parentTheme/style”;
keeping the ‘info’ section intact in compiled sass
One thing to note is that a lot of sass compilers will strip out the info at the top of the compiled style.css. This will break the theme. You need that info. To make sure it is kept you should add a ! to the comments like so:
/*!
Theme Name: Your child theme
etc
*/
There is another (and I think better) way to do this and I will describe it in the alternate approach below.
child sass
Okay so now we have our parent css compiled into our child style.css class. Once this is done we can start worrying about adding our own sass styling to the child theme.
You can do this wherever you like, I generally do it inside of a folder called “css”. Once you have your sass files created and ready to go inside your child theme we need to add them to the parent/master scss. To do this we go back to the style.scss file and import our child scss under our parent scss:
@import “../parentTheme/style”;
@import “css/theme”;
If you are using multiple child sass files in your child theme I would recommend compiling them all into a single child sass file and importing just that file into style.scss, just like I’ve done with the above. I have a sass file called theme.scss but I also have many other child sass files that all get imported into theme.scss. Again its a personal thing, it works best for me.
An Alternate Approach
For me, If I also have control over the parent theme (e.g. I’ve also created it) there is one other thing I always do. I don’t like having my css files in the root directory. I prefer to see them in a css folder. We have to have a style.css file in the root though. But here is the thing, we do NOT have to have our css in that css file, we can have it wherever we want. (Note: This approach is identical to the above except where stated.)
Enqueue a different css file
Most people will enqueue their css file in the functions.php file. You don’t have to enqueue the style.css file, you can enqueue any css file anywhere in your theme. So what I do is I have my theme information and ONLY my theme information in the style.css file. My actual css file containing all the styles is within my css folder. In order to apply the steps outlined in the previous approach to this kind of setup I get rid of the style.scss file from the root directory (if Ive added one) and create a new css and scss file within the css folder to handle the styles.
Child and Parent css file location and name must match
You can name this new css file (and its scss file) containing the css whatever you want, however it must match the name and location of the css file that you are enqueueing. As the enqueue will probably take place inside the parent theme’s functions.php, the parent theme’s css structure will need to match the child theme’s. So the parent will also need to have an info only style.css file, a css folder and your actual css/scss file within there. As I said before you will only be able to do this if you have control of the parent, either you’ve created the parent yourself or you’ve done some heavy editing of one you’ve imported.
End Result:
In the end what I will have is a style.css with just the theme information (and you can remove the ! if you had followed the previous approach as it is no longer needed) and a scss file within the css folder that contains the @import statements and the accompanying css file with the compiled imported styles.
The tree looks a little like this:
/themes
/child
style.css (theme info only, no ! needed)
/css
_colors.scss
_layout.scss
_theme.scss (imports colors and layout)
site.scss (imports parent’s site.scss and it’s theme.scss)
site.css
/parent
style.css (theme info only, no ! needed)
/css
_layout.scss
_typography.scss
_config.scss
_theme.scss (imports config, typography and layout)
site.scss (imports it’s theme.scss)
site.css
Functions.php:
…
wp_register_style( 'my-stylesheet', get_stylesheet_directory_uri() . '/css/site.css', array(), '', 'all' );
…
-DK