How To Add Tabbed Widget To Thesis WordPress Theme Sidebar

Few days back I installed Thesis WordPress theme on my blog as it is the best SEO optimized WordPress theme. Today I’m going to share my first tutorial on thesis customization. In this tutorial I’ll share how to add tabbed widget to thesis WordPress theme.

If you are not using thesis then you can get your copy from here – Get thesis. If you are already using it on your blog then you can move further to the tutorial part. In this tutorial I’m using the Domtab script designed by onlinetools.

Here is the screenshot of the tabbed widget:

How to add tabbed widget

1. First of all download the zip file and upload the domtab.js file included in the zip file to your root directory.
2. Go to Page Options and paste the following JavaScript code in the JavaScript box under Home Page Options. (Replace http://yourdomain.com with your own domain name)

   <script type="text/javascript" src="http://yourdomain.com/domtab.js"></script>

3. Now copy and paste the following code to your custom.css file.

   div.domtab{
   width:100%;
   font-size:12px;
   line-height:20px;
   }
   ul.domtabs{
   float:left;
   width:100%;
   margin:2em 0 0 0;
   list-style: none;
   }
   ul.domtabs li{
   float:left;
   padding:0 .5em 0 0;
   }
   ul.domtabs a:link,
   ul.domtabs a:visited,
   ul.domtabs a:active,
   ul.domtabs a:hover{
   display:block;
   background:#FFFFFF;
   padding:5px 15px;
   color:#000;
   text-decoration:none;
   border-top:1px solid #E6E6E6;
   border-left:1px solid #E6E6E6;
   border-right:1px solid #E6E6E6;
   }
   ul.domtabs a:hover{
   }
   div.domtab div{
   clear:both;
   width:auto;
   background:#F8F8F8;
   color:#000;
   padding:1em;
   border: 1px solid #E6E6E6;
   }
   div.domtab div ul{
   list-style: none;
   }
   ul.domtabs li.active a:link,
   ul.domtabs li.active a:visited,
   ul.domtabs li.active a:active,
   ul.domtabs li.active a:hover{
   background:#E6E6E6;
   color:#000;
   }
   div.domtab div a:link,
   div.domtab div a:visited,
   div.domtab div a:active {
   color:#3800AA;
   font-weight:bold;
   }

4. Save your custom.css file.
5. Now copy and paste the following code in custom_functions.php file.

   function tabbed_widget() { ?>
   <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 the Tab 1 content here</p>
   </div>
   <div>
   <h2><a name="t2" id="t2"></a></h2>
   <p>Insert the Tab 2 content here</p>
   </div>
   <div>
   <h2><a name="t3" id="t3"></a></h2>
   <p>Insert the Tab 3 content here</p>
   </div>
   </div>
   <?php }
   add_action('thesis_hook_before_sidebars', 'tabbed_widget');

6. Save custom_functions.php file.

That’s all to add a tabbed widget to your thesis theme sidebar. You can customize it according to your theme in custom.css file. If you need any help, do ask in comments.

Insert the Tab 1 content here