Fahlstad Design

You have probably seen the tabbed sidebar panels on various websites.These are great if your sidebar are getting too populated and you need to clean it up a bit.

This tutorial will show you how to implement one using WordPress, jQuery and a jQuery plugin called jQuery.tabs.

What to display in the tabs

The first we need to determine what we want to display in the tabs, for this tutorial I will use three tabs displaying: latest posts, latest comments and Tags. You can display anything you want but for this tutorial these will do.

Functions

I have in my functions.php file for my template made these two simple functions for displaying the latest posts and comments. Go ahead and paste them into yours to make this turorial working.

What they do is simply get the latest posts and comments and displays them in an unordered list.

Making a container

We need a div container for our panel, we give this div the ID “container”. In your sidebar.php where you want the panel to be dislayed add the following code:

The tabs displayed at the very top of the panel in a simple unordered list which we attach some javascript events to via jQuery. For our purpose we add a list with our three tabs.

<div id="container">
<ul>
	<li><a href="#latest_posts">Latest Posts</a></li>
	<li><a href="#latest_comments">Latest Comments</a></li>
	<li><a href="#tags">Tags</a></li>
</ul>
</div>

The links will be used to determine what to display when we click on one tab. Now we have the initial menu, we will now be adding the content to display. We will add them all just under the menu list. We will be adding divs to hold the content with the id of the links in the menu list.

<div id="container">
<ul>
	<li><a href="#latest_posts">Latest Posts</a></li>
	<li><a href="#latest_comments">Latest Comments</a></li>
	<li><a href="#tags">Tags</a></li>
</ul>
</div>

I the next part we will take a look at the Javascript to make it happen.
Hang in there.