Anatomy of a WordPress Theme (for Designers)

I would like to make this post so that designers who are not as familiar with designing for blogs can see some of the facets of design that are required to cover all the bases when designing a WordPress theme.

First, here is a the screenshot (small) of the entire example page. Click on it to see it in full view.

I would love to take the time to spell all of these things out in detail, but I don’t have that time now. But if you look at the various elements here, you will see a lot to learn from. Below are a few specific things to point out.

You may not need to design for all of these things for any particular design, but you should know about them. You should also know that WordPress will style a lot of these things in a perhaps-okay way as a default. Therefore, it might be a sensible approach to see how the theme styles them “out of the box,” and then look at how you’d like to change that.

Also–note that some of this stuff is pertinent to blogs alone, but other parts are pertinent to any WordPress site.

Widgets

WordPress comes with a series of default widgets. By custom, the most common place to put these is on a right-hand sidebar. WordPress makes it really easy to add and remove widgets, and change their content. This gives your clients a lot of flexibility in terms of how they manage their site over time.

This is true even if it’s not a blog-based site. And note that you can actually have as many “sidebars” as you like. A sidebar is really just a container–anywhere on the site–for widgets. You could put one on the top, in a footer, etc.

Tags display in a “tag cloud” format, where the more posts that have a tag, the larger the tag appears:

Sub-Navigation

If you plan to have the option for the client to have second- and third-level navigation, plan for how this will look and act. Even if you don’t have the  need for it now, if you plan for it, it will drop in nicely when it is needed.

Heading Levels

If you look at the enlarged screen shot, you’ll see a lot about heading levels there.  Heading levels in HTML go down to level 6. By convention, the title of a page or post will be H2 (heading level 2), so the sub-headings would start at H3. Therefore, it would not be unreasonable to plan for at least an H4.

Unusual Elements

There are a number of unusual elements in HTML that it would be good to at least know about, that are illustrated in the example. These include:

  • <cite> for citations
  • <abbr> for abbreviations
  • <address> for addresses

Block Quotes

The example does not include these, but it’s good to think about them. Here’s an example:

Block Quotes

Post Title and Meta Info

By convention, blog post titles will have some “meta” information below them, such as the post author (not always necessary if it’s just one person), and the post time. Usually this same information would not show up on a page.

Post Footer

Below each post, you’ll conventionally find information about it–such as the categories it is in, any tags applied to it, etc.

Note that on the default blog page (which lists a bunch of posts all at once), or on one of the archive pages (that also list a bunch of posts all at once), these things would repeat–once for each post.

Next & Previous Links

WordPress is intelligent enough to provide links–if you like–for the next and previous posts in a series.

Comments

There’s a lot that could be said about comments. But here, just note the following things:

  • You can have threaded comments (where you have a sort of sub-conversation, with indented comments. See the example below.
  • Some designs provide for an alternating even/odd coloring (as in the example), which looks nice.

Comment Form

Here’s the default comment form:

Hope this helps. Please add comments below if you have any questions.

I would like to create another post that talks about elements to consider in a general HTML design sense–elements such as forms, links in their various states, and so on.

Posted in

Chris