Defining WordPress Theme Requirements

Ahmed wrote last week about what makes a WordPress theme great. In his post, he mentioned building a high quality generic theme and tried to define the elements that stood out in popular themes such as K2 and Cutline.

I've designed a few custom WordPress themes in the past using K2 as a base. The thing about K2 is that it has a strong semantic structure, and once you comprehend that structure, customizing it with CSS becomes much easier. If I were building a generic WordPress theme, I'd want it to have strong, clear mark-up (both XHTML and CSS) so that it could be easily customized by other developers.

In this post, I want to take Ahmed's thinking a little bit further and define what I think would be a definitive set of requirements for a high quality WordPress theme.

Structure Requirements

• Fixed width layout: Fixed width gives you better control over how content will be displayed. If you're planning to monetize the blog, setting a content width of 470 pixels and a sidebar width of about 300 pixels should fit most ad sizes in nicely.
• Two Columns: One for content, one for the sidebar. I have to disagree with Ahmed - I think the capability to add extra columns complicates things. A two-column layout should provide enough functionality for a generic theme.
• Proper Semantic Structure: The XHTML layout of most blogs has the blog title as a H1 on every page. This is wrong. The blog title should only be H1 on the homepage. On all subsequent pages, the page title should be H1, whether it's a category page or a single post.
• Extended Footer: I like the idea of an extended footer. It's an opportunity to keep the sidebar clear of clutter and - used correctly - could keep the reader on the site longer by giving them categories, related posts or perhaps some targeted advertising.
• Meta Information In Sidebar: I've always thought the lump of meta information after each WordPress post is a waste of space. In my ideal theme, I'd like to move this meta information (author, date posted, categories, etc) to the top of the sidebar.
• Content To The Top: I've always tried to design my themes with the content as high up on the page as possible. This means ensuring that the sidebar comes after the content in the HTML code. Positioning of the sidebar can always be achieved through CSS if you want to maintain the illusion of a left-hand-sidebar.

Semantic Requirements

I touched on semantic requirements earlier, but I want to give this area more thought.

• Using the_excerpt: By using the excerpt instead of displaying full posts in archive and category pages, you help prevent duplicate content issues. The only place you should be able to see the full post is on the single post page.
• Support For Common XHTML Elements: It's important to provide support for H1-H5 tags, making sure they diminish in size stylishly. Likewise, you should have proper support for blockquotes, citations and code snippets. It doesn't matter if you don't use these elements, you need to build in support for them for people who do.
• Microformats?: From time to time, Microformats make the headlines and we're told they're the next big thing in web design and SEO. Should our WordPress theme support Microformats? You decide.

Design Requirements

The striking thing about K2 and Cutline is how stark both themes are. They don't waste time on frivolous graphic elements - the design is purposely kept simple: users of the theme either keep it that way or use it as a base for further customization.

So, with the design, I believe we should:

• Focus on making best use of typography: good spacing and sensible font choices. I think a medium font size will be good for legibility without looking too chunky.
• Make the best use of whitespace to improve legibility.
• Keep colors and graphics out of the equation as much as possible. The more we embed our own color preferences, the harder it will be for others to customize the theme.
• I believe the XHTML should be of a high standard and it's important that the default code of the template validates.
• Support For Widgets: With WordPress widgets becoming a standard these days, it would be a major omission to leave out widget support in the theme.

Coding Suggestions

• Extensibility: Ahmed suggested building in theme support for a number of WordPress plugins. In an ideal world, plugins will conform to a What are the most popular plugins that might require theme support?
• Readable Code: In order to make the theme easily customizable, the code has to be easily understood. That means clearly structuring the HTML and CSS so that modifying and troubleshooting is straightforward!
• Documentation and Code Snippets: I think a decent readme file explaining the layout would be useful. Also some code samples showing how to implement code for supported plugins and common tweaks like moving the sidebar might be useful for the less technically inclined.

I think in designing something that will be easily customizable, we need to cater to the blogger and the theme developer. A well-coded and flexible theme is more likely to be picked up and modified than one which is a complete mess.

If anybody has other suggestions that would make a killer WordPress theme, let me know in the comments. Let's try and get together a definitive spec for a theme that would stand up alongside K2 and Cutline!

Gerard McGarry is a music blogger for Unreality Music, web designer and all-round Web 2.0 enthusiast.