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.
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.
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.
Taking my current portfolio’s theme as an example, lets take a look at how to solve this.
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.
Next, to get us a little more organised, go ahead and delete the following files within your finder:
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
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:
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.
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.