This post is one in the series on creating a Wordpress Theme, including design aspects, mock-up to code, WordPress’s PHP and debugging. This series assumes you know a little bit… If you’re still clueless after the series, contact me and I’ll explain further for you.
A crucial part of the design process is planning - both on paper and in Photoshop. For a WordPress theme, a mockup is even more important, as the content can change at such a rapid pace.
What does your Blog Need?
Every blog needs a content space, but what else do you need? Sure, three sidebars would be nice, and you could use heaps of widgets and plugins, but do you need three? Can you make do with two, or even one? As you can see, Pixl’s current theme doesn’t have any sidebars.
Once you’ve decided on what your blog needs, you should decide where it needs these elements. Go on, decide what you need, then come back and continue reading. Yea, go on, I’ll wait for you.
First on Paper…
Yes. I know you’re itching for your keyboard and mouse, but don’t touch them!. Get some paper and a pencil. And you will need a ruler, too. If you can help it, use something larger than A4, the standard printing paper.
Rule out your body area, whether it is fluid, fixed - left, right or centred. Then, working form the top down, fill in the seperate elements of your page - the header, navigation, sidebars (if you have any!), content. Just the boxes for now, even if the element does not have a border.
Lastly, draft in a headline for a post or two, some basic content, the date - whatever your blog needs.
…Then in Photoshop
Yes, go on. Open Photoshop. I know you’ve wanted to all this time.
Just as before on paper, start with the body outline - but use Photoshop’s guides. Guides are created by dragging from the ruler onto the canvas. For the divisions between elements (such as the header, content), create more guides, but this time dragging from the horizontal ruler above the canvas.