How to Create Tabs in the Sidebar of WordPress Blog


These days if you look at any premium theme you can see tabs feature in the sidebar. These special Tabber contains tabs, which are a way to put in and display more content in less space. These tabs are used in sidebars and also in the header part for providing easy navigation. It can have wide variety of content like recent posts, comments, archives, tags etc. When you click on any tab, only the content under that particular tab gets highlighted and the rest of the tabs’ content stays hidden.

To create tabs in your sidebar you will need any Tabber plugin. This will be good if your theme is widget ready. But the best way I recommend is DomTabs. You can download them file here : Domtabs. This domtabs is one of the best way to create your own Tabs. Here is the procedure to make your own tabbed sidebar..

After downloading the file, Extract the domtab.js and domtab.css files from the archive and place it in your theme folder along with other pages.

Now add the following code in your header.php file above the </head> tag.

<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" />

Now add the following code where you want to display your tabs. The most common place is the sidebar. You can even customize these tabs the way you want depending upon your requirement..

<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>

The content of these tabs can be changed by altering the code in the <p> and </p>. If you want to change the size and styling of the Tabs, you can edit the domtab.css file. If you got any other easy ways to create tabs, please mention them here as comments.

Comments

Leave a Reply