Wordpress Tutorial: Rounded Corner Tab Menu Using CSS

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.

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:

<ul id="navtabs">
	<?php wp_list_categories('title_li='); ?>
</ul>

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

#navtabs {
	list-style: none;
	padding: 0;
	height: 30px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 4px solid #0288D8;
}

#navtabs li {
	float: left;
	background: #CCE7F7 url(images/tableft.png) no-repeat left top;
	padding: 8px 0 8px 14px;
	margin-right: 1px;
}

#navtabs li a {
	background: #CCE7F7 url(images/tabright.png) no-repeat top right;
	padding: 8px 14px 8px 0;
}

#navtabs li.current-cat {
	background: #0288D8 url(images/tableft_active.png) no-repeat left top;
}

#navtabs li.current-cat a {
	background: #0288D8 url(images/tabright_active.png) no-repeat right top;
	color: #FFFFFF;
}

I’ve set up an example page here. This is just a simple HTML page (I just copy/pasted the output of wp_list_categories), but the look and feel is the same.