In my previous post I mentioned that one of the issues of using @import in the child theme is that the JavaScripts that help media queries in IE8 and lower so not work.

So there  are three solutions.

When using @import copy the media queries from the parent theme and paste in the child theme stylesheet.

Pro

• Simple and easy to do

Con

• For the rest of the browsers you have the media queries twice which makes debugging complicated
• The media queries needs to be updated if there are any changes in the parent theme

Use the solution of using functions.php that I presented in my previous post.

Pro

• Improves the loading speed of the stylesheets
• The media queries are only in one place and thus do not need to be updated

Con

• This is a bit more complicated and perhaps not so easy to understand for beginners

Theme authors add the media queries in a separate file and have the file always loaded from the parent theme

Pro

• The user is not confronted by this issue

Con

• An extra file is load just for the media queries

I came across this great service today DepolyButton. Easily add version control to your WordPress site, plugin or theme very easily.

It is as simple as

1. click on “Set up a Project”,
2. enter your email address,
3. add your SFTP login info,
4. connect with GitHub and
5. deploy.

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.

Flexibility for Grandchild themes

This is not really a huge thing but it does make it easier from grandchild theme users to disable the loading of 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.