Theming WordPress using Thematic and Compass

Recently I have started to play with making my own themes for WordPress. Rather than start from the ground and reinvent the wheel, I decided to use a base theme which I can then extend. I also opted to use the brilliant Compass css framework to speed up development. Im going to talk about how I set my project up to get the most out of these tools.

Let me say one thing first and foremost, I am not an expert on Compass, nor am I an expert with SASS, or Ruby, or a WordPress theming guru. Therefore what I have done is not necessarily the best way to do it, but it is a way that worked for me.

Dont reinvent the wheel

I decided to on using the child theme system built into WordPress, as this allows me to abide by the first rule of web development; Dont reinvent the wheel. This provides me with a solid foundation to start from and get going really quickly. The beauty of using a child theme is the upgrade path; if the base theme gets updated, your changes will remain separate.

After a bit of googling and reading, I settled upon the Thematic theme framework. I chose this as it seemed to offer the best all round features. I was also boosted in confidence by the fact that it came from the same people that built TwentyEleven, the main theme that ships with the current WordPress.

To create a child theme is easy, all it takes is one additional line to your theme declaration in your stylesheet.  The line in question is the Template one. This tells WordPress to extend the theme in the Thematic folder. Obviously you can change this to whatever theme you want to extend. For instance I have extended the TwentyEleven theme over at Briar Rose Beauty, allowing me to provide customisations to the theme without modifying the core codebase.

When you activate your new theme, your stylesheet will be included and the template files [that you have not overridden] from thematic will be used. There is one caveat, no stylesheets are included by default. This is where we crack out our PHP skills and put the following in functions.php

function wp_ghosty_childtheme_stylesheet() {
    $templatedir = get_bloginfo('template_directory');
    $stylesheetdir = get_bloginfo('stylesheet_directory');
}
?>

What we have here is a custom function to include the basic stylesheets that we want from the thematic theme. This is the beauty with thematic, the stylesheets are modular, you can pick and choose what you want. Want a 2 column layout? Then include 2c-l-fixed.css, or 2c-r-fixed.css depending on whether you want left or right column.

Which way is north?

This is where we start to set up compass. First of all make sure that you have it installed. Then we need to initialise a new project within our theme folder. To do this we run the following command.

compass create childtheme --sass-dir "sass" --css-dir "" --javascripts-dir "javascripts" --images-dir "images"

That sets up everything we need to use Compass, then to start coding you run this command from within the folder that was just created.

 compass watch

Full steam ahead

We now have the compas project set up and running inside our WordPress themes folder, and Compass is watching it to compile the stylesheets.  There are a couple things that we want to tweak to get the theme working.

Compass by default creates us the files screen.css, print.css and ie.css, but WordPress expects the file style.css.  Reading some pages on the web someone suggested creating the style.css and using the following at the top of the file to include your Compass styles.

@import "screen.css"

However, I prefer to delete screen.css (and the corresponding source file screen.scss) and create a new file called style.scss in the sass directory.  This then gets compiled to style.css and is one less file for the client to download. Then in the top of your style.scss you need to paste the WordPress theme declaration

/*
Template Name: My Child Theme
Template URI: http://ghosty.co.uk
Description: My awesome theme that extends thematic
Author: Simon Yeldon
Author URI: http://simon.yeldon.co.uk
Template: thematic
*/

This then ends up in the compiled style.css and allows WordPress to use your theme

Thats it, you have a theme that you can control the stylesheets using Compass.

One other thing that I do is split up the template using Compasses partials feature.  This allows you to separate logical units. The sassn folder structure that I end up with for my theme is this.

• sass
  • partials
    • _variables.scss
    • _imports.scss
    • _header.scss
    • _content.scss
    • _footer.scss
  • style.scss

I can then include the partials in the style.scss file and keep everything logically separate.  Its a nice idea to keep the variables and the imports in their own files for maintainability.