Before Christmas I started work on a new Habari theme. My plan was to create a premium style theme that would show WordPress themers the kinds of things that are possible with Habari, and hopefully encourage those people across. Since then I have been working on the project but, just like the little boy who orders the largest ice cream on the menu, it has been a larger task than I had anticipated. It still isn't ready, but with Hack-A-Thon going on this weekend I thought it was a good time to let you in on the project.

Onion

The theme is called Onion because it is based on a layered approach to content, where many of the fundamental pieces are available as templates. They are, in turn, included in other templates, and finally added to the main theme files. Here's an example of what I mean:

There are a number of different styles of post template. For example, a post that only displays its title, a post that displays its title and description (more on that later), a post that displays everything, but where the content is shorteneed, and so on.

There are lists of posts used for different reasons, such as a recent posts list,featured items list (again more on that later), or categories list.

By choosing to include a template called 'recent_posts_list' you get a list of recent posts that uses the title only, where as a template called 'recent_posts_descriptions' would give you a list of recent posts with title and descriptions. These templates are all available to modify easily.

Specials

A significant part of the theme is the plugins it comes bundled with. There will be a significant number of plugins, some optional, some required only when making structural changes. The most important plugin though is the core-plugin. It adds a number of additional post fields:

  • A description field
  • Menu handling fields, i.e. include in menu, include as a child of another page, and the menu order
  • Special Use for pages.
  • Page to entry conversion for some special uses.

The special uses option is the most important. It allows pages to be used for structural elements. Look at the following screenshot:

The entire area above the menu is a page with a special use of 'Page Header'. The grey area immediately beneath the menu is a page with the special use of 'Tag Page Introduction', and a tag of 'photographs'. This means that when viewing the photographs tag page, this introduction will be shown. The categories on the right are defined by a page with the special use of 'Category Description'. They link to the tag page of the tag that page is tagged with. Finally, in the menu there is an entry titled 'Fun with Habari' this is an external link rather than an internal page and has been created by creating a page with a special use of 'Menu Link', entering the link in the content field, and using the page menu options to add it and order it within the menu.

At the time of writing the available special uses are:

  • Normal Page
  • Page Header
  • Page Footer
  • Home page introduction
  • Tag page introduction
  • Featured Item
  • Category Description
  • Menu Link
  • 404 Page Content

You can see there is potentially a lot of flexibility in this.

I should mention, as it is clear some of these special uses don't conform to the usual use of a page. My intention was to make use of as much built in content as possible and to extend it as little as possible. I did consider creating a new post type but I felt it was overkill.

Images

The core plugin also adds a set of image fields to each entry and page. These allow posts to have square, thumbnail, small and medium images assigned to them (based on flickr) as well as fields for an image credit and a link for the credit to meet the common Creative Commons licensing and flickrs terms of use policy.

In the example above every square image on the left is a blog entry with images attached. By clicking on those images the full post opens up with a larger version of the image. The tag post uses the small size and the catgory listing is using the thumbnaii.

Many of the component parts and variations that can be used within the theme are based on different image sizes. For example, the posts on the example page use the 'post_square' template while the category listings use the 'post_square_description' template.

Layouts & Custom CSS

One of the key features of this theme is the option to specify multiple layouts. There will be a plugin to control this but at the moment it is set using an array in the theme file.

Theme includes multiple CSS template files that will layout the content in different ways. Which layout is used can be set according to the request rule that is matched. So for example you can specify, that layout-1 should be used by default, but that layout-4 should be used for display_entries_by_tag, or even for display_entries_by_tag where the tag is 'photographs'.

In the same way variations on the header CSS can be used, and additional custom css can be included. In the example image above there is custom CSS used to float the posts on the photographs tag page.

HTML 5

A few posts ago I asked about using HTML 5 for Habari themes. Following this I decided to totally convert this theme to HTML5. That took a while as I realised I needed to rewrite a lot of the CSS and figure out the semantics again. It still isn't entirely HTML 5 but the main layout pages are.

Source

I have a Google code project for this. Even if people do not want to use the theme there may be code or ideas in there that are useful to other theming efforts. The code project is at http://code.google.com/p/onion-theme/. I would love to get your input on this, especially if there are better ways of accomplishing what I have done, or if you want to come on board as a contributor.