Add a Tabbed Interface to Your Sidebar
We've all seen those neat javascript powered tabbed interfaces in the sidebars of some themes. In fact they're common place in most premium themes. Although I don't use the feature here it can come in very handy with a theme that has limited sidebar real estate. In this post I'll show you how you can easily add a tabbed interface to your own blog.
There are some fine scripts out there such as MooTabs and Tabbifier but in this example we'll be using DOMTabs from onlinetools.org. I chose DOMTabs for two reasons:
- I think it is the easiest to implement
- Michael Martin of Pro Blog Design has been kind enough to prepare a starter style sheet
First download the ZIP. It contains two files - the script itself and the accompanying style sheet by Michael.
Next, extract the contents and upload both files to your theme folder. Add the following lines to header.php ...
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/domtab.css" media="screen" />
We're done with that file. Now go to sidebar.php and add the following ...
<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>Insert contents of the first tab here,
e.g. The code for a plugin.</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>Insert contents of the second tab here.</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>Insert contents of the third tab here.</p>
</div>
</div>
You are now set. Changing the content is simply a matter of adjusting the code above. Using the accompanying style sheet prepared by Michael as a base from which to work you should be able to easily attain the look you want. If you want to see a live example you can check out my implementation on a test site at demo.wpcanada.ca. At the test site I easily adjusted the various colours and even added background images.
You can get the ZIP by clicking here.
Len has been blogging for over 10 years and is a rabid WordPress fan. In addition to blogging here you can find him writing the occasional article and toiling away in the forums at WeblogToolsCollection.com. He also hangs out at the WordPress support forums lending a hand where he can. You can also find him at his other blog LenKutchma.com
Hey, how about a link to a site that actually USES this idea?
I followed a link to this page expecting to see a tabbed sidebar.
Please show us.
AK
Hi Alan,
I don't use it on this site but I'll see if I can whip something up in the next day. I'll link to it in the original post. Thanks for the reminder - I've been meaning to set up a demo again.
Demo is up. Of course you have to adjust the styling of the DOMTabs to match that of your theme. The CSS provided is merely a base from which to start.