I was happy to come across a tweet from @WPwatercooler the other day announcing a new starter theme produced by Zeek Interactive that incorporates ZURB Foundation. This is something that I’ve thought would be interesting to do, but I haven’t gotten around to trying to do it myself. I have only ever dealt with child themes, but have known for a while that to make things the way I want, full blown theme development is what I need. With ‘Heisenberg’, I now see a clear way to getting me started on my own themes.

To get going, start by following the directions laid out by Zeek in their introductory post about Heisenberg:

• Ensure you have Node.js, Sass, bower and gulp installed.
• Clone the heisenberg starter theme from github
• Rename the parent directory to whatever your theme is called
• Change references to ‘heisenberg’ in the gulpfile.js
• Change all other references to heisenberg throughout the project, as outlined on the _s project (Heisenberg is based on _s, pronounced ‘underscores’)
• Install all bower components (using bower)
• Install required packages (using npm)

All of this has been neatly packed into a simple script which can be run with one argument – the name of your new theme.

 

Compiling the CSS

Compiling the Sass into CSS gave me an error out of the box

[22:48:21] gulp-ruby-sass stderr: OptionParser::InvalidOption: invalid option: --sourcemap=file Use --trace for backtrace.

To get around this I had to add the sourcemap parameter to the call to the sass library in my the styles task. It now reads as:

return sass('assets/sass/', {
  style: 'expanded',
  lineNumbers: true,
  container: 'stevetheme',
  sourcemap: true
})

After this addition, simply running gulp, or gulp styles compiles my Sass into CSS

Summary

Overall, this was a fairly simple and straightforward process, it only took me a couple of hours to get my head around things and iron out a few minor problems. I can see myself using this process from all of my themes, which has me pretty excited. Child themes can be simple, but inevitably need a fair bit of customization. When you have no control over the parent theme it just feels wrong to do this though. Full marks to Zeek for putting this starter theme together, I can’t wait to get my WordPress sites all Foundation-y

Oh, and stay tuned for AustralianSteve.com changing to a new theme shortly!