Dontcom

LORDE - Royals (by LordeMusic)

Not just great music, great cinema too.

I’m quite into this song. Even more so now that I’ve seen the video. An awesome, understated snapshot of being a bored teenager. I guess… it’s been a while since I was a teenager.

The Modern Webmonkey — Codemana 2013

Here I am prattling on about tools for the modern front end developer. Covered in the talk are the following tools:

Source: youtube.com

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.

The Problem…

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.

The Solution

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 TheFold to ClientName.

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 http_path var.

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 style.scss file.

I’ve just saved at least 13 seconds off each new project—and no doubt yours too!