Wordpress Tutorial: Adding Tabs to Your Blog Sidebar

What’s the best script?

The recent blog redesign gave me a bit of a head ache. In order to implement the tabbed navigation from my sidebar, I had to test a couple of scripts. I know all of them integrate like a charm on other Wordpress blogs, but for one reason or another, each time I finished setting up and customizing a certain script, some new weird bug showed up.

The problems were caused by various factors (some of them very weird): having other anchor links (like #comments) in my Wordpress theme, a conflict between Prototype framework used by Wordpress and jQuery used by a script, etc, etc.

So after testing DomTab, Tabifier and idTabs, I finally managed to get the job done. When all hope was lost, I thought I should give Yahoo! UI Library a shot. They have this really neat component called TabView, which in my case worked like clockwork. On top of that, it’s pretty quick and has absolutely no flicker or delay when loading the content. All the other scripts had at least a small delay.

I saw implementations of each of the above mentioned scripts on Wordpress and they all have pretty much the same HTML structure. Still, I think the Yahoo! TabView is the best choice.

Implementing Yahoo! TabView

In this Wordpress tutorial I won’t go into too many details about the script or HTML, since you can get all that info from the TabView homepage. Instead, I will focus on the specifics of using this script with Wordpress, as well as pointing out what CSS code you need to add to your style.css file, for a seamless integration with your Wordpress theme.

First of all, you need to know that you won’t be able to insert widgets into the tabbed navigation, using the visual editor from Wordpress admin. You can still add widgets, but outside the tabbed navigation.

I personally stopped using widgets in themes that I design for myself. So if you are ready to “get your hands dirty” and really customize your own theme, I think this is the best way to go.

So just add the script reference to your header.php and the HTML code to the sidebar.php file. Now you’re ready to perform some CSS surgery. We’ll use the script’s built-in styles.

The CSS explained

Styling for the tabbed panel that holds everything together (yui-navset):

.yui-navset {
	background: #E8F4FD;
	padding: 5px 5px 3px 5px;
	margin-bottom: 35px;
}

Styling for the actual tabs (yui-nav):

.yui-nav li
{
	list-style: none;
	float: left;
	margin-right: 2px;
	text-align: center;
	font-size: 90%;
	font-weight: bold;
}

.yui-nav li a
{
	text-decoration:none;
	color: #005288;
	display: block;
	padding: 8px;
}

.yui-nav li.selected a {
	background: #FFFFFF;
}

.yui-nav li a:hover
{
	color: #000;
}

Styling for the content holder (yui-content):

.yui-content {
	background: #FFFFFF;
	clear: both;
}

Of course you will also have to style the content itself, like unordered lists, paragraphs, etc. For example, my content is made of unordered lists, which have the following style assigned to them:

.tab-list li {
	padding: 8px;
	border-bottom: 2px solid #E8F4FD;
}

This adds that nice white space around the list items, as well as a 2px bottom border. That’s about it! When it comes to CSS, the possibilities are endless, so feel free to experiment. Hope this tutorial helps you make the best choice when it comes to Wordpress sidebar tabs.

For a great roundup of tab-based scripts, you might want to check this link: 37+ Great Ajax, CSS Tab-Based Interfaces.