Improved way of loading parent styles in child themes

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.

Posted in Featured, WordPress
9 comments on “Improved way of loading parent styles in child themes
  1. Chris says:

    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

    • Ulrich says:

      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.

  2. Justin says:

    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! ;)

  3. Helge Klein says:

    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.

  4. Andrey says:

    Ulrich!
    Thank you very much for sharing the solution!
    Now it works great in IE8 with responsiveness without any additional js-files!

  5. Sam Kent says:

    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 :)

    • Ulrich says:

      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.

1 Pings/Trackbacks for "Improved way of loading parent styles in child themes"
  1. […] my previous post I mentioned that one of the issues of using @import in the child theme is that the JavaScripts […]

Student, Sportsman and budding WordPress developer with interests in responsive design and internationalization