This is the third post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

So far in this series I have considered the general feel that I want the theme to have and the site-wide navigation system. The next aspect I need to look at is the most important page on the entire site: the single post page.

With this theme it will be the only part of the template that displays an entire post, start to finish, and so is the place most readers are likely to spend most of their time.

I started out by listing the elements that have to be displayed on this page:Title, Author, Date, Categories, Tags, and Comments; however, when I took it into Photoshop to mock up the basics however I realised that I had missed something: the next and previous posts link, the feed link and a related posts link.

These all help the user to navigation through the blog and so need to be easily available.

There are some other things that I have left out deliberately for the moment: the comment form, I will work on that separately, and the permalink. At the moment I am not sure that I will include permalink on the post itself at all. Even though it is the convention to do so I am not convinced of the necessity.

The general layout concept is that the header will really stand out as the most prominent feature on the page. Around this will be the categories, tags and post date and the comments should run side by side with the post content, indented as if floated left. Details of the author will be included at the bottom.

After transferring the concept into WordPress this is what I have come up with. This image is a little more complex as there are some layout guides over the top as well.

Beneath the header in a lighter accent colour are the date, plus five drop down menus. These will contain a list of the categories, a list of the tags, a list of related posts, a list of the five previous posts, and up to five newer posts. These drop down menus should help to keep the minimalist feel without compromising on the reader’s options.

The comments are embedded to the right of the content, hopefully with enough padding to make it clear that they are separate. I’ve opted not to include gravatars as I think this would actually interfere with the content. Only using text on the page means that the colour in the gravatar images would likely become too prominent and draw the eye away from the main content.

An option I considered to avoid this problem was to grab the images using PHP, convert a cached version to black and white and lay it over the top, displaying the colour only when the mouse moved over the comments; however, I think that even this risks compromising the feel and so, for the moment at least, I will proceed under the assumption that this will not happen. I can revisit it when I actually code the theme if necessary. This might even prove to be a nice feature for every image on the page.

The layout is based on the golden ratio, this is used in three different areas. The division between post and comments, the overlap of the first two paragraphs into the space used by the comments further down the page, and on the left hand side a number of textual devices, for example, images, figures, pull quotes, can be indented into the text, and stand out from the text in golden ratio proportions. The overlap and layout device guides are included on the image above to illustrate how this will work.

Finally the author section, will also be subdivided in golden ratio proportions with the left side describing the author and the right side providing subscriptions options.

The most important part of this page, without question, will be the typography. It really isn’t an overstatement to say that this entire design cannot succeed, and can completely fail, solely as a result of the typography. The type is what will really create the feel of the site as it will be the only thing on the page.

The type on the example is 12pt Verdana, with an 18pt line-height, and an 18pt bottom margin. The comment text itself is slightly smaller at 11pt, to further separate it form the content, but importantly the line-height is the same, ensuring that the overall rhythm is maintained. This regularity reinforces the minimalist nature of the theme by adding structure without any unnecessary scaffolding.

Most of the other type decisions can be taken when I actually code the site. The small details are best considered on screen, created by CSS, instead of replicated in photoshop; for example, the type of bullets used for unordered lists and whether to hang them outside the text, or indent them; whether blockquotes should be indented or outdented, if images should have borders, etc.

Other points that I will need to consider at the code stage is how, and whether, to enforce this rhythm when the theme is actually used. Including images whose size is not a multiple of the line-height can break the rhythm or just disrupt the type. This can be detected and amended by using PHP when the post is saved, to add white space on to the bottom of an image, as the page loads to add margins with inline styles, or with Javascript to modify the DOM after the page has loaded.

These might seem extreme, and I wouldn’t necessarily consider them in all cases, but a little obsession goes a long way with type.

The hardest part of this page will be deciding how to insert the comments, and where to insert them. If there are no comments then I don’t want to knock-out the main text. If there are only one or two then they should be level with the bottom of the post rather than starting two paragraphs from the top in all cases. I will need to experiment once I start building so that I can test the effects of each version against real posts.

Tomorrow I am going to consider the archives, categories, and search pages, including methods of marking them up semantically.