How to Add Tabber to Your WordPress Theme

This post is quite similar to my previous post on how to add MooTabs to WordPress. I recently tested Tabber on my internet marketing blog and I find that it is better than MooTabs because it is compact in file size, easier to install and customize.

The default Tabber look and feel is acceptable. I did not need to make a lot of changes to make it look good on my web site. Compared to MooTabs, Tabber requires a lot less work to customize.

Step 1: Download Tabber

Go to Tabber’s web site and download the latest version of Tabber.

Step 2: Upload Tabber to Your WordPress Theme’s Folder

I like to store my Javascript files in a folder called “js”. For my CSS files, I like to store them in a folder called “css”. Let’s assume my template folder is called “cooltemplate”, you should upload the Tabber files in the following manner:

1. /wp-content/themes/cooltemplate/css – Upload example.css here. Alternatively, copy and paste all the contents of example.css into your theme’s style.css.
2. /wp-content/themes/cooltemplate/js – Upload tabber.js here.

Step 3: Add Tabber References to Your WordPress Theme’s header.php

Add the following code to your theme’s header.php file in between the head tags.

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber { display: none; }<\/style>');</script>

If you only display Tabber on the blog pages, do this to prevent the loading of the Tabber files on non-blog pages.

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber { display: none; }<\/style>');</script>

Step 4: Add Tabber Code into Your WordPress Theme’s sidebar.php

<div class="tabber">
     <div class="tabbertab">
	  <h2>Tab 1</h2>
	  <p>Tab 1 content.</p>
     </div>
     <div class="tabbertab">
	  <h2>Tab 2</h2>
	  <p>Tab 2 content.</p>
     </div>
     <div class="tabbertab">
	  <h2>Tab 3</h2>
	  <p>Tab 3 content.</p>
     </div>
</div>

This is the default code of the Tabber. The text between the h2 tags will be displayed as the titles of each tab. You don’t have to display the content of each tab in the between the p tags. I did it with the HTML list tags.

<div class="tabber">
	<div class="tabbertab">
		<h2>Recent</h2>
	</div>
	<div class="tabbertab">
		<h2>Popular</h2>
	</div>
	<div class="tabbertab">
		<h2>Most Commented</h2>
		<ul></ul>
	</div>
</div>

The Tabber is a great place to insert all the comments and post lists. I personally use it to display the recent posts, popular posts, most commented posts, recent comments and top commenters.