Scratch

Scratch, A WordPress Theme Generator

Scratch is a Yeoman Generator that will scaffold a WordPress theme based on _s and Foundation. The goal of this project is to be a starting point. After generating a new theme from Scratch, you’ll be able to compile Sass, concat js, and minify to create a production package of your theme.

Setup

Install Yeoman

Install Grunt.js

Install Bower

Install generator-scratch

Lot’s of code will happen. This may take a few minutes. Go make a beverage! When it’s done you can use the generator like so… Navigate to your development WordPress theme folder [change path as needed]:

Run the generator

You will be prompted with a few basic questions to help the setup get started. Once you get past the description question you will again see lots of code. That’s grunt and bower doing their thing. It’s also time to drink your beverage!

Navigate to your new theme:

In the root of your theme, run the following:

Development

In your wp-content/themes folder you will now have a folder with the name of your theme which is setup with the basics to get a theme off the ground quickly. In the root of your newly created theme you’ll have the following grunt tasks you can run:

Production

When you’re done and ready to go live you’ll need to minify your assets and whatnot. You can do this by using:

This will minify all your assets and copy the theme to a dist/ directory then compresses to a .zip.

npm & GitHub

8 thoughts on “Scratch, A WordPress Theme Generator

  1. This is something I would like to use going forward, but I continual get a compiling error:

    Uncaught SyntaxError: Unexpected token import

    this coming from the concatenated Foundation.js. Think it may have something to do with ES6 module import not being supported?? I’m running node v6.11.2.

    1. Hey @badger816,

      Sorry about that. This generator is way out of date and I need to update it. I’ll put it on my to-do list.

      1. Ok, thanks for the quick reply!

        I just commented out the Foundation stuff in grunt/concat.js and added an already minified version of Foundation.js to the assets folder for quick work around.

          1. Hey @badger816,

            I pushed the latest of what I’m working on if you want to mess around with it. https://github.com/mrdink/scratch

            A few things that are different:

            – using latest Foundation
            – removed bower and using only npm for dependencies
            – added minimal styling just for example of how to build structural columns
            – moved all dev files into a src dir
            – added a few theme options for color and boxed/fluid layout

            Let me know what you think! There’s a few things i’m working on before I port it to the generator.

Leave a Reply