Design A WordPress Theme: Part 1, The Layout

This is the first part in a series called “Design a WordPress Theme“. Here is a list of all the parts in this series.

  1. Design a WordPress Theme: Designing the Layout (currently reading)
  2. Design a WordPress Theme: Slice the PSD
  3. Design a WordPress Theme: HTML/CSS
  4. Design a WordPress Theme: Convert HTML/CSS to a WordPress Theme
  5. Design a WordPress Theme: Advanced Code

Designing for WordPress can be quite an experience as you take your thoughts from a concept, to a PSD to a fully functional theme. I have been using and designing/developing with WordPress for over 3 years now and I thought I would do my part and share my process with you.

Here is my contribution of taking a theme concept through its development stages to a fully functional WordPress theme.

The Concept

Many times you will be hard pressed to NOT find a theme already available in a particular niché for WordPress. The platform is so widely used that virtually everything has been done with it, well almost everything. But have no fear as there is always room for more.

The first thing you need to do while thinking up a concept is try and not search for similar themes. This will send you on a downward spiral as you realize there are literally dozens, even hundreds, of similar themes and you will end up losing hope for creating one altogether. If there is one thing the WordPress community has shown me it is that they always like fresh ideas.

So start visualizing your concept and don’t even bother to find out if someone has done something similar. Chances are they haven’t. Your idea will be original as long as you don’t influence yourself beforehand.

The Layout

I usually start by designing my layout on paper so that I can get a general idea of where I’m headed with it, this particular one was actually done by my wife. Yeah, she rocks!

Style Theme wire frame

Your sketch does not have to be an exact replica of how you imagine your theme, as you obviously cannot get those pixel perfect measurements and other finer details like icons etc… So grab some paper, jot down the most important elements of your theme and start creating a rough wire frame structure.

Don’t even bother with rounded corners, shadows, text etc… right now, the important part is to get your ideas on paper as best as you can.

How do I decide what are the most important elements?

Well, first of all you need to decide who is your customer. For my example, I wanted it to be for a fashion/style/celebrity blogger. So I decided that these would be my most basic content points –

  • Logo in the center, ads on the side
  • Big images on the top left and right, with links down the center
  • A central ad area below the top content, wrapped with more content and images
  • A footer with links

You can revise your sketch as much as you like, or use it as a base and start getting the theme done in Photoshop (I actually prefer to just start hacking it together with raw HTML/CSS). Either way, it’s always a good step to have something to refer too during the design phase and the easiest way to accomplish that is with your sketch.

The Layout Process

I could write a whole lot of details about the process you can take for positioning elements, adding gradients and various keyboard shortcuts to make you a super key master of Photoshop, but I won’t. As there are multiple tutorials out there that show you how you do that already.

Instead, I’ll just take you on a journey and show you a step by step pictorial guide. So here are the screenshots of the process I took my theme concept through –

Fashion_1
Get the title in first.
Fashion_2
Added the navigation, Advertisment, Subscribe and Search areas.
Fashion_3
Image area placements, and the links in the center, go in.
Fashion_4
Lower content areas with an Advertisement module in the middle
Fashion_5
Finally the footer and the bottom navigation go in.
Fashion_6
Starting from the top, let's style the navigation, Ads, subscribe and the search area.
Fashion_7
Add more imagery, hmm... looks like the right area could be more interactive, so let's make it a tabbed area!
Fashion_8
More imagery...
Fashion_9
The footer looks much better now, don't you think?
Fashion_10
Some final font and image adjustments and we're done with the layout phase of theme development!

So there you have it. A slightly polished wire frame from which we can now use a guide* for building the HTML/CSS bit of the theme for final conversion over into a WordPress theme.

But first…

We actually need to get it ready for the HTML/CSS part.

That’s in Part 2 which you can read here – Slicing a PSD.

*If you are going to be designing for a client you might want to spend a few more hours to really get it looking spic and span, since this was for me to use a reference I left a few styling parts out (namely the footer).

3 thoughts on “Design A WordPress Theme: Part 1, The Layout

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.