Using Sass for WordPress Theme Development

This talk was given at the NY Sass/Agile Design Meetup at Pivotal Labs on October 16, 2012

Workflow: A problem

Hello all, I’m Jean-Pierre Barthelemy. I’m the CEO and Creative Director of Zybra Group, a web design firm that focuses on WordPress development.

Designing a WordPress theme usually starts out on a local development server.

1 min               Creating the database
1 min               Download and unzip the files
5 mins             The famous 5-minute install.
1 min               Updates.
2 mins             Delete dummy content: posts, pages, comments, links.
1 min               Delete Hello Dolly plugin.
1 min               Adjust settings: permalinks and reading.
2 mins             Create or import sample content

 

Just setting up a new WordPress instance can take 15 minutes. This may not seem like a lot but imagine you had to do this just four times in a day. That’s an hour spent unnecessarily.

Once the install is complete, now I can begin the theme design. First, I come up with some ideas on paper, then flesh it out in Photoshop. Then I chop it up into images and build some HTML/CSS pages. Then I add PhP tags to the HTML documents to make them work with WordPress.

I love Sass because it allows me to minimize the amount of repetition used when writing CSS, enabling me to focus more on the creative process. But is that really enough? Is CSS really the only part that slows us down?

To me Sass is more than just a set of pre-processing tools, it represents a philosophy that code can be written quickly and simply. I asked myself how I could approach the WordPress theme development process differently? What lessons could I learn from the principles that guided the development of Sass?

In the next 5 minutes I’m going to share with you how I use this philosophy to guide my WordPress theme development process.

Speeding it up

I’ve taken several steps to speed up my backend development:

For starters, I use a WordPress Network to build my sites. This way, from one login, I can dynamically switch between sites. And creating a new site requires only two strings: site name and administrator’s email address. I also wrote a plugin which automatically filters out all the fluff I want to delete. Now instead of spending 15 minutes installing each site, I can have a pristine WordPress site in under 5 seconds. Using a network also means that I don’t have duplicate WordPress core files. There are plugins available that allow us to quickly clone WordPress sites but I try to minimize my use of plugins as much as possible.

Next, I decided to build a theme framework. This allows me to have a stable core for all of my projects that serves as the launching point for the design layer. My framework only does what is common to every single WordPress site I create. It has zero CSS and only provides a semantic HTML5 framework for creating a blog and pages.

The added functionality of custom post types, custom meta boxes and custom taxonomies is done in the child themes only. My child themes start out with helper functions. Rather than creating some large API for generating sidebars and endless page templates I create them individually, as needed. As bits of code become more useful they are added to my Parent theme or First-Child theme to become readily available in future designs.

Design Layer

For my front-end development I wanted a way to be able to develop my own toolbox of styles, so I started using Compass.

Compass functions as an extension of Sass by offering things like patterns and mixins that make writing Sass even easier. It takes the guesswork out of writing the bits of code that we need, such as resets, grids and buttons.

Extending Compass

What it doesn’t do is handle some of the advanced math that is responsible for creating responsive layouts and establishing visual patterns. To address this I am creating an extension of Compass that moves beyond CSS and addresses visual design.

When you use Sass you can define a color palette to work from. You then can create additional colors by defining their mathematical relationship to one another, rather than by setting hex values. For example, a light shade of blue will be defined as 20% brighter than the predefined shade of blue in your color palette.

The extension that I am building uses equations to suggest a full palette of colors that work well together, based on the predefined color palette that is established in Sass. What this does is take some of the guesswork out of achieving color harmony, it also speeds up the design process because a change to one color creates a ripple effect, thus changing the entire document.

This is about spending less time wrestling with code and instead getting right to the creative part. Being able to change things, intelligently and comprehensively is one of the things that makes this possible. It creates dynamic flexibility.

CSS First Design

Which leads me to my final point. We’ve discussed all the ways that I have sped up the development process, by using Compass and writing CSS more quickly. Now that my backend development is nearly instantaneous, I have more time for front end creativity. Once I apply Compass and my extension, front end development becomes much faster as well.

Back in the day (last week) I used to go from Photoshop, to HTML, to PhP, to debugging. Now that I have achieved so much increased efficiency, it only makes sense to shorten this process as well. Why bother with Photoshop, when writing an actual CSS document is so much easier? Why not go straight to Sass to design the front end and cut the process in half?

Comments 2

  1. Ray Shah

    Hi Jean-Pierre,

    Can you cite some code examples, or better still do a screencast that illustrates what you are doing here?

    1. Post
      Author
      Jean-Pierre

      Absolutely, I’m going to do a screencast in a few days once I’ve finished up a few other projects.
      As for code examples I’ll have the entire extension open sourced. Did you have a specific question?

Leave a Reply

Your email address will not be published. Required fields are marked *