[Tutorial] Create a tabbed AJAX area in Wordpress

**KoOL** · 06-12-2008, 02:23 PM

A lot of blogs are now opting for a tabbed area in the sidebar which contains some of the widgets that were previously on the sidebar, this saves space and makes the interface much more manageable.
This effect is achieved with a mix of Javascript and CSS and in this tutorial I will show you how to get it set up on your site, I will be using three tabs like on Help Developer, these will be Recent Posts, Categories and Archives. This tutorial is an extension of Justin Tadlock’s post here.

Firstly download these two files: tabs.js and jquery.js
Now open your header.php file in the wordpress template that you are using and add the following code between the <head> and </head> tags:
<script type=”text/javascript” src=”<?php echo bloginfo(stylesheet_directory) .’/jquery.js’; ?>”></script>
<script type=”text/javascript” src=”<?php echo bloginfo(stylesheet_directory) .’/tabs.js’; ?>”></script>
Now go to the sidebar.php file and add this code where you would like it to appear on the sidebar, preferably nearer the top.
<div id=”sidebartabs”>
<div class=”tabbed”>
<ul class=”tabs”>
<li class=”t1″><a class=”t1 tab” title=”Recent Posts”>Recent Posts</a></li>
<li class=”t2″><a class=”t2 tab” title=”Categories”>Categories</a></li>
<li class=”t3″><a class=”t3 tab” title=”Archives”>Archives</a></li>
</ul>
<div class=”t1″>
<ul>
<?php wp_get_archives(’type=postbypost&limit=10&format=h tml’); ?>
</ul>
</div>
<div class=”t2″>
<ul>
<?php wp_list_categories(”); ?>
</ul>
</div>
<div class=”t3″>
<ul>
<?php wp_get_archives(’type=weekly&format=html’); ?>
</ul>
</div>
</div>
</div>
No open the style.css file and add the following code somewhere in the stylesheet (take note of the red comments):
#sidebartabs { /* acts as the widget container */
clear:both;
width:280px; /* this was an appropriate width for my sidebar, this may be different for you. */
margin-left:10px;
margin-bottom:20px;
margin-top:0px;
display:block;
}
#sidebartabs .tabbed div a { /* This is the styling for the links inside any of the tab areas */
padding-left:3px;
padding-top:5px;
padding-bottom:5px;
display:block;
font-size:10pt;
color:#999999;
border-bottom:#ababab 1px solid;
text-decoration: none;
clear:both;
text-align:left;
margin-left:0px;
margin-right:4px;
margin-top:0;
margin-bottom:0;
width:270px;
}
#sidebartabs .tabbed div a:hover { /* This is the styling when you hover over links in the tabbed area */
color:#777777;
text-decoration: none;
}
.tabbed { /* This is the tab area container */
margin-bottom:10px;
clear:both;
margin-top:0px;
}
.tabbed ul.tabs { /* This is the styling for the tabs themselves */
float: left;
display: inline;
width: 100%;
margin: 0;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
}
.tabbed ul.tabs li { /* Styling for each individual tab */
list-style-type: none;
float: left;
margin: 0;
padding: 0;
z-index:10;
}
.tabbed ul.tabs li a { /* Styling for the link on the tab */
overflow: hidden;
display: block;
margin: 0 1px 0 0;
padding: 10px 12px;
background-color:#efefef;
cursorointer;
}
.tabbed ul.tabs li a:hover { /* This is the styling for when you hover over a tab */
text-decoration:none;
}
.tabbed ul.tabs li a.tab-current { /* The styling for the activated tab */
background-color:#e8e8e8;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:#cda2a2 solid 2px;
}
.tabbed div { /* This is the tab area for each tab, the inside of the tab */
float: left;
display: block;
background-color:#e8e8e8;
padding:10px;
clear:both;
width:100%;
padding-bottom:20px;
border:1px solid #CCCCCC;
border-bottom:#cda2a2 solid 2px;
margin-top:-1px;
z-index:1;
}
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
display: none;
}
This should produce something like the tabbed are on the Help Developer sidebar. You can change the styling above to add images to the tabs or change the sizing. You can also add more tabs by adding the following lines:
<li class=”t4″><a class=”t4 tab” title=”NewTabName”>NewTabName</a></li> under the <li class=”t3″><a class=”t3 tab” title=”Archives”>Archives</a></li>
AND THEN…
<div class=”t4″>
INSIDE CONTENT
</div>

AND SO ON…