WordPress Theme Design Part 1: Best practices when designing a new theme

By: Chris Murphy

Designing themes for WordPress is something that I've fumbled through in the past year. It is a fun and engaging exercise that challenged me in terms of how I look at usable design and how it's implemented. My blog is and will always be a sort of playground and proof of concept for my learning experiences; as such, I thought I would share a series of lessons that I learned over the course of the past year that may help others develop better WordPress themes.

An issue facing developers currently is compatibility. Older WordPress themes are becoming less and less popular, which is not necessarily due to design so much as the lack of support for newer features such as "Widgets", emerging "Plug-ins", and the big one: deprecated/unsupported template tags.

The reality is that most older WordPress themes (older than v2.x) can be upgraded to be compatible with newer versions of the WordPress software, but it does take a little effort to figure out what works and what doesn’t — sometimes creating a new theme is far more attractive than having to parse through old code. I hate having to revisit old code — yes, I am one of those people — but since I’m developing a theme that I want to share with people, I want to ensure they get the best out of what I can develop. In order to do that I needed to make sure my WordPress themes are as future proof and flexible as I can make them.

For the first part in this series, I’m going to focus on the "K.I.S.S" principle.

Now, I know there are articles galore which expound on this principle, but when it comes to WordPress or most weblog systems, designers tend to throw it right out the window. Complexity does not always equate to good visual design.

To kick off this series, I’m going to focus on a fundamental design problem, which ultimately compounds other issues later on in the development process.

Issue: Inconsistent "Column Measure" and the visual "Grid":

This is a design issue which plagues the majority of designers. Column measures form the foundation for your design "grid". The implied "grid" lends harmony to your layout and an invisible structure — a framework — you can use to communicate visual priorities of content and components on a page. There is no hard and fast rule that says you should always use one, two, three or four column layouts. It really comes down to what you need to illustrate the content and functionality on your pages without pushing it to the point of clutter.

Understanding the column measure

In short, a column measure refers to the width of "continuous text". This is most evident in magazine and newspapers where the ability to flow text into multiple columns is possible. With current development standards and web-technology this is not such an easy thing to do (it’s possible with a lot of hacking). However this does not preclude you as a designer from developing a rough column measure to aid in your layout.

Note: What is also handy (and we’ll talk about this in later articles), is the typographic settings derived from this measure. Here is a good article explaining "column measure".

Designing your "Column Measure"

The old carpenter’s adage "Measure twice. Cut once" holds true for design on so many different levels. In the case of WordPress theme design — determine your column measures first.

When you first run Photoshop (or whichever program you prefer), fight the urge to start throwing pixels onto your canvas. Instead, focus on setting out your guides. Here is a sample of the column guides I typically start with all my web-layouts:

The darker grey areas indicate where content would flow and the lighter grey areas indicate margins or padding you may wish to apply. I stick to a 20px padding practice (10px on the left and right side). The space remaining provides your gutters. The pink rules between columns indicate possible borders.

In terms of designing the column measure, I tend vary my widths anywhere between 250px to 300px — this typically lends a fair amount of space for design elements and copy, as well as enough room for extra white-space where possible.

A few things you may notice about the column sample:

• Between all three columns, I allot for a 1px border (the pink rules). I do this because it is a pain to have to factor in borders in the design after you’ve committed to your column widths. This may seem odd at first because the combined column widths end up being 601px and 902px respectively — naturally these aren’t numbers you expect to see, but these numbers end up giving you better control when you want to divide the columns.
• The columns loosely follow the CSS box model. This is vitally important if you’re designing for web standards. Being able to foresee ahead of time, how the box model affects a layout is a handy tool, not to mention that it takes the guess-work out determining margins and padding for your divs. The remaining space after any margins or padding is 280px — that’s a pretty decent amount of space to put towards content or blocks of functionality like categories, bookmarks, search boxes, etc.
• I allot a minimum of 10px outside of the layout for effects like drop shadows and such. My "Lemon Twist" theme is a good example of where that extra little space comes in handy.

Your columns are just vertical spaces which you can use to flow your content into. You can bridge or merge those columns, thereby creating interesting design elements; however, don’t let the columns restrict you — the grid that is derived from this is a very helpful tool which allows you to create designs such as what you might see with the following sites:

• http://www.ndesign-studio.com/
• http://www.snook.ca/jonathan/
• http://archgfx.net/blog/2007/geek/blogging/bus-full-of-hippies-for-wordpress (see screenshot)
• http://www.lifespy.com/2007/illacrimo-theme-release/ (see screenshot)

Putting it into practice:

Once you have your columns roughed out, start playing with blocks rather than fully fleshed out designs. With building blocks you alleviate the complications of the aesthetic, giving you much better focus on of proportion, balance, flow and tension.

Bridge your columns — which design elements might benefit from doing this? What happens when you swap the position of your sidebar and your reading area. If advertising is a feature of your weblog, where is it most effective to generate clicks and views? Does your navigation work best in a sidebar or at the top?

Play around with the layouts. When you get to a point where you’ve blocked out your layout, them dive into design.

Things to consider:

Remember, the primary purpose of a weblog is for people to read — I know there are some folks out there who may feel otherwise; however, the majority of people visiting your weblog are there to find content, read it, and move on (or share it, but I’ll save that for later). Whatever you can do in your design to accommodate that most basic of requirements, the better.

Here are some questions that may help you:

1. Think about how many columns you really need to layout your content — can you simplify?
2. What are you columns being used for — articles, advertising, photos, etc.?
3. Are there going to be exceptions to the layout that might affect your column structure, such as banners, forms, long headlines, embedded media, etc.?
4. As a reader, do you prefer to have a wide reading column, or a narrow one?

Try to answer as many of those questions before hand and avoid some of the design pitfalls later.

Ultimately the content and the functionality are up to you. By keeping most of these things in mind you will make it far easier to maintain the integrity of your design as well as work to make it future-proof.

Further Reading:

• http://www.wpdesigner.com/2007/06/19/web-typography-column-widths/
• http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/

• Posted: January 14, 2008
• Comments: (4)
• Permalink
• Follow This Post: RSS 2.0