• Home
  • Services
  • Facebook
  • Privacy Policy

TricksDaddy

  • Home
  • Services
  • Facebook
  • Privacy Policy

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:

Thesis 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

Share On
 Previous Article 20 Beautiful HD Nature Desktop Wallpapers
Next Article   How To Add Multi Level jQuery Navigation Menu To Thesis WordPress Theme

25 Comments

  1. Shanker Bakshi
    July 11, 2010 at 9:48 am

    Thats something i was looking for; it help utilise your sidebar space for other cool stuff.

  2. TechGopal
    July 13, 2010 at 3:34 pm

    can it work with my site theme also??
    i am not using thesis theme bt i want to add this tab on my site…….

    • Simrandeep
      July 13, 2010 at 11:30 pm

      Yes, it will work with any wordpress them but for non thesis theme you have to put the coding given in step 5 in sidebar.php file and remove the first and last two lines.

      If you are facing any problem, do not hesitate to leave a comment. I’m always here to help you 🙂

  3. Kimberly Castleberry
    July 15, 2010 at 6:25 am

    The download link is pointing to and thus broke. It needs to point to which worked just fine.

    Thanks, I’ve been looking for this a while!
    Kimberly

    • Simrandeep
      July 15, 2010 at 8:30 am

      Thanks for poiting out Kimberly. The download link is updated now 🙂

  4. Jean
    July 18, 2010 at 10:07 pm

    thank you, but I can’t figure out where are page option and home page option to put the javascript code

  5. Mike
    August 24, 2010 at 7:09 am

    Right I love to Interest this topic. Thank you for the information.

  6. Beth @ In Good Cents
    September 29, 2010 at 7:44 am

    Have you looked into adapting this for Thesis 1.8? I can’t get it to work. I’ve followed all the steps and even messed with it a bit, but all I get is this on my sidebar from the Custom Functions without any CSS styling.

    * Tab 1
    * Tab 2
    * Tab 3

    Insert the Tab 1 content here
    Insert the Tab 2 content here
    Insert the Tab 3 content here

    • william
      October 11, 2010 at 11:56 pm

      I have the same problem no css styling and this in sidebar:

      * Tab 1
      * Tab 2
      * Tab 3

      Insert the Tab 1 content here
      Insert the Tab 2 content here
      Insert the Tab 3 content here

      Im using THESIS 1.8

      Any suggestions?

      Thank you very much

  7. Techfudge
    October 7, 2010 at 10:40 pm

    Well nice tut there..
    It adds to the visual appeal of your customized thesis theme.

  8. igoydude
    November 26, 2010 at 9:44 am

    thanks for the tuts, but is there no automatic plugin for this?

  9. Michael
    December 2, 2010 at 11:16 am

    This doesn’t seem to be working for me either. Hm

  10. Simrandeep
    December 2, 2010 at 12:26 pm

    @Michael, @william, @Beth

    Please copy and paste the code in step 5 again. It must work for you.

    • Michael
      December 2, 2010 at 12:29 pm

      I’ve tried a few options and seems like the javascript never works for me.
      I’m putting this in sitewide JS section

  11. rakesh
    March 25, 2011 at 6:07 pm

    That’s great tutorial, Can you explain how to add this in a customized child theme.

  12. Lijin
    April 13, 2011 at 3:56 pm

    Hello, Is this working on Thesis 1.8? I don’t see the script working for me?

  13. Lijin
    April 17, 2011 at 2:08 pm

    Hello,

    I’m using Thesis 1.8 version and would be great if you can tell me were exactly should i place

    You response will be greatly appreciated…..Thanks in advance.

  14. Alyzande
    April 21, 2011 at 2:00 am

    The tabbed content is working, however it is displaying at the top of my sidebar, above important Search and Subscribe widgets. How can I move it? Which hook should I use and how please?

    • Alyzande
      April 21, 2011 at 2:01 am

      Also, is it possible to add widgets into the tabbed areas? I would like to show my hot topics in one tab, recent comments in another, etc.

  15. cj
    April 22, 2011 at 3:31 am

    is there a way to add a thumbnail beside the latest post, avatar for the comments ?

    it would be nice if you can provide us any reference on how to do achieve that but then tutorial is great definitely.

  16. shashank
    August 18, 2011 at 6:00 am

    Hey simran i need related post and google ads side by side any code to help me out?

    • Mark
      November 11, 2011 at 2:47 pm

      Shashank, Putting the Google Ads code in tab2 content would be sufficient I think

  17. umashankar
    December 29, 2011 at 8:58 pm

    Wow 🙂 Dono what to do with it:) Thanks for it 😀

  18. Nikhil
    May 7, 2012 at 10:31 am

    Its not working for me…i am using thesis 1.8.4 but this is not working. I have done all the steps you mentioned above but no luck..so what to do???

  19. Pingback: Tweets that mention How To Add Tabbed Widget To Thesis Wordpress Theme Sidebar -- Topsy.com
© Copyright. Theme by BloomPixel.