In this post you’ll learn how to leverage modular CSS in your WordPress Child Themes by looking into another directory with @import or the tag. We’ll be making a Child Theme called Chiron that will use the modular CSS of the Thematic Theme. A theme you can use as the basis for further customization—and for following along with future posts in this series.
You’ll also get a brief introduction to the concept of using Filter Hooks in your theme—something that we’ll be looking at more closely in a later post.
What is Modular CSS?
The idea of Modular CSS is simple. You separate commonly reused chunks of CSS into distinct files for bringing together in a master CSS file or a series of links in the document head. It’s pretty straightforward and it’s been around for a while. What does this mean? The development time for new projects gets exponentially shorter as you refine the basic style sheets that make up your modular CSS Toolbox.
Unless someone made those stylesheets for you. Then, well, your development time would be really short.
The WordPress Parent Theme we’ll be using in the following demonstrations—the Thematic Theme—includes a host of basic style sheets that can be leveraged by WordPress Child Themes and have even the newest WordPress developers off and running with a fully realized theme in seconds. Not minutes. Seconds.
Getting Started
We’re going to start with a Child Theme of Thematic I’m going to call Chiron. Chiron was the centaur that taught all the Greek heroes of legend to be, well, heroes. Guys like, Jason, Achilles, and Hercules. We’re going to keep going back to the Chiron Theme as this post series progresses. By the end, you should be an expert in WordPress Child Themes and on your way to becoming a WordPress design hero.
Here’s the beginning of the Chiron Theme style.css. You know the drill: save this file to wp-content/themes/chiron and activate your new theme from the Themes panel in the WordPress admin. Don’t forget: you’ll need the Thematic Theme installed for this demonstration to work.
/* Theme Name: Chiron Description: A Child Theme of Thematic. Template: thematic */
Grabbing Style Sheets From The Parent Theme
This is the easiest part—and where things start to get really fun—we’re going to add a few lines to our Child Theme style sheet and start grabbing styles.
/*
Theme Name: Chiron
Description: A Child Theme of Thematic.
Template: thematic
*/
/* Using @import, we can borrow style sheets from the Parent Theme */
/* Reset the browser defaults */
@import url('../thematic/library/styles/reset.css');
/* Apply default typography */
@import url('../thematic/library/styles/typography.css');
/* Add WordPress image styles */
@import url('../thematic/library/styles/images.css');
/* Add a basic layout */
@import url('../thematic/library/layouts/2c-l-fixed.css');
/* Start with some default styles */
@import url('../thematic/library/styles/18px.css');
The 5 extra lines of CSS we’ve added (excepting the commented out bits) that all start with @import will take our bare HTML page and turn it into something approaching a more finished layout.
Do you see what we did there? With 4 lines of simple CSS we’ve just eliminated hours of the design work involved in creating a WordPress Theme. Have a look inside your favorite WordPress Theme and see how the CSS is structured. With a theme like Thematic you’ve got a lot of options for mixing and matching styles and creating the ultimate WordPress Theme starting point.
A Technical Matter: Parallel Style Sheet Downloading
On the High Performance Web Sites Blog Steve Souders compares the performance of the tag vs. @import. Here’s the issue in a nutshell: a series of @import declarations will be processed by the browser sequentially but a series of tags will be processed in parallel. What does this mean? If you had 10 style sheets that each took 2 seconds to process, you’d add 20 seconds to the rendering time using @import but only 2 seconds using tags—because the tags are processed alongside each other in parallel.
Of course, if your, style sheets are taking 2 seconds each to process you’ve got bigger problems. But on high performance web sites every fraction of a second counts. Here’s how to take advantage of Modular CSS in your WordPress Child Theme and have a high performance web site.
Solution 1: Copy Your Stylesheets
The first solution is the simplest: only use @import in production. When your site production is finished simply copy the style sheet modules into your main style sheet in place of each @import declaration. While it’s the simplest solution, you lose all the advantages of the constantly refined CSS of a Parent Theme this way. And that’s one of the reasons you’re interested in using a WordPress Child Theme, right?
Solution 2: Filter The Parent Theme
Of course, there’s a better solution. And, of course, it’s really easy to do when your Parent Theme is the Thematic Theme.
Remove all those @import declarations from your Child Theme style.css and create a functions.php file in your Child Theme directory. Drop the following code snippet in there.
<?php
function childtheme_create_stylesheet() {
$templatedir = get_bloginfo('template_directory');
$stylesheetdir = get_bloginfo('stylesheet_directory');
?>
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/typography.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/images.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/layouts/2c-l-fixed.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/18px.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $stylesheetdir ?>/style.css" />
<?php
}
add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');
?>
What we’re doing here is creating a function that filters an existing Thematic Theme function. Function filtering is a powerful tool that lets WordPress Child Themes take full control over crucial elements of what’s output to the screen. It’s something we’ll be covering in more depth in a future post.
In this case, with that code snippet, we’re moving the series of import declarations to a series of links in the head section of your theme (use View Source in you favorite browser to check it out). Just what Steve Souder of High Performance Web Sites recommends.
How To Modify WordPress Themes The Smart Way
This post is part of the series How To Modify WordPress Themes The Smart Way.
- WordPress Child Theme Basics
- Modular CSS in WordPress Child Themes
- Using Filter Hooks in WordPress Child Themes
- Using Action Hooks in WordPress Child Themes
ThemeShaper 
33 responses
Not sure if this is entirely correct, but there may be a chance that the @import sequential download limitations only apply when you use the @import call in the HEAD of your document, but they download in parallel if you call them from another stylesheet.
I just ran a test on a site that I have that I know @imports 2 stylesheets at the top of the style.css file, and using the Safari Inspect tool, it does look like they downloaded in parallel.
Anecdotal, yes, but it seems to support my hunch.
I think that’s more a case of Safari being awesome. 🙂 Unfortunately there are some less awesome other browsers to contend with, like IE.
That said, for most sites, in most cases, using @import with Modular CSS makes a ton of sense. I’ve never witnessed any slow-downs. Always good to know your options though.
I’ve also avoided @import rules. My reasoning was that I’ve always understood that the imported stylesheets will not cache. Not sure where I learned that though. I could be crazy. Any idea?
[…] about Theme as of April 30, 2009 Modular CSS in WordPress Child Themes – themeshaper.com 04/30/2009 In this post you’ll learn how to leverage modular CSS in your strong […]
exceptional…. you have done a marvelous work… I learning all this CSS and applied on my site as well.
Very interesting! However, only with copy/paste the CSS into the style.css will we limit the http loads… Yslow!, for instance, is particulary critical of multiple CSSs being loaded…
Thanks for these very informative articles! 🙂
Just a sidenote: I’ve been testing the WP-CSS ( http://www.halmatferello.com/lab/wp-css/ ) plugin, which joins and compresses all CSS files into just one. This, I guess, is a nicer solution. I’ve heard somewhere that WP 2.8 will bring some kind of mechanism like this, let’s wait and see
I would second the idea that it is better to merge them into one file, optimize, and then offload that file to S3 or better CDN.
You effectively then get the same benefit you achieve using CSS sprites for images.
Looking forward to the next installment. Bottomless thanks for putting so much work into all of this.
This is a good article, but I would like to suggest one change.
Nearly everywhere I’ve worked, “Production” means the finished, live version. I think what you mean here is actually “Development.”
Other than that, very useful, clear information. Thanks!
[…] themes. The first two parts of this guide are already online and covers child theme basics and modular CSS in child themes. Ian plans on covering the following topics in the […]
[…] Modular CSS in WordPress Child Themes […]
[…] Modular CSS in WordPress Child Themes – […]
Ian, Is there anytime in a child theme that we would have to go to the thematic files for changes. I am thinking of header changes that could not be done in CSS after the import of thematic styles.
Not really. With a Theme like Thematic you can make a lot of changes via the functions.php in the Child Theme. With other Themes simply copy the header template over to your Child Theme directory and start editing there.
Hey Ian, (and everyone!)
I know I’m not the sharpest pencil in the box, but I’m entirely missing the point of this method. When you create a child-theme (by adding the header information to the child-theme that links it to the parent) you automatically pull all of the parent’s style sheets. Why then would you have to (or need to) import these directly into the child-theme’s style.css ?
When you create a Child Theme you don’t automatically pull pull all of the parent’s style sheets. You would use this technique so you could take advantage of the CSS in the Parent Theme the same way you take advantage of the existing Template files.
Ian (g’morning!)
I’m a little confused. If you want to take advantage of the Parent theme’s CSS files, why not just add 1 line of code
@import url('../thematic/style.css');and be done with it? What’s the advantage (or ‘idea’) behind this method?As I see it, (and I’m not much of a ‘see-er’), either way you’d be spending time overriding whatever defaults you didn’t like (or thought needed ‘improvement’)
In this case, it gives you the option of changing the layout and picking and choosing which other base files you want to use.
Ian,
I can see your point when a designer is using a ‘theme’ in the traditional sense of the word. However, I think you (and probably others) would agree that Thematic doesn’t truly fit that bill – and this is a good thing!
I’m a novice developer in every sense of the word, and I’ve quickly come to learn that developing for the WordPress platform is a job comprised of two very distinct parts:
1. Functional (programatic) Integration – Ensuring that your template files ‘fit in’ and play nicely with WordPress core elements and all that entails.
2. Aesthetic Design – Designing a visually pleasing website
In the above example, it should be obvious that the functional ‘chicken’ must come before the aesthetic ‘egg’. The ‘chicken’ (functionality and integration) is the critical and obscure part of the job where Thematic, and other WordPress frameworks truly shine.
Using Thematic, I’m comfortable knowing that functional considerations have been met, and can focus on the ‘look and feel’ components – or for the most part. Along this train of thought, I’ve come to realize (after many hours and lots of sugar) that the included style sheets are analogous to the sample photograph you get when you buy a picture frame. They give you an idea of what can be done with the framework, but serve little purpose beyond that.
I feel that this methodology sets frameworks apart from garden variety themes in that they are designed with customization and extendability in mind. Unlike ‘conventional’ themes which for the most part, come equipped with whatever functionality is required for that specific theme, as is the case with most commercially available themes.
So, to cut it short – I think that major players in this arena, yourself at the forefront, might want to consider developing well-documented styling methods for their frameworks, as changing things around and fussing with the included style sheets proves more headache then doing it from scratch. Seriously, something to think about. A little out of the box.
My $0.02
Thank you immensely for the effort Ian!
Ian, *thank you* for Thematic, the tutorial and the forum support.
Daniel, every time I start something new, I find myself bristling against whatever it is I’m learning. I actually get quite frustrated, often, because along with the subject matter, I usually have to learn an author or instructor’s particular style and viewpoint along the way.
I *crave* a “start here” and “step-by-step-show-me-how-to-do-this” tutorial to make me feel better, less frustrated and more competent.
Increasing frustration means I need a break, food or a good night’s rest. Invariably, that break settles something in my brain and “suddenly” I get it. Whatever hurdle generated the frustration has been overcome and I’ve learned enough to take the next step.
At middle age, I’ve figured out this isn’t a function of poor writing on an author’s part or impossible subjects; it’s more a function of me and my particular style of get-mad-at-it-first-then-learn-it style. And so I extend more trust to authors and teachers (and to myself) that I will “get it” if I press on through what initially appears as chaos.
After which, it becomes important for us to go back and smooth out the bumpier parts of the learning process with explanations for those who will come after.
Here is the dichotomy of WordPress:
Anyone can use WordPress, style a theme, make their own theme, or create a framework.
OMG there is A LOT to know!
Press on. It will make sense!
Unless the point was to select ‘which’ of the parent’s style sheets you want to apply? Such as in the case of Thematic, we have several choices for the layout style sheet.
** Correction
When I said “by adding the header information to the child-theme that links it to the parent” –
I was inadvertently including
@import url(../thematic/style.css);at the very top of my child-theme’s style.css document, and so that only thing that changed as a result of the latter 5 lines (the @import statements) was the layout! Since the layout style sheet imported was different then Thematic’s default layout style sheet.Still, I’m a little murky on the purpose of this technique. I mean why would we need or what to do this? (I apologize in advance if the answer is obvious and I’m just not getting it – as I said, I’m not particularly gifted)
Thanks!
[…] Créer des feuilles de style CSS modulaires pour un thème enfant : Modular CSS in WordPress Child Theme […]
[…] Modular CSS […]
Ian (or others), would you care to comment on what considerations would guide choosing between making all CSS changes in child style.css versus copying default.css into the child theme folder and changing that file?
In the style.css file you write:
Can you suggest what ‘outrageous’ might entail?
It’s strikes me it will be easier for me to make tweaks down the track if I make changes in a copy of default.css because then it’s all largely in one place, but I wonder what pitfalls I might be exposing myself to (now and down the track). When ThemeShaper goes to 1.0 or WP goes to 3.0, will I have created myself all sorts of headaches?
To expand on my previous comment (sadly hidden up in the thread; I must have erroneously hit Reply) regarding doing styling entirely within a child’s style.css file versus altering a copied version of default.css:
To change the shade of blue used for link colours in the text one can either change the #HEX value Ian defined for a:link in default.css, or one can copy the CSS for a:link into style.css and change the value there. However the latter approach has the undesirable effect of overriding Ian’s carefully created CSS hierarchy and makes nearly every link on the page blue. Obviously there are ways to code around this, but I’m left wondering which approach will be the most efficient over time.
Ian,
I tried the filter trick you suggest in this article – replacing @import with links through the functions file. The problem is it doesn’t render the same as when using @import. In fact, it’s a bit of a mess. Maybe it has to do with progressive rendering? (If the @import renders sequentially and tags render concurrently, is it possible the child theme css renders BEFORE the parent theme?). Or maybe I’m doing something stupid.
[…] Ian Stewart, posted on April 30, 2009. Source: https://themeshaper.com/modular-css-wordpress-child-themes/ ) This entry was written by Gnocchi, posted on December 27, 2009 at 9:58 pm, filed under […]
Hi Ian,
Your posts are great – unfortunately for me, just very slightly below my level of understanding. I grasp the general idea, but some of the specifics need to be spelled out in more detail and visually – but that’s my problem and probably not yours!
Anyway, onto my question – Can you describe the exact level of control that this method offers? By this, I mean ‘what are the limitations of designing by child theme?’
e.g. I kicked off creating a child for Thematic and it seems quite possible to change text, colours and the usual css bits, but when I wanted to replace the title with a large clickable banner, I was stuck. Am I missing something, or does this require modification of Thematics core files, rather than being able to achieve within style.css?
I hope this makes sense!
Jim.
Wow… Just noticed Daniel posted that… over 6 months ago…
Oopsie!
I’m reading about child themes for the first time and am wondering about why one strategy for maintaining the style.css file hasn’t been mentioned on this comment stream.
My gut reaction would be to just paste all the the css from the parent theme into the child theme style.css (if I was happy with the majority of styles in the parent theme) and then update the styles I wanted to change.
This would mean not having to mess around with firebug so much, and because all styles are visible on screen at once I wouldn’t get so many suprises when it comes to inherited style rules. On top of that, there wouldn’t be the http request slowness that comes with BOTH the @ and multiple method.
As I said, I’m new to this so may be missing something?
Seb
Using WP 3.0.1 with Thematic 0.9.6.2 and the Thematic Child Theme 1.0, I pasted the link code above into functions.php. Got error messages, sometimes on trying to view site, other times on trying to update functions.php, e.g.: “Warning: Cannot modify header information – headers already sent …” Deleting and saving (when it allowed me) did not remove error message, had to activate a different theme and then reactivate this one.
Is this method compatible with WP 3.0.1?