How to Create Tabs in your WordPress theme using DOMtab

15 Dec, 2009 | Igor

Topics: web design, Wordpress Customization

Dom Tabs Save Space
If you run a blog for a longer time, you will notice that there is always more and more contents to display but less and less space for it. A solution for that can be the tabs feature. The Tabs are used in sidebars but also in the header for providing easy navigation and make information more available in a compact space. By using tabs you can have wide variety of content on your blog and all you need is to click on any tab and only the content for that tab gets displayed and the rest of the tabs’ content remains hidden.

In my own experience the domtabs is probably one of the best ways to create Tabs. Domtab is actually a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded.

First you need to download the domtab script from this site, unzip it, and then you should upload the domtab.js file to your theme folder in WordPress.

After all that done go in header.php and paste the following code in the <head>:

<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/domtab.js’; ?>”></script>

Then go to the sidebar.php and paste this code where you want the domtabs to be:

<div>
<ul class="tabs">
<!-- TO change tab heading, edit the three TabLink heading below -->
<li class="TabLink" onClick="ShowTab(0)"><a class="t"></a></li>
<li class="TabLink" onClick="ShowTab(1)"><a class="t"></a></li>
<li class="TabLink" onClick="ShowTab(2)"><a class="t"></a></li>
<!-- If you add more tabs, add heading above and respective NavLinks below -->
<li class="NavLinks"><div style="display:none"></div></li>
<li class="NavLinks"><div style="display:none"></div></li>
<li class="NavLinks"><div style="display:none"></div></li>
</ul>
<div>
<!-- First Tab Code -->
<div class="TabContent" style="display: none" id="div0">
<ul>
<?php wp_list_categories('orderby=name&title_li&show_count=1'); ?>
</ul>
</div>
<!-- Second Tab Code -->
<div class="TabContent" style="display: none" id="div1">
<ul>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
</div>
<!-- Third Tab Code -->
<div class="TabContent" style="display: none" id="div2">
<div>
<ul>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">ShowTab(0);</script>
</div>

Or you can make this code as a separate tabs.php and use <?php include(“”); ?> in the sidebar.php like this:

<ul>
<li>
<?php include("tabs.php"); ?>
</li>
</ul>

Finally you can do the styling in your stylesheet. Here is an example styles suitable for the previous code:

/************** TABS *******************/
.domtab {
float: left;
margin-bottom: 25px;
}
ul.tabs {
width:300px;
height:50px;
padding:0;
margin:0;
float:left;
}
div.TabContent {
padding:0;
margin:0;
float: left;
background: #e1e6fa url(images/tab_div.jpg) center bottom no-repeat;
}
div.TabContent ul {
padding:0 10px 20px 10px;
width: 280px;
font-family: "Lucida Sans Unicode";
}
div.TabContent ul li {
border-bottom: 1px solid #c4d7ed;
}
div.TabContent ul li a {
text-decoration: none;
color: #183152;
}
div.TabContent ul li a:hover {
color: #d95a11
}
ul.tabs li {
float:left;
display:inline;
padding:0;
margin:0;
border-bottom: none;
}
.TabLink {
background: transparent url(images/tab_li.png) top left no-repeat;
}
a.t {
float:left;
height:50px;
margin:0;
}
#tab0 {
width: 105px;
background: transparent url(images/tab0.png) top left no-repeat;
cursor:pointer;
}
li.active#tab0 {
background: transparent url(images/tab0.png) bottom left no-repeat;
}
#tab1 {
width: 92px;
background: transparent url(images/tab1.png) top left no-repeat;
cursor:pointer;
}
li.active#tab1 {
background: transparent url(images/tab1.png) bottom left no-repeat;
}
#tab2 {
width: 103px;
background: transparent url(images/tab2.png) top left no-repeat;
cursor:pointer;
}
li.active#tab2 {
background: transparent url(images/tab2.png) bottom left no-repeat;
}
#tab3 {
width: 91px;
background: transparent url(images/tab3.png) top left no-repeat;
cursor:pointer;
}
li.active#tab3 {
background: transparent url(images/tab3.png) bottom left no-repeat;
}

I hope this quick little trick will help you enough space where you’ll be able to display more content.

3 Comment