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.

Similar Posts (Maybe)

One Trackback

  1. [...] ordered list with links to your website pages, that we can style using CSS. You can go check my Wordpress Tutorial: Rounded Corner Tab Menu Using CSS. I used categories as menu items, but it’s pretty much the same [...]

4 Comments

  1. Posted June 6, 2008 at 5:04 am

    Thank you for this cool tuts

  2. victor
    Posted July 29, 2008 at 8:03 am

    Thanks you very very much!!

  3. Posted August 1, 2008 at 2:14 pm

    thanks for the tips!

    Fernando Souza’s last blog post: Striptease in Copacabana

  4. Posted August 9, 2008 at 12:56 pm

    Kinda nicely written actually. :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*