One of my readers recently asked me how can you add a tab based navigation to a Wordpress blog, using the wp_list_categories template tag. So I though I should create this quick tutorial, just in case there are other people looking for the same answer. (this article from rubiqube)

In this Wordpress tutorial I will implement the HTML/CSS required to create a category based main navigation, using some nice rounded corner tabs:

The rounded corner tabs

Since I will use the Douglas Bowman’s sliding doors technique, we will need 4 images, 2 for each state (normal, active). I named the images tableft, tabright and tableft_active, tabright_active. The images that will go on the right need to be wide enough, in order to accommodate the longest possible caption.

The HTML and CSS

Since this is a tab navigation, in most of the cases the HTML will go into header.php. The wp_list_categories template tag outputs a series of list items (li), one for each category item. All you need to do is place the PHP code between ul tags, like so:

Notice how the ul tag also has an id (navtabs). This will make it easier to style the menu using CSS:

Filed under: Web 2.0, CSS, Menus