Dissection of a WordPress theme: Part 2

Web design is a notoriously tricky subject. Often we give up any thoughts of innovation when the process of realising them is such hard work. Part two of this WordPress dissection continues to try and explain the basic workings of the software, how this relates to the layout, and how anyone can personalise their blog.

The focus will be on finalising the basic layout from part one, and then finishing the header and footer sections. Both of these are important as they stylistically define a blog and act as visual focal points – do it well and people will want to read your blog, do it badly and they may not even bother.

Web designs

Websites are consistently at the mercy of numerous difficulties. They must be able to present information to people who run different software, on different platforms, in different languages, and with different levels of visual awareness.

In the early days of the web this was relatively easy. People did not expect much and were impressed just by the availability of a website. Layouts were chunky and appeared to be created by programmers. Most of them were.

Today the emphasis is on making a attractive site that is elegant and clean and works transparently of the content. WordPress has, to a large extent, achieved just that, and makes full use of the latest design methodologies. It is therefore important that any WordPress theme discussion attempts to retain this ‘standards conforming’ philosophy.

Accessibility and Google friends

Accessibility is a term used to describe the process of making a website accessible to those who may be viewing it on something other than a high resolution monitor, or who may even be visually impaired.

A key issue here relates to font size. We don’t want to design a theme with an impossibly small font, and neither do we want to prevent the chosen font being re-sized to suit personal preference.

A secondary issue regards Google. Most of us want our content to appear in Google’s pages, and there are a lot of things we can do to improve its ranking. One of the simplest is simply arranging our page such that content is delivered before menus and other non-content. Why? It seems that Google gives preference to data at the front of an HTML page.

Putting the content first also makes the website a better experience for non-graphical users. There are not many of these, but there are some.

Captain, we have a problem

So what does this have to do with the second part of the guide? My original plan was to cover the header, footer, and sidebar here, and finish the series with the content. Thirty minutes into writing part two and I realised my previous design was far from complete, and that it was going to take time to explain why.

Fortunately the problem was not a big one. In fact, I could easily have explained it as a design decision and skipped straight ahead. Instead, let’s look at what I previously proposed:

Desired layout

This is a standard website design and worked perfectly until the content section became taller than the sidebar. This had a strange effect:

Actual layout

The content has wrapped around the sidebar! In itself this is not a big issue and is easily fixed, but it became apparent how unfinished the previous design was. It’s time to make amends.

Some statistics

Before we do that, I want to show some statistics from my own website.

Mozilla Firefox 43%
IE6 43%
Apple Safari 6%
Opera 3%
Others 5%

Taking into consideration that WordPress attracts more non-IE users, it’s obvious that we must cater for many different browsers on several platforms.

Options

Variations on a common theme will be presented as options. These will change appearance or add extra functionality to the theme, and the intention is to cover a wider range of ideas without forcing a particular style.

An option will be presented as follows:
Option Option 1 – Some description

138 Responses to Dissection of a WordPress theme: Part 2

  1. Excellent tutorial. I’m a new-b to css and I’m finding this very educational and easy to follow. Thank you for putting it together. I’m looking forwar to part 3!

  2. Your part I link doesn’t seem to be working any more, which is a shame. Can you repost it or put it somewhere else? I’ve been devouring Part II, but I think it would make more sense if I’d read Part I first.

  3. I recently started tinkering with WordPress, and was a little puzzled with how the pages were constructed and laid out. The first two parts of the tutorial have taught me a little about how to use themes to customize the blog’s appearance.

    I look forward to reading the rest of the tutorial, and learning how to fully customize WordPress’ appearance.

    Keep it coming!

  4. Good effort, looking forward to seeing the rest.

    One comment/suggestion it would be good to see this as one web page, including the code, to make it easier to follow.

    So far I have not seen an updated tutorial on the WordPress Wiki for 1.5 themes.Perhaps you could consider posting there? With some more background info on the WordPress 1.5 theme structure (perhaps added by WordPress developers) this would could become a valuable resource.

  5. I have got to say your two articles on the “Dissection of a WordPress Theme” are very nice and look forward to reading your next two. This will help me greatly when I am ready to work on a new theme for my blog.

    I made a post over at my blog about your posts. Keep up the good work.

  6. Your’s is the best tutorial/explanation that I have found on this topic. Thank you very much for creating this. Could this be posted to the Codex, too? I think it could help legions of people. Terrific job!