How to Add MooTabs to Your WordPress Theme

It seems like adding tabs to display a variety of WordPress lists in the sidebar is getting very popular. It saves space and allows us to display a lot of content, not to mention, it looks kind of neat too.

Installing MooTabs is the easiest part. Styling it is the hardest part. The default template looks very ugly. Although I won’t go into great detail on how to style it, I will point out certain installation tips for WordPress sites that will improve the performance of your WordPress sites.

Step 1: Download MooTabs

Go to MooTabs’ web site to download the latest version of MooTabs. At the time of this writing the latest version is 1.2. You will also need to download MooTools. The latest version of MooTools is 1.2.1 but it does not work with MooTabs 1.2! I could not find MooTools 1.11 on MooTools’ web site.

I uploaded MooTools 1.11 to my web server. If you can’t find it anywhere on the internet, download MooTools 1.11 from us instead.

Step 2: Upload MooTabs 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 MooTabs files in the following manner:

1. /wp-content/themes/cooltemplate/css – Upload mootabs1.2.css here.
2. /wp-content/themes/cooltemplate/js – Upload mootabs1.2.js and mootools.v1.11.js here.

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

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

1
2
3
4
5
6
7
8
9
10
11

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo bloginfo('template_directory'); ?>/css/mootabs1.2.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/mootools.v1.11.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/mootabs1.2.js">
</script>
<script type="text/javascript">
window.addEvent('domready', init);
function init()
{
	myTabs_object = new mootabs('myTabs', {height: 'auto', width: 'XXXpx', changeTransition: 'none', mouseOverClass: 'over'});
}
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
if(!is_page())
{
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo bloginfo('template_directory'); ?>/css/mootabs1.2.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/mootools.v1.11.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/mootabs1.2.js"></script>
<script type="text/javascript">
window.addEvent('domready', init);
function init()
{
	myTabs_object = new mootabs('myTabs', {height: 'auto', width: 'XXXpx', changeTransition: 'none', mouseOverClass: 'over'});
}
</script>
}
?>

It does not matter what you write for the code “MyTabs_object”. However, the code “myTabs” must match the HTML code you use in the sidebar. Feel free to change “XXXpx” to your desired width. e.g. 250px.

An alternative way to initialize the MooTabs would be to save the following code into a Javascript (.js) file.

1
2
3
4
5
6
7

<script type="text/javascript">
window.addEvent('domready', init);
function init()
{
	myTabs_object = new mootabs('myTabs', {height: 'auto', width: 'XXXpx', changeTransition: 'none', mouseOverClass: 'over'});
}
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="myTabs">
	<ul>
		<li title="Tab1">Tab 1 Label</li>
		<li title="Tab2">Tab 2 Label</li>
		<li title="Tab3">Tab 3 Label</li>
	</ul>
 
	<div id="Tab1">
	</div>
 
	<div id="Tab2">
	</div>
 
	<div id="Tab3">
	</div>
</div>

This is the default code of the MooTabs. You may update “Tab 1 Label” to anything you want. The code “Tab1″ in the “li title” must match with the “div id” code below it or it won’t work. In the previous step, I have configured my MooTabs to have “auto” height so that the content I insert in the tabs will automatically stretch the height of the MooTabs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div id="post_tabs">
	<!-- MOO TAB TITLES - START -->
	<ul class="post_tabs_title">
		<li title="Latest">Latest</li>
		<li title="Popular">Popular</li>
		<li title="Comments">Most Comments</li>
	</ul>
	<!-- MOO TAB TITLES - END -->
 
	<!-- LATEST POSTS - START -->
	<div id="Latest" class="mootabs_panel">
		<?php if(function_exists('recent_posts')) { recent_posts(); } ?>
	</div>
	<!-- LATEST POSTS - END -->
 
	<!-- POPULAR POSTS - START -->
	<div id="Popular" class="mootabs_panel">
		<?php if(function_exists('popular_posts')) { popular_posts(); } ?>
	</div>
	<!-- POPULAR POSTS - END -->
 
	<!-- MOST COMMENTED POSTS - START -->
	<div id="Comments" class="mootabs_panel">
		<ul><?php if(function_exists('mdv_most_commented')) { mdv_most_commented(10); } ?></ul>
	</div>
	<!-- MOST COMMENTED POSTS - END -->
</div>

The MooTabs 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.