March 5, 2008

This is the eighth post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

A great design tip that I’ve always tried to keep in mind is to be prepared to just drop any feature if it turns out that it doesn’t work. That is what I have done a little with the navigation. The theme will still have navigation, of course, it just won’t be quite so complex.

In my original design mock-up, shown on the right, I designed the layout to be several layers deep. So a user could select categories, and within that see a list of the last five posts in that category, and by hovering over each post see the excerpt from the post.

This idea was a good one. It allows users to browse the site using the navigation without hitting an intermediate page and so sounds like it adds a lot.

Having built it, however, I realised that it just doesn’t work with the minimalist theme.

In practice the additional levels of drop down cluttered up the white space and killed the feel that I am seeking. The extra utility actually reduced the good aspects of the theme so, in this case, less is really more. I hope you agree.

This is a screenshot of the navigation in action.

To create the menu I have used a an unordered list, centred using auto margins. Each list item has a top border equal to 21px, but set in EMs), padding of the same amount, and a span within the list item of the size dimensions to create the right hand border. The colour of the top border is determined by the class: static, or dynamic.

The large size of the top border prevents me from using a side border on the list item; when the text is resized upwards the borders would taper off and lose the structure.

The drop down functionality uses the Son of Suckerfish technique.

The interesting part of this navigation scheme; however is how it fits into WordPress.

I wanted to provide a quick and easy way of controlling the static pages that come at the start, and end of the menu, while allowing the dynamic options to act independently. To do this the navigation scheme uses two bookmark ( blogroll / links ) categories. Links with a category of, ‘mainmenu’ appear before the dynamic menus, and links with the category of ‘mainmenu-after’ appear after it.

The PHP that adds these in is included below:

[php]
/* Retrieve bookmarks and display them with an appropriate class */
$bookmarks = get_bookmarks('category_name=mainmenu&orderby=rating');

foreach($bookmarks as $bookmark){
echo '

';
echo '';
echo $bookmark->link_name;
echo '';
echo '

';
}


Note that in the original query I have specified that link rating should control the order. This means that both the inclusion of static links, and the order they appear in is dealt with by existing WordPress admin features, requiring no alteration of the theme files.

For the most part the dynamic links are handled using the standard theme tags, wp_get_archives, and wp_list_categories; however, I couldn’t find a similar function for tags and so I have used the get_tags function and output each using a foreach loop.

[php]
$display_tags = get_tags('orderby=count&order=DESC&limit=10');

foreach ($display_tags as $display_tag){

$tag_link_title = sprintf( _('Posts tagged with %s' , 'Fun with Minimalism') , $display_tag->name );

echo '

';
echo '';
echo $display_tag->name;
echo '';
echo '

';

}


Note that for the moment I have restricted this list to the 10 most used tags. I don’t know how many tags the average WordPress blog is likely to have but I think the user is likely to be overwhelmed with any more than ten. Even that seems like a fairly long list when displayed in a drop down menu.

At the time of writing I haven’t produced the post specific list; however, it will operate in exactly the same way,albeit with a few less borders applied.

I have replaced the tag code with the internationalised version, for the sake of consistency with the end theme.