This is the first part in a series called “Design a WordPress Theme“. Here is a list of all the parts in this series.
- Design a WordPress Theme: Designing the Layout (currently reading)
- Design a WordPress Theme: Slice the PSD
- Design a WordPress Theme: HTML/CSS
- Design a WordPress Theme: Convert HTML/CSS to a WordPress Theme
- 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.
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.
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!
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 –
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.
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).