Design/build: WordPress themes

from design prototype to theme : how to get started

Tutorial files

This tutorial is intended to walk you through the transfer of a given design to a WordPress theme. Please note that there is no audio and you might want to pause certain screens as I’ve tried to keep the length down and file size light.

To work along, I’ve prepared the files used in the videos as source files for you to download — and you are most welcome to keep using the vanilla theme on your own projects, of course :) open source \m/

↓ download prototype files (HTML/CSS)
The design prototype files, including 3 HTML sample pages and relating scripts

↓ download vanilla theme (PHP/CSS)

The theme files for the vanilla theme named ‘eyestyle’

demo of our vanilla theme

To show you what we’ll be using for the tutorial, I’ve set up a default WP site ~ keeping the very same content as given by default and using the vanilla theme for design. This shows you how your new WP site will look when you first install it and active this theme. Have a look!

This means the site includes only a single page, one post and category and a sample comment. The sidebar features the default example links.


The term “vanilla” is used in the technical field to express the state of something as ‘plain’ or ‘default’. Applied to hardware as well as software, a vanilla version lacks refinement or customisation and is unmodified.

A vanilla WordPress theme is one that gives you the skeleton of the site, including only the core code which you will use as basis/foundation to build upon for your new theme. Well, that’s the theory anyway… If you search for Vanilla themes online, you will come across various degrees of complexity. As a newbie to WP, some might be too fragmented to start with. When you’re familiar with theme building, you will find those easier to understand and explore. Once you’re on your way – which avenue you choose to take for your theme builds will be up to. Many developers prefer a skeleton framework and find that most productive. Others thrive in complex systems and prefer a more specific starting point. The most important aspect for all remains to deliver a fast and easy-to-use website ;)

April 28th, 2020 by prisca