Guides to making your site faster such as those provided by Google and Yahoo advise against using “CSS @import”. However; tutorials on creating WordPress Child Themes (including the WordPress Codex) invariably use the “@import rule” in the child stylesheet.
A Google search identified a number of questions about avoiding @import in child themes but next to no solutions; so I thought I would do my own research and experimentation.
Way back since version 1.5.0; WordPress has provided 2 functions that would make the use of CSS import (or work-rounds below) unnecessary, but it seems that few theme frameworks make use of them for this purpose.
I’ve listed 4 solutions, for people that, like me, are curious about CSS import alternatives. They won’t be of interest to most sites; however; if page load speed is important or problematic for your WordPress website, then avoiding CSS import is one of the measures you can take.
On this page:
- Solutions: use at your own risk
- 1. cut and paste – the obvious method
- 2. quick edit of header.php
- 3. using a plugin – a generic solution
- 4. using filters
- Frameworks/Themes that don’t require CSS import by default
- Other thoughts on WordPress performance
- Comments and Suggestions welcome
Solutions: use at your own risk
This article assumes you have sufficient knowledge of WordPress, PHP, HTML and CSS to create a simple Child theme.
Adopt the following suggestions at your own risk. I make no guarantee that they will not mess up your site, nor that they will work for you.
1. Cut and paste – the obvious method:
Cut and paste all/relevant CSS from the parent theme style sheet to the child’s. Although I prefer the options below, this all in one CSS option has a slight performance advantage.
When to use: if you are not using a child header.php (or whichever file the theme uses to define the HTML head) and solution 4 is not available to you.
Issues: if a parent theme’s update includes modification to its CSS then you will have to re-edit your child theme to include the changed CSS.
2. Replace your stylesheets import statements with stylesheet links in a child header.php
This is my preferred solution, because I already use a child header.php. On parent theme update I will have to check header.php for changes (as I would have previously); but I don’t have to re-check the child stylesheet (which only contains my custom CSS). Plus, it is easier to add a line to header.phpp rather than many lines to the child stylesheet.
Edit your child header.php and replace the existing CSS stylesheet declaration(s) by making use of the following functions:
get_template_directory_uri() gives us the “path” of the parent theme directory
and
get_stylesheet_uri() gives us the “address” of the child theme’s stylesheet
Note: you could alternatively use bloginfo which provides similar functionality via its parameters.
Simple example 1. child theme: Theme Hybrid Trending (v 0.2.1) header.php:
Insert:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
Before this line:<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
Simple example 2: child theme for TwentyEleven (v 1.3)
Replace: <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
by:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
Notes & issues: The examples are typical of the changes required on the themes I tested. Your theme might not use header.php for stylesheet declaration, or involve additional stylesheets/modular CSS. You will have to use the above functions accordingly. e.g. you may need to add something like <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/some_subdir/additionalstyle.css" type="text/css" media="all" />
When to use: When you already need or use a child header.php for other purposes. As you will have to check it, anyway, whenever you update of the parent theme.
3. Simple quick and dirty plugin
It is probably the best (non theme specific) solution if your child CSS does not override (conflict) with the CSS of the parent theme.
For many of you this solution will be:
- Maintenance free: not affected by any updates to the parent theme.
- Theme independent – it should continue to work without editing if you switch to another theme that also uses a single style.css stylesheet.
The skeleton code for a WordPress plugin can be found here; along with an explanation. Replace the commented out style stuff by:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />and install as per the instructions.
Notes/issues:
- DO NOT USE this solution, if your child CSS is not only providing your additional styles, but overriding some of the parent’s. The parent theme stylesheet will take precedence as its link will appear after the child’s in the HTML head.
- It should work where your child CSS would otherwise require a single import for “style.css” and the parent theme provides wp_head functionality (most themes?).
- I have not tested this solution.
4. Using a framework/theme specific function and filtering (e.g. for Thematic theme)
The only solution for avoiding CSS import that I discovered by Google Search was in an article by Ian Stewart. Although not suitable for my needs (I will be experimenting with a many different themes) it may be the perfect solution for you.
It should not be affected by updates to the parent theme. So it is probably the best option if your framework/theme provides an appropriate function for you to filter.
I am not going to copy Ian’s work; so check out the bottom of his article, it uses the Thematic as an example.
Issues/Notes:
The parent theme has to provide an appropriate filterable function; and just as importantly you need to know about it! Try theme documentation, wading through theme code, or theme forums. If you use a free theme you may find you have to pay for support/documentation.
I’ve used Theme Hybrid Trending as an example for solution 2 above. ThemeHybrid has an awesome reputation and, if I had time to check, I’m sure there would be a suitable function for filtering, that would provide a better solution. There is a scarcity of free information on customising Themehybrid. However; Theme Hybrid ‘s club provides forums/support/documentation for $25 p.a. and is considered excellent value by its members.
Frameworks/Themes that don’t require CSS import by default
Whiteboard is a theme framework, which expects to be used with child themes. During testing I found that its header.php already includes the following lines of code:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/lessframework.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/theme.css" />
bloginfo( ‘template_url’ ) is similar to get_template_directory_uri() used in solution 2. i.e. Whiteboard’s header.php is telling WordPress to generate links for these two stylesheets using the parent theme’s directory. So, there is no need for an import statement in the child stylesheet and no need for a work-around.
I was surprised that none of the other themes (especially frameworks designed in expectation that child themes will be created) used this approach. Feel free to comment below if you are aware of other themes adopting this approach.
General comments on WordPress performance and page speed
Improving page speed is an incremental process; some changes and solutions (see below) can make a huge difference, most, like avoiding css import have a small impact by themselves, but together provide a noticeable improvement.
For WordPress sites, installing a caching plugin is probably the first thing you should do to improve your site performance – these can make an incredible difference to the speed at which your page loads.
Caching is a misnomer for some of these plugins, for example W3 Total Cache includes many other performance enhancing features such as minifying CSS and HTML.
I don’t use these plugins on my WP site because I am constantly making changes and caching would be problematic. However, I tried W3 Total Cache for half an hour as research into this article. It does mention CSS import – but I’m unsure if this was just to minify it; as whatever settings I tried (clearing both server and browser cache) the parent stylesheet was always served via inefficient import. Anyone?
Comments and suggestions welcome
I don’t claim to be an expert on WordPress; your suggestions, corrections, agreements and criticisms are welcome. Comments are moderated, spam such as bland comments with links to non WordPress sites (for which this article has no relevance) will not be published.
Shameless plug: If you find this article interesting then a “+1″ at the top of the page would be really appreciated.
I just found your post hoping to find a better solution for @import, but didn’t find a flexible one. I was thinking about including the style.css with a function and hook in the child functions.php See this one:
function add_parent_styles() {
wp_register_style(‘parent_style’, get_template_directory_uri() . ‘/style.css’, array(), 0, ‘all’);
wp_enqueue_style(‘parent_style’);
}
add_action(‘wp_enqueue_scripts’, ‘add_parent_styles’);
I am still working on the order of this style compared to other style files and I probably need to change some url() paths in the style.css to something like url(‘../parent_theme/img/image.png’).
Maybe others can add something to this.
@Thomas thanks for the input; I’m sure wp_enqueue_style would be the considered the “correct” way to add styles, and at some point I may give your code a try.
To date I’ve not had to worry about CSS or Javascript ordering etc; so I have no experience of enqueing and I am unable to make any suggestions.
I assume you’ve read it, but others may find WordPress Codex wp_enqueue_style (and the articles it lists under Resources) useful.
Thomas is correct – you can add this to a child functions.php and it works.
The WP function ‘get_template_directory_uri’ targets the parent folder, while ‘get_stylesheet_directory_uri’ targets self. So you could use this to swap enqueued stylesheets in the child.
I had to change my parent theme’s Javascript enqueueing to ‘get_template_directory_uri’ so it would work in the child.