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

Does a blog really need a home page?

I have put together a design for the home page; It was an automatic reaction. I’m not sure if this is because the principle of not repeating content has been drummed into me, whether the plain, blog-post-on-the-front is just too easy, because I have a home page of sorts on my own blog, or whether the magazine style is just rubbing off.

Whatever the reason I did design a home page to go with this theme.

The main part of the page is a very large header, and an excerpt from the current post.

Beneath this is an area broken into columns. Which I considered making a dynamic sidebar to allow greater customisation potential. That would also have necessitated using PHP to determine the number of columns in use to ensure that the full width was used regardless of the number of widgets included.

One aspect of this page which is noticeably different from the others is that I have actually used a gradient on this page. In producing the mockup I felt that without the gradient, subtle as it is, the page wasn’t adequately terminated. It felt as though it would go on forever and the gradient, my one concession to the pure white of the rest of theme achieves that termination.

The version shown above is the fifth iteration of this home page. I tried it out with a number of ideas, including giving the main position to the author information, making the columns into the last three posts, having four articles, and all of the above in different iterations.

With hindsight the lack of clear direction for the home page should have alerted me to something important that I missed. I made a fairly fundamental error in designing it: I didn’t consider why.

I could have produced it and move on. But design is not about fulfilling expectations, or repeating the default settings. It is about considering the end goal and working to meet that. The end goal of these theme is minimalism.

In my first post of this series I described minimalism as the point at which everything you want and need is available, but somehow hidden until you need it. Where nothing exists without purpose, and everything that exists is something you both need and want.

If I want to stick to this description then I need to discard the home page.

The home page in a minimalist context is not much better than those awful splash pages you used to find on flash sites. It is a barrier to the content, not a sign post, or a guide, and therefore is neither purposeful, needed, or desired.

Despite having designed the home page, I will not build it.

Next week’s posts will focus on the build. This for me is the fun bit. I have some ideas that I’m really exciting about, and that I haven’t mentioned so far. Things I haven’t tried before. I had forgotten how much fun CSS can be.

In the meantime, if I have missed anything, then let me know.

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

One area that I didn’t sketch out in my initial plan was the archives. This wasn’t a deliberate choice; I just didn’t have any real ideas about it and so I have left it until the main content was done.

I consider archives, categories, and tags to be minor variations on the same page and so I am considering all of these together.

There are two main challenges for the design of these pages: how to create the third style of navigation that is consistent with the look and feel of the rest of the site navigation, but which works in quite a different way, and secondly, how to handle the extra heading. I’ll look at these in reverse order.

I’ve run into this problem in the past. I have created my single post page and so decided on the way I want my post titles to appear and then found that I need to place another title above those to explain that this is an archive page. If I was creating the markup as well the issue would be one of changing my post titles from an H2 to an H3.

Even if I just accept that I will do that I then need to decide if I should keep the same styling for the page title as for other h2 tags used across the site, meaning that it will look like a page title and the page titles will look like lower level titles, or whether I should make the post titles the same but in the process cause my different levels of header to be inconsistent throughout the site.

There are other markup issues but I will discuss those later on in the post.

The decision I have come to is that consistency is very important. The post page has one header, and I don’t want to impose a higher order header above that, even when the page contains more than one post title. The post titles are the top level header, even where there is more than one.

My solution then is to add a header to the navigational structure to explain how the user is navigating, instead of explaining what the user is looking at; i.e. you are navigating through the archives, and not, you are looking at a list of posts from the archives.

With that decided I need to consider how to put together the third style of navigation that the site has. The first being site wide, the second style is post specific, this is the intermediate step.

The navigation needs to fit in and around the list of posts so that it feels consistent with the theme as a whole. That means it must fit into one of the spaces that I have already defined from the single post pages.

My solution is to use the space to the left, used in the single post for text devices, to list the possible archives and to incorporate the paging options into that list so that they are displayed beneath the active archive page in the list.

This uses spaces that are already defined in the scheme and only creates one navigational structure. It is fairly common to include the paging links at the bottom and top of the list of posts and this would have been out of place in this design.

Finally there is area the other markup issues.

So far I haven’t intended the post title to be a link to the post, as it is in most themes. If I make the page title a link on the archive pages, but not on any other pages is that likely to cause confusion, and, if I use a link beneath the page title as I used for categories and tags beneath the title of the main content is that going to be intuitive enough?

Instead of making the page title a link, which I prefer not to do for consistency, I have included a ‘read more’ link in black text to make it stand out much more. Even though I have generally avoided black, using it in small doses as a highlight option seems to work well.

Although I haven’t talked about the markup I will use to build the site, mostly because I haven’t consciously considered it until now, there are some semantic considerations that I think are interesting enough to consider at this stage.

The first is the what kind of header to use.

This theme has no site title. Quite often an H1 tag is used for the site title and everything else considered a sub heading of that. Personally I don’t think this is logically correct, but it is a sort of de facto standard. Without a site title I am free to use the h1 tag for the post titles on the single pages, and by default therefore as the post titles in the archives. Each post is, after all, on an equal footing.

The issue specific to these style pages is whether to treat the posts as a list of posts, or as separate topics on a page; i.e. should they be wrapped in an ordered list to define the list relationship or is it enough that each post title is an H1 tag?

There is no doubting that they are a list, but is there any benefit to be added by marking it up as a list?

Because I am using H1 tags I don’t think there is a semantic benefit to using lists; however, if I had used a page title of archives and the posts were H2 tags then the case would be less clear.

Tomorrow I am going to consider the home page, and then, starting next week I will start to create the actual theme itself and look at ways it can be raised from a relatively straightforward minimalist theme to a theme with hidden depths or personalisation and usability.

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.

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

If you recall from yesterday’s post I have already decided that my theme should be minimalist; i.e. a white page with a post on it, so next I need to think about the navigation.

Navigation is a particularly important issue with a WordPress theme, firstly, because there is usually so much of it, and secondly because it is often divided up into more the one type.

The navigation components can be subdivided into two distinct sets: static and dynamic. The static pages are what WordPress would call pages, and the dynamic pages are posts, or collections of posts.

They each serve slightly different needs but critically they are also used in different ways.

I am designing the theme for a blog, and not a WordPress powered website. This is very important for the concept of navigation. This means that the static pages are likely to be one-off single pages, and the user is also likely to expect that. These pages will typically include the default home page, an about me page, a contact form, and other similar style of pages.

The dynamic pages on the other hand are pages that are typically browsed through. A single page is not a one off, it is the start point for browsing. A user will not typically know exactly where they are going and so every dynamic page could be the start point for narrowing or widening a users search.

The key task I have then is how to divide static and dynamic links, how much information to include on the page, as opposed to hidden within menus, and what information needs should be site specific, always remaining at the top of the page, and which content specific, i.e. changing to appear with the post.

For a minimalist theme this is important as it defines whether there should be a sidebar, or a footer with links in it, or not. I have opted for a single site-wide point of navigation to deal with static pages and sideways searches. Everything else will be relegated to content specific navigation and I will deal with that when I come to each relevant type of content.

By sideways searches I mean navigation within the site that does not solely widen or narrow the focus, but actually moves to a separate part of the side; for example, if a user is reading a post in a particular category, but then navigates to an unrelated category, or a post within an unrelated category. This includes search.

With a single point of navigation everything is in one place, whether that be the header, footer, or sidebar. There is just one. This means there is no hunting for navigation, but it also means that I will have to balance the static site links, home, about, contact, with the dynamic pages such as archives, categories, and tags.

One has more choice, the other has requires less decision making. One requires nested menus, possibly multiple levels deep, and the other pretty much puts every link out there to see.

Finally, one adds to the sense of minimalism and the other is likely to drive through it like a truck.

I’ve clearly decided that a single point of navigation is the key, so what next?

Well, I’m not looking to reinvent the wheel with this theme. I will use some classic elements in the way that works me.

The original sketch uses the line and title style menu structure. This should work with the minimalist feel that I’m going for as it can be created out a several shades of grey but with a very noticeable accent colour.

The danger with this though is that by adding artificial height to the menu it could begin to take on the role of the sidebar, appearing to add complexity instead of removing it. I will need to watch this closely when it comes to building the site and keep in mind that I might have to change it for a thinner structure if it doesn’t feel right.

The navigation scheme combines the static pages and the dynamic pages, such as categories, archives, tags, so I have added a grey ribbon across the top, segregated into two different weights to create a visual distinction between the static and the dynamic. In addition I have nested the dynamic menus so that they will display several levels deep.

The example in the sketch has the categories expanding to show the last five posts and each category expanding to show an excerpt.

The next stage is to produce a more defined mockup and so the next image is from photoshop. Note that at this stage I have still haven’t decided on fonts or colours; however, the balance between them, i.e. the main accent colour and the lightened accent colour are likely to be used.

Finally I need to add search into the mix. Search is quite important and by and large it has become the accepted standard to include it at the top in an easy to find place. With that in mind I have included it on the right hand side of the colour bar:

Although I am not at the stage of implementing it yet I have created this mockup on the assumption that I will use a variation of the Suckerfish drop down code. This is CSS only for most browsers and should help to keep things light weight.

Tomorrow I will look at the first of the content sections, starting with the most important, the single, full post page.

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

When it comes to planning website designs I tend to take the seat-of-the-pants approach, which is to say I mock up some generalities in Photoshop then start building. In some ways I won’t be doing anything different this time round, but I have made an attempt to stop myself and think about things before getting started.

As I write this I haven’t even opened photoshop, or created my theme folder. It would be easy for me to design the site and then create the prep work, but it didn’t work well when I was doing art at school, and it won’t be an honest portrayal if I do it now.

What I have done is to take some of my ideas and, with very rough sketches, try and visualise them, what will work, and most importantly what will clearly not work. In each post I will be looking at one page in my planning process. Today it is feel.

You can see from the image that these are very rough sketches but they are useful.

I’ve started with the overall feel (top left). The words that come to mind are clean, minimalist, focus on the content not the amount of content, avoid clutter, white white white, and strong grid.

With the exception of the last one, which is more a definitive design point than an abstract feeling, I have pretty well defined that it will be the opposite of the news / magazine style themes that are currently popular. What I have in mind is an empty page with a post on it. Easier said than done sometimes but that is the starting point.

Any time you decide to focus on a minimalist design you open yourself up to criticism. With very little except text on the page it is very easy for someone to suggest that it is lazy, or simply that your graphics skills must not be up to much.

If we are being honest sometimes those things are true. My graphics skills are not great and I never really could draw very well.

Those criticisms, however, tend to speak more to the critic, than the designer.

In the past I have described great minimalist design as the absolute pinnacle of design. It is the point at which everything you want and need is available, but somehow hidden until you need it. Where nothing exists without purpose, and everything that exists is something you both need and want. To appreciate great minimalism you need to understand it and that means knowing more than the basics. Often it means walking through the full range of design options and out the other side.

Now, I am not aiming to achieve great things with this theme; I would love to produce something truly sublime, but in reality I am just intending to make use of some of the principles. WordPress themes are more than just a design, they are about how you use WordPress itself, how, or whether, you use all of the information at your disposal.

I have chosen to design with a minimalist feel because I know that when I get to the next parts of this series, Navigation, Single Post Content, Archives, Home Page, & Text Devices, I am going to need to think very carefully about the way the information is presented, the way it is accessed and, although I will be looking at all the design elements first, I will need to give thought at the back of my mind to the way I am going to use WordPress itself to connect and control all of the information

Choosing this style means I avoid the need to revolutionise the way sidebars are displayed, and the temptation to pack more and more features in. This will by no means be simple though. I am aiming for subtlety and I think that may be the hardest thing of all.

Tomorrow I will consider the navigational structure.

Creating a WordPress theme is one of those tasks that can see deceptively simple. The core concept is simple, but what if…? This post is the first in a series where I will blogging my process of creating a theme.

I have created a lot of WordPress themes over the years but notably they have all been for a specific blog, and for a specific reason. I have never created a theme just for the sake of it and I have never distributed one.

On my own sites I have tended to get the big stuff done and let the rest evolve as each post needed it, but that really isn’t the best idea if the theme is for someone else.

I have been focussing on plugins and tools for long enough to lose some of the instinctual feel of design and theming and so I feel as though I am as close to being a beginner as I will ever be in future. That being the case makes this the perfect time to blog about my first real attempt at a very simple theme.

I hope that writing about the process will nudge me to remember the things I have missed, let others tell me what I have missed, and help anyone that wants to give it a go see where things can go right, and where they can go wrong.

Make no mistake, this isn’t a master class.

The posts in the series will be listed below as I post each one.

1. What overall feel do I want for my theme?.

2. How should I set out the navigation?.

3. Layout of the most important page, the single post page.

4. Archives, Search, Categories, Tags, navigating through it all.

5. The home page, or lack thereof.

6. Great Layout and Design Tools.

7. Building the elastic layout.

8. Sitewide Navigation.

9. Dealing with Images.

You can download the finished theme Fun with Minimalism Here.

I’m in the process of developing my theme series that starts on Monday and one of the noticeable things is that, despite having largely decided on the page layout, navigational structure, single post layout, I still haven’t felt the need to add the name of the blog to the theme. I’m wondering then why it is that we feel the urge to give a blog a name?

I am assuming that, like me when I produced this blog, adding the name as a header is something automatic that isn’t even considered. It feels wrong not to have it, but we have no idea why. But if it was considered what reasons might there be for including it?

Personal branding is one reason; the blog owner wants their name front and centre; but their name would still be on every post, and that after all is their content. Where else does it need to be for people to see it?

If the blog is named after the author then people will write blog posts saying “John Smith said …” so it makes little difference to title it with your own name.

If the blog title isn’t the bloggers name then surely that can only serve to dilute both of the brands can’t it? You will get either one or the other or both used on posts. If you want to be known by a made up name instead of your own name then I guess that is fine.

If the blog isn’t branded by adding the header won’t people lose track of which blog they are on? I doubt it. If you have your blog name in the title bar then they will know, your URL will be in the address bar, and your name will be on the actual post. Not to mention the options of checking out the home or about pages.

So what next? Are bloggers branding their blogs because secretly they want to be their own little company, or perhaps they like to think of their blogs are digital books, and that they are published authors?

OK, but surely a multi-author blog needs a name to describe the collective concept? but isn’t each article still written by one person?

It must be a matter of style then, but for the majority of blogs the name is just sitting there in bland type doing nothing.

There are clear cases where it is beneficial. I don’t think I can reasonably suggest otherwise. Corporate Blogs, Blogs with a specific purpose, like the Reader Appreciation Project, but for personal blogs, even very popular ones, do we really need to name them?

There are some interesting posts appearing about comment policies, do follow, and the do follow list at Affilliate Watcher - Are Do-Follow Bloggers Dishonest?, and Reader Appreciation Project - Are We Do-Follow Frauds?, and I think it is beneficial to set out my opinion.

The key complaint is that there are sites that advertise themselves, either on the site, or on a do-follow list, as not marking up links in comments as no-follow, that are not doing what they say. They have advertised that they do not no-follow and yet they still do.

Now, obviously if you advertise that you do something and don’t do it then that is misleading and you should take steps to resolve it; and if what you have decided to advertise is that you will not add the no-follow attribute to links then you should be clear on what that means and whether you can deliver it.

Some sites, it seems, are disabling no-follow on the name, but keeping it for links within the text, and this isn’t really in the spirit of things really.

I think personally you should either do-follow or you not; however, my issue is really with the concept of a do-follow list in the first place.

The no-follow attribute doesn’t achieve what it was intended to achieve: to reduce spam. So in my eyes it is useless and I use it only because it is automatic, not because I agree with it. If, by removing it, I can offer some advantage to my readers then that is a good thing.

Take careful note however that I only care about it in relation to my readers.

What the do-follow list does is advertise that you give Google juice, however little you have, to people who comment on your blog. This creates the situation whereby someone can find your name from a list visit your blog and add a comment purely because they expect that link to benefit them.

It may be that I am being naive, and if so then that’s fine, but I feel quite strongly that a comment is there because you want to connect with the person, you want to say something, or you want to take part, and if there is search love as a result of that, well that is an added bonus. If the desire for benefit comes first then I have a hard time caring about what someone thinks they will get by commenting.

The obvious answer, of course, is not to be part of the list; I ain’t. I also consider myself lucky that my Google juice is so weak that no one would want to comment who couldn’t care less about what I actually wrote, purely because it gets them some advantage.

Two other things were also brought up are comment signatures, and typing something that isn’t a name into the name field.

Comment signatures don’t bother me as they are usually pretty innocuous but I have had problems with keywords in the name field.

The thing is, I like people to comment, and when someone doesn’t use their name it always feels a little like they are putting up a wall between us. I wonder whether they would rather use my blog for their own searchy gain, than receive a comment back and whether they will ever visit again.

When I do respond I wonder what I should say? Can I use their name? must I call them ‘Master Builder’ or is ‘Geoff’ OK? And if I do use ‘Geoff’ will the rest of the commenters in the conversation understand who I mean?

I do get comments from people that use their site name instead of their real name, people I have had ongoing comment conversations with, and who’s comments I look forward to and respect, and once I know them, besides occasionally having to check out their site to remember how to spell their name properly, it all goes well. So this isn’t really a problem in real life, just in the theoretical blog palace that is my brain.

I’m sure, therefore, that all this is largely a comment on my naivety, but I can’t help wondering if I am the only one that feels this way? Have I fallen for the ideal and missed the reality of life as a blogger?

I feel like I have been promising a theme for a long time now, long in internet time anyway. It is taking longer than I thought, partly due to work commitments, so I thought I owed anyone that might be waiting an explanation of what I’m doing, and info on when bits of it will be available, so that is the point of this post.

I have never been one to make life easy on myself and so instead of just throwing together a theme I decided to take the opportunity to stretch myself as a programmer. Time will tell if that was a mistake but I do quite like the concept I have come up with.

Cheesecake

I have seen the rise of premium themes, and the rise of themes with multiple layout and colour options and decided that there was no way I could provide everything that I think a premium (or in my case fremium) theme should have using the tools available.

What I came up with is Cheesecake.

The concept of Cheesecake is based on the dessert; it is a multi layered product with each layer achieving a different aim:

The Biscuit - This is the base, it gives the content a platform to rest on and defines the shape of the desert.

The Cheese - This is the real substance of the dessert; it provides the bulk of each dessert and gives it flavour.

The Fruit - This is the accent, the zing, and the colour. This is the cherry on the cake.

And the best part, the pattissier who combines it all together in any way you please.

If this is all sounding a tad conceptual for your tastes I don’t blame you, so here is the what it actually does.

Cheesecake is a theme within a theme. It re-creates the WordPress theme system in a way that allows each of the layers I have mentioned to be selected individually, so:

The biscuit is the layout. 1 column?, 2, 3, 4? left, right, centred, content? anything is possible provided someone has created an optional biscuit layer for you to select from.

The cheese is the layout of the content. Imagine you want a layout that contains three posts in columns with one post full width beneath it, or a single post with an image pulled from a custom field. Simply select them from the list, whether each should apply to every page, or only the home page, or only a category, or only a specific category. Anything that anyone can build and create as a cheese layer can be selected without modifying anything.

Finally the fruit. The fruit provides the colours, the graphics, and possibly some aspects of the layout. This means you can select the look separately from the layout and content layout.

So what’s the problem. Well there are a few. It works. Not everything necessary is there, but the big bits work. Unfortunately each option needs creating and I haven’t done any serious CSS or design work for a while so I am struggling a bit just to test it properly. It is a big project for me and time is proving a problem.

For the technically minded of you I have used Google Code to do it so you can get everything I have done so far from the SVN. Note however that this is a PHP 5 only project.

The Cheesecake WordPress Theme hosted at Google.

So what next?

It is essential that I brush up on my CSS skills as I need a default theme for this to run just so I can start testing it properly. With that in mind, from Monday next week I will be starting a series of posts where I will create a non-cheesecake theme from scratch. This will help to focus my mind back on how to even do this, and more importantly provide some really useful information on basic theme creation for you guys in the process.