WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

Designing & Building a WordPress Theme: My Step by Step Process

Last Updated on June 1st, 2021

Published on April 11th, 2012

Share This Article

I am launching my own theme company ( hopefully at the end of this month ) called ThemeFurnace, so over the last few months I have been building a lot of themes for public release so have had to get my theme building process together into some sort of system. This has helped me build each theme quicker than the last and I now have a process for the future as I aim to be releasing at least one new theme per month from now on. In this post Im going to talk about how I design and code a theme from scratch. For more articles about building custom WordPress themes, see the ultimate theme development kit.

Designing the Theme

I use Photoshop for my mockups – for each theme I will generally design the homepage first after laying some sort of grid, usually conforming to 960 pixels wide. You can download some free pre-made grids here if needed. Once the homepage is done I will design a single page view, then a category / archives page. If the theme has any special features like custom post-types or galleries etc I will also do them.

Something Ive started doing lately is building up a folder full of UI kits and other bits and pieces that I can re-use in my designs. It also helps to build up an array of icons and social media logos and most themes thesedays will also use  them. I also joined up to this Layoutlab the other day which provides some handy .PSDs for download to help you with wireframes and mockups.

Building the HTML / CSS

Once Im happy with the design, its time to save out any images that are needed in the design – the logo, icons, background images etc I save them all as .PNGs – I dont really bother using .GIFs any more and I just use .JPGs for photos. I will build the HTML and CSS – browser testing as I go along. I also split my CSS up into sections like so :

  • Reset – Always use a reset so you are working from a consistent starting point
  • Defaults – These are the default styles that WordPress needs
  • Headings – All the heading tag styling – H1, H2, H3 etc
  • Links – All the link styling
  • Theme Layout – The basic framework for the site
  • Inside Layout – Any styles just used on interior pages
  • Sidebar – Sidebar Styles
  • Slider – Any Styling for Sliders
  • Nav – The menu styles
  • Footer – The footer styles
  • Widgets – Any custom widgets and styling for default widgets like text and calendar

I also have a folder for any jQuery plugins that I need for the theme.

Installing the Theme & Adding Content

When the HTML and CSS is done, I will add the theme name to the top of the stylesheet with other info needed, which is what will show up when someone is activating your theme. Like so :

Theme Name: Busine
Description: A Clean and Tidy Business Theme
Author: Oliver Dale
License: GNU General Public License version 3.0
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Version: 0.1

Also will create a custom graphic for the theme called “screenshot.png” and save in the root theme folder and upload to the development server. You can set up a test environment locally if you prefer ( see our guide here ) but I’ve always worked on a live server when building themes.

Once the theme is uploaded and activated I add some starter content – a couple of blog posts with featured images using Lorem Ipsum, some posts for the custom post types if needed and a couple of comments.

Creating the Theme Templates

I have my own default blank theme I use as a starting point for each theme – this includes things like a custom portfolio post type, a functions.php file with some starter things added ( featured image sizes, theme options include, other custom functions ) , I also like to include multiple sidebars so people can use different ones for pages and posts and I also include my theme options framework – ( I use a modified version of the UpThemes Framework which you can download for free ).

Article Continues Below

Here is how a typical theme looks :

Once the theme in installed – I will open a copy of HTML template and go through replacing code, starting with the header.php file. Then I will do the index.php, then sidebar and then footer. That will usually make the basic theme look like my HTML and I can move on to other files like the category and archives pages. The last thing I do is the comments and any final tweaks around the theme.


The final part is testing the theme – you can use the WordPress theme test unit to make sure all your basic styling is there and nothing breaks your theme’s layout. Usually at this point there might be a few modicifcations to the stylesheet to make everything good. The WordPress theme check plugin is another final test you can use – this will warn you of any deprcated functions you might have used and any errors or things you have left out of your theme that are required.


I’d like to hear your thoughts on this – what’s your process look like ? Any tips or tricks you have picked up to make the process better ?

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift in 2010.