How to Build a WordPress Theme from Scratch: Part 1

One of the most common beginner comments I see around the interwebs regarding WordPress is “How do I create a theme” or “I have HTML/CSS knowledge and want to build my own theme”. In this series I’m going to show you my process for how I build themes using _s, Grunt, Sass, and Browsersync.

Let’s get started

I’m going to assume that you have some knowledge of development (i.e. HTML/CSS/PHP/JS). In Part 1 we’re going to go over how to create, organize, and setup your theme for development.

Underscores is an ultra-minimal theme meant to be a starting point for your theme. There are many ways to generate an _s theme but the easiest way is to go to their site and use the tool.

For this tutorial, let’s use the theme name “Scratch”. Head over to underscores.me and type “Scratch” into the Theme Name field. This will generate a .zip package for you. Unzip the package to the wp-content/themes/ directory in your WordPress site.

Your directory structure should look like the following:

Scratch directory structure
Scratch directory structure

Organization

At this point, I like to delete anything that won’t be used and move files to a more organized structure. This can be subjective because everything in the package can be used but since I’m showing you my process, lets delete and move the following files.

  1. Delete layouts, .jscsrc, and .jshintignore.
  2. Create a directory called assets and move the js directory into it.
  3. Create the following directories within assets: css, fonts, img, and sass.

Your directories should now look like the following:

Since we’ve moved the js files, we’ll need to update where they’re called. Open functions.php and edit lines 119-121 to the following:

Next open /inc/customizer.php and edit line 24 to the following:

At this point your theme should look like the following:

Scratch screenshot

Tweaks

There are a few extra things you can do like update details in your style.css, add your own screenshot.png, and update details in the readme.txt but for this tutorial, I’ll leave that up to you.

Download Files

Up Next

So far we have an organized theme in which to start building. In Part 2 I’ll show you how to add Grunt to the mix to automate tasks like compiling Sass, generating a RTL stylesheet, and concatenating Javascript.

Leave a Reply