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.

   <script type="text/javascript" src="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>
   <ul>
   <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

Incoming search terms:

• cool border thesis wordpress theme
• thesis widgets
• thesis tabs wordpress
• Thesis Tabbed Widgets
• thesis tabbed widget
• thesis sidebar border
• thesis insert javascript in widget
• thesis add color to widget tabs
• domtab and thesis 2010
• thesis wordpress tutorials

Tagged as: sidebar, tabbed widget, Thesis, thesis customization, Thesis theme

Article by Simrandeep

Simrandeep is the owner and editor-in-chief of TricksDaddy. He is a part-time blogger from India. Catch him on Facebook and Twitter.

Simrandeep has written 394 awesome articles.