Everyone and their cats are talking about Preprocessors these days. They’re awesome. Now think about WordPress, arguably the number one blogging and CMS platform out there. Let’s take a look at how to combine the two within a Compass project and using Codekit.

The Situation

If you have a look at the WordPress Codex you can see that each theme needs a style.css file which has a comment at the top that provides information for WordPress to use in order to define the theme itself.

Each theme needs to have the following at the top of their style.css file so that the theme registers with WordPress

Now, when you compile Sass, instead of keeping any comments that you have in your .scss files, it will go ahead and remove them. Infuriating for WordPress, I know, but lets look at how can we solve this in a painless way whilst also taking into consideration speed and performance.

The Solution

Taking my current portfolio’s theme as an example, lets take a look at how to solve this.

The solution for the project shown in Codekit

The above is what we will be striving for. The idea behind this is that we will have a lot of smaller chunks of code within modular files which aren’t processed; instead they will all be linked into the style.scss file without using any HTTP requests. This is a pretty cool perk of Sass. Think of it as a <?php include(""); ?> but for CSS. Afterwards, we will then process and compress this into the style.css file, which will have the comment needed for WordPress to define the theme.

So, how do we get there?

First, we need to get setup in Codekit so we can start compiling Sass. Let’s go ahead and create a Compass project by clicking the + in the bottom left of the app. Then, fill in the fields to match what I’ve done above.

Create a new Compass Project screen within Codekit

Next, to get us a little more organised, go ahead and delete the following files within your finder: ie.scss and print.scss. You may also need to delete the corresponding .css files for these too.

Next, rename the screen.scss file to style.scss and remove the screen.css file that has been made redundent by changing the .scss filename. Now, we need to compile our new file. Let’s go into Codekit, click the style.scss file and then in the bottom right corner of Codekit, hit the compile button and then refresh the project. This will create the .css equivalent of our file.

The reason for doing this is because we want to keep performance at a top priority, therefore we don’t want to be compiling multiple files and using them all, instead we need only compile one (the style.scss file in this case) and then add those smaller chunks of code into it, just like I demonstrated with my portfolio’s Codekit project.

Onto the config

The config.rb file create from the Compass Project in Codekit

Moving onto the next step, go into your project files within the Finder app and open up the config.rb file using your preferred code editor. Now, with the image above as a reference, fill in the file with the following content:

http_path = "/"
css_dir = "/"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed
environment = :development

To finish off this step, save the newly structured file and refresh codekit again.

Comments that count

We’re nearly there, only one last step to go.

An example of the style.scss file

Within your style.scss file, we need to add in the comment required by WordPress. Heres a little template for you:

/*!
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

You may have noticed that I’ve added an asterisk just after the opening comment tag. This is Codekit specific technique that lets you tell Codekit – “Hey, I don’t want you to remove that comment when you compile, bro.” Pretty neat huh!

That’s it, j’ai fini.

We’ve allowed ourselves the ability to use both WordPress and Sass in tandem of one another whilst also keeping our code clean and performance-driven. Give yourself a pat on the back. If you’d like to take a closer inspection of my current portfolio theme then you can do so on Github. It’s filed under the DBAD Public Licensed so go crazy.

I hope this quick tutorial will help you with your workflow and future endeavours into the wonderful world of WordPress. The way I see it is if I can help just one person then its worth it.

L.W