SASS/SCSS and Grunt are fantastic tools to organize and automatize css development. With some easy adjustments you can even make grunt to compile your css for multiple color schemes.

Build your base SASS color scheme

The easiest way to prepare your files for auto-compiling SASS color schemes is to create a color variable for every color you want to change in your schemes. You should do that in a separate section of your code, so you can easily copy all color variables and create a new color scheme. The only thing you have to think of is to add the default-attribute to the variables, so they can be overridden. I usually and up wit a section like that in my styles:

 * Default colors

$light: #fafaf9 !default;
$dark: #111111 !default;

$color-1: #ef4f47 !default;
$color-2: #75d9c6 !default;
$color-3: #ffe851 !default;

Preparing additional SASS color schemes

The next step is to create all color scheme files. Create a folder called schemes or something like that put a file with the name color-scheme-1.scss in it. This file should define your color variables again (without the default-attribute) and include all other styles after the variables.

 * Color scheme 1
$light: #efefef;
$dark: #222;

$color-1: red;
$color-2: green;
$color-3: blue;

@import "../style";

Now you can create as much SASS color scheme files as you want, just repeat this pattern in every scheme.

Automated SASS color scheme Grunt task

Finally its time to setup your Grunt tasks. I assume you know how to compile SASS/SCSS via grunt, so the only thing to do is to add a sass-task for every scheme in you grunt-file:

sass: {
    dev: {
        src: 'scss/style.scss',
        dest: 'style.css'
    'color-scheme-1': {
        src: 'scss/schemes/color-scheme-1.scss',
        dest: 'css/color-scheme-1.css'
    'color-scheme-2': {
        src: 'scss/schemes/color-scheme-2.scss',
        dest: 'css/color-scheme-2.css'

Now run

grunt sass:color-scheme-1

and you get a color-scheme-1.css file in your css-directory. If you include this file instead of your default style.css, you will get your layout in the schemes colors. Auto generate all schemes with

grunt sass

This post describes a super simple and time saving Yeoman workflow to build WordPress themes. To make this post work for you, you should have a basic understanding of nodejs, nodes package manager npm, Yeoman workflows, Grunt and SASS/SCSS. Ones you have all up and running, you will create a Yeoman WordPress starter theme in no time. But it is not only a theme it comes with a bunch of features:

  • A fully funtional WordPress theme with a working grunt development environment.
  • The generated theme is tested against the Theme check and Theme Forest check plugins and runs without errors, warnings or recommendations, is visually tested with Testdata for the theme unit test, runs without errors or warnings in debug mode and follows the WordPress coding standards a 100%
  • A pre-filled HTML documentation

Getting started

Getting started with nodejs, npm and Yeoman is well described elsewhere, so instead of repeating all of it you will get some links that worked for me. To go on, you should have the current version of nodejs, npm and yeoman running. Than you can easily install our generator from the npm registry. Note that on some setups you will have to run this command with super-user permissions:

npm install -g generator-wp-theme

Now you have installed the generator you can generate your first starter theme. As you might want to test it in your WordPress development environment, you should go to a running WordPress installations themes directory and run:

yo wp-theme

Thats it! Just answer some simple questions in the terminal and the installation should run through without errors and installing the theme plus all needed local node modules.

Developing with the Yeoman WordPress theme

First of all the generated starter theme provides you with a solid base of WordPress theme templates, following among others WordPress theme directory and ThemeForest standard requirements. The functions.php file sets your theme up to support all required functions like a custom header and background. All should be ready to make your adjustments to build a perfect theme.


The themes style.css file is compiled from a bunch of SCSS-files. To get a layout grid and some nice mixins the bourbon and neat libraries are build in. The SCSS-file names should be self-explaining, however a short overview in including order follows:

Includes the normalizing css.
Includes the great bourbon mixin library.
Defines the main colors of the themes and basic HTML-element styling.
Defines and includes the base setup for the themes grid. The default grid is bourbons neat.
Defines all fonts, typography related mixins and HTML-element styles. Defines even some font-size variables.
Here should be placed the basic mixins and placeholders for the theme.
Defines some basic WordPress classes, like sticky, alignleft or bypostauthor.
Contains the header styles.
Contains the navigation styles.
Contains the basic content styles for posts and pages.
Extends the content styling with styling for multiple WordPress post formats.
Contains the footer styles.

Grunt tasks

The generated Yeoman WordPress theme provides a working Grunt configuration. All Grunt related assets like the gruntfile.js and the package.js are placed in the grunt directory. The Yeoman generator has already setup Grunt for the theme and installed all node modules in grunt/node_modules. If you want to install manually, go to the grunt directory and run

npm install --save-dev

All Grunt tasks are called from the grunt directory. You can manage the following available tasks, by running these commands:

Is running the default task-list, which is the same as running grunt jshintgrunt uglify and grunt sass.
grunt jshint
Checks the JavaScript files and gives you some hints.
grunt uglify
Takes the JavaScript files and concatenates and minifies it to one file: js/scripts.min.js, which is included in the theme.
grunt sass:dev
Is compiling all the scss files to one expanded style.css in the themes root directory.
grunt sass:prod
Is compiling all the scss files to one compressed style.css in the themes root directory.
grunt watch
Watches the scss and js files for changes and runs the above tasks automatically, plus giving you a cross-OS desktop notice on success.
grunt dist
Runs grunt uglify and grunt sass:prod, takes all the production relevant theme files and places them in the dist directory under the themes root. Now the dist directory contains a production ready theme, which can be uploaded to a live server.
grunt phpcs
Requires PHP CodeSniffer with WordPress standard installed in the development environment.
Checks the themes php files against the WordPress coding standards.


In case you want to upload your theme to some marketplace or theme directory, Yeoman WordPress theme generator even creates a HTML-documentation for you. The documentation is based on the Theme forrest documentation template It’s located in the doc directory and already covers some base information about your theme. You just have to complete it with your specific information and your theme is documented as well.

Now, make themes!

With the Yeoman WordPress theme generator (generator-wp-grunted-theme), you should get everything you need, to build great themes. Be welcome to let me know if you have done so, or even better if you want to add a important task, find a bug or have an improvement idea.