Compass and Wordpress
Over the past few months I’ve been doing an awful lot of Wordpress theme development. I’ve also being doing a lot of Sass/Compass development. In this short post I’m going to show you my config.rb set up and my style.scss set up.
Chris Coyier has a pretty good article on this very thing. My way is slightly different and perhaps only solves my specific problem—which I’ll get into forthwith.
Isn’t really a problem but more a case of the way we go about things at The Fold. Like most people we’ve realised that GIT is the way to go when it comes to source control so we keep all of Wordpress stuff in GIT using submodules and what-have-you. As a part of that process we’ve created a Wordpress Boilerplate Git Repo which we fork for every new project.
This is where the actual problem is: I wanted to be able to automate a some Sass/Compass stuff based on the folder in which my theme exists.
Consider the following Folder structure:
This is a common Wordpress folder setup. So whenever we fork this repo we’ll change the theme folder from
So far so good.
Except that this is what my
config.rb file looks like: config.rb file used in Wordpress theme dev.
I got annoyed with having to change my
config.rb file each time I renamed my theme folder. Another annoyance was having to update the theme name used in my
style.scss comment (which is required for Wordpress Themes to be recognised by the WP system).
Boom. Fixed both problems with the power of ruby. new config.rb and style.scss with automation.
The first file is my modified
config.rb file. The first line of that file will work out the name of the folder that
config.rb lives in—which also happens to be theme folder (see the folder structure image)—and will use it as the basis of the Compass
At the bottom of
config.rb I’m defining a new Sass function called
wp_theme_name(). This simply outputs the current theme folder name. Where it get’s useful is in the comment at the top of the
I’ve just saved at least 13 seconds off each new project—and no doubt yours too!