Fun with Habari

My theme project

2009-01-18T22:05:26+00:00

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.

I've been interviewed

2009-01-09T00:59:11+00:00

A few days ago I was interviewed by Jeff for Blogger Talks. I was asked about WordPress, Habari, the future of blogging, and the state of blogging in the UK.

Should Habari themes use HTML5?

2009-01-05T02:06:19+00:00

I've been thinking a lot about Habari themes over the past few weeks and one of the things I have given some thought to is whether it is time to start using the HTML5 tags, either the tags themselves, or as class naming conventions.

There is certainly a part of me that wants to just switch to the new tags immediately. They may not be universally supported but the good browsers should support them and, while I have no intention of modifying any of my themes for IE6 anyway, there is a bit of a hack that applies to IE in general.

I really like the idea of marking up content as an article, and asides as asides. I haven't tended to use asides much in my writing but given specific structural methods of putting them on the page (and corresponding changes to the publish form in Habari) I might well do.

Right now, for example, it would great to have an aside with the major new tags listed, but with no way to acomplish that with this theme you just need to wait until later down the page.

On the other hand, adopting the HTML 5 tag names as class naming conventions, with an eye to switching them all out at a later date, is also appealing. Not least because it gives me a structure to follow that has been defined, but also because it is a great learning experience about the tags anyway.

It also occurred to me that, as a cutting edge platform, Habari (the project as a whole) should probably be encouraging the use of HTML 5 already anyway. At least in the official themes. There is something to be said for being ahead of the game on this and just be consistent would be useful on its own.

I am still not decided whether to use HTML 5 in my new theme efforts, but while I think about it here are some useful links on the subject:

Habari-Watch Watch

2008-12-21T18:09:07+00:00

Ladies and gents, Lords, Ladies, and Pastafarians, I would like to tell you about my new Habari project. It is called Habari-Watch watch.

AndyC has launched Habari Watch, where he promises to keep us all up to date on Habari happenings that he finds as he scours the intertubes. In turn I will watch him, and report on his reports on Habari.

Already I am able to report that his first two blog posts contain interesting and useful information that I was, until now, unaware of. This, I think, is a blog to subscribe to.

Habari Watch can be found at http://www.nbrightside.com/habari

Friday Fun: Fun with Lolcode plugin

2008-12-20T06:56:33+00:00

So I'm doing some shopping for my evening meal and I hear some people chuckling over a book, I can has cheeseburger. It was clearly new to them. Then I get home and see a post about programming and religion, and there is LOLCODE and I figure, "what the hell!" It's Friday right? So a short while later and here it is, a LOLCODE post content parser for Habari.

I have taken this PHP LOLCODE parser and a Habari plugin and combined them.

I can has lolcode, the plugin, when turned on, will parse your post content and widget text for LOLCODE and run it.

For example:

Will output

You can download the I Can Has LolCode Habari plugin here.