The prefered method in the codex and with plugins that generate child theme is to load the parent stylesheet by using @import in the child themes stylesheet.
@import url("../twentytwelve/style.css");
There are a few problems with this.
Speed
Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.
Media Query support in IE
Media Queries are not supported in IE8 or lower. So to support media queries on IE 8 and lower JavaScript is using like css3-mediaqueries-js and respond.js.
Note: Doesn’t work on @import’ed stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the <link> and <style> elements.
@import rules are not supported by respond.js
A solution to this could be to copy the media queries from the parent theme and include them in the child theme but this does not make it easy when there are changes in the media queries.
More Flexibility
This is not really a huge thing but it does make it easier to disable loading the parent stylesheet.
Solution
Now for the solution. Instead of using @import just add this PHP code to the functions.php of your Child Theme. If you don’t have one, simply create new file and name it functions.php
Here is a variation that add the current parent theme version to the stylesheet url.
There might be in some themes where the child theme stylesheet will load before parent theme style sheet. Those themes will have the code like this in the header
For those cases add this PHP code to the functions.php in the child theme.
In the perfect world the parent themes would load the stylesheet like _s does.
Comments
10 responses to “Improved way of loading parent styles in child themes”
What is the reason to add the current parent theme version to the stylesheet url in the variation? Thanks for putting this together I’ve been searching everywhere for a way to replace @import
So that when you update the parent theme the cache is cleared so that the visitors get the latest css. If that the parameter is left blank or false then the WordPress version is placed there. From experience is normally most people do not change the child theme version. I have changed the script and improved it so that everything is automatic. You do not need to define the parent theme anymore.
Hi Ulrich! Thanks for posting this code. I incidentally went looking for this when I was working to update a responsive child theme I’m using for a site. QWhen I first installed it some time back I had copied all the parent themes CSS in the files child theme. Now that I’m upgrading the site and know CSS much better, I decided that I would take at all the extra styles and just change the styles I needed (as is recommended in standard practice).
Upon going to the responsive parent theme style sheet (ver 1.9.5) to compare and make sure I didn’t delete my adjustments I saw that all the styles in the parent theme were gone and there was no @import rule calling them from anywhere else!
They weren’t in Responsive/style.css either, but I knew it must be calling them from somewhere else, So when I dug deeper I found them in /responsive/core/css/style.css.
I also saw that you are using the wp-enqueue code in the Responsive functions file found in core/includes/functions.php to load up the style sheets and child themes.
So now anyone who uses Responsive as a parent theme doesn’t have to worry about @import or even wp-enqueue to load up the parent theme defaults!
I think it would be good for you to do a post like the above for theme developers of parent themes and frameworks on how to load child theme style sheets, so it makes things even easier for child theme users.
GREAT work on Responsive BTW! Thanks for your contribution! 😉
Thank you for your comments. I will write a post as soon as I get time.
Thank you so much for posting this. I tried to create a child theme for WooThemes’ Canvas and for some reason it would not load the parent theme’s style.css. With your solution it worked instantly.
Great 🙂
Ulrich!
Thank you very much for sharing the solution!
Now it works great in IE8 with responsiveness without any additional js-files!
[…] my previous post I mentioned that one of the issues of using @import in the child theme is that the JavaScripts […]
There’s no need to create an additional functions.php file within your child theme. You could try something like this:
https://gist.github.com/samkent/11371858
Thanks for leading me in the right direction 🙂
The reason why I recommended using a child theme was that if you make the changes in the parent theme then when there is an update the changes will be over written. If you are a developing a parent theme then adding it to the parent functions.php is Ok.