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.

This is most convenient when you have a category where you post short links or snippets that you want to show in the sidebar or on the top of the page. Much like what the asides plugin do. But I like to do things my own way so I’m gonna show you how to do this in a very easy way.

Create a category

Let’s start by adding a category, I have for example the category “WordPress tricks” which this post is filed under. Here I post tutorials and tips for WordPress and I’m gonna display the heading with a link to the posts in the sidebar.

Adding posts

Go ahead and add some posts to your newly created category and make add the appropriate tags and if you want the posts to be filed under multiple categories thats no problem.

The code

To make the category heading appear in the sidebar we need to make a custom loop where we only want to retrieve and display the posts from our category. What you need to do is check what id your new category has, mine has the ID 17. You can check this on the categories page in WordPress admin.

Let’s start by getting the 5 most recent posts from the category with ID 17 in an ascending order. If you want a descending order substitute the “ASC” with DESC in the code below. Add this somewhere in your sidebar.php or on which ever template file you wish.

 $posts = query_posts("cat=17&showposts=5&order=ASC");

So now the variable “posts” contain our posts with all the meta data and attributes associated with a post. Now all we have to loop through all the posts and display the heading with a link and perhaps the date.

The loop

Add this to where you want the posts to appear in your sidebar. Check the comments in the code for explanations.

Now we have a nice ordered list with the title of the post with a link with the date. On my test sidebar it looks like this: