Plan your theme first to get a much better end result

The biggest piece of advice I can give you is NOT to dive into WordPress, fire up your page builder and start designing. If you skip the vital research and planning steps, you’ll end up with an inconsistent theme that doesn’t sell well.

Why do people buy themes?

It’s important to remember that people buy child themes or layout packs for two reasons:

• To save time
• Because they lack professional design skills, either in terms of graphic design ability or technical web design skills.

If you create a theme or design that lacks cohesion and attention to detail, you may find yourself receiving complaints and failing to generate repeat purchases.

Whenever I have been tempted to skip the planning stage because I have a new design in mind that I am burning to create, invariably I find myself having to go back to the beginning of the process I’m about to outline to you.

We’ve already talked about choosing a niche. At this stage, you want to be getting even more specific and designing with an ideal client in mind. When they view your demo site, you want them to be able to picture your theme as the perfect solution – like a jacket they can slip on knowing that it will fit like a glove … as if it was created with them in mind.

Visual Inspiration

Branding matters. When I’m planning a new theme, my visual research starts with compiling a mood board, over time, on Pinterest. I follow a specific set of guidelines every time, which you can read about here.

From the Pinterest board, I then move into the brand design phase. Even if I am creating a web design solely for sale, I still create brand guidelines to ensure that I have a clear road map to keep me on track when I’m designing every single page.

It also gives me the foundation for my Theme Options and Customizer settings areas in terms of typography, font size, and colourways.

Download my free Photoshop brand guide template

Create a Site Plan

I like to start with a site plan, which can be as simple as a list of pages and how they link together. In addition, I like to sketch out the flow and plan the calls to action on every page.

It’s important to plan your menu to really show off your theme. Unlike a client site, your theme’s menu needs to have direct links to any hidden pages as well as the pages you wouldn’t usually find in the main menu. eg. Links to your single post layout and to an archive or category page.

Wireframe Your Home Page

Wireframing simply means planning out your home page visually. It doesn’t have to be complicated.

I start by grabbing a pencil and paper and sketch out the various blocks of the home page. If it’s a long page, sometimes I tape two pieces of A4 paper together. See what I mean about low tech?

If you prefer digital, there are lots of wireframing tools including Adobe XD, Balsamiq, and Mockflow. But my preferred tool is Figma.

Not only can you use it for wireframing (there are lots of free wireframe templates you can download), it’s the perfect free tool for actually building out your home page before moving into WordPress. I tend to roughly sketch my wireframe with a pen and paper, then move into Figma, to set up my fonts, colours, and H tag sizes, in keeping with my brand guide.

Some of you will feel confident enough to move straight into WordPress and skip the Figma mock-up stage and that’s fine, as long as you are sticking to your brand guide. But I love having the freedom to play on a canvas, without worrying about grids, sections, and rows. I find I’m more likely to create an original design when I work with a tool like Figma.

Not only is Figma a design tool, but it also creates vectors ready to export as png or SVG files, as well as creating any CSS you might need to swipe.