Design/build: WordPress themes

from design prototype to theme : how to get started

the tutorial

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 […]

part 1: the design prototype

We take a look at the design in hand, the prototype and its markup. Before you can work with this design, preview in browser, check the responsive layouts and menu toggles. Have a look at the files for subfolders and additional files, such as images. Then take a closer look at the markup to know […]

part 2: the vanilla theme

Let’s have a look at the vanilla theme files which will form basis for the new theme build and do one first comparison of code. Instead of the page-by-page markup, the theme code now splits our page elements across multiple files.

part 3: the content + structure

Before you can begin your theme build, your website has to have its content. This goes with our working method of ‘content out’ and has very practical reasons for the theme build. As webpages on our WordPress site are presented via settings, content in database and theme settings – you’ll have to prepare your website, […]

part 5: theme build, the templates

The final step is now the longest and most involved – to compare all code and ensure it is the same structure across all files, resulting in the same mark up as the prototype. The video will show you how to start and cover the core files ~ to complete the build, you’ll have to […]