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
- First of all download the zip file and upload the domtab.js file included in the zip file to your root directory.
- 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>
- 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; }
- Save your custom.css file.
- 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');
- 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
Thats something i was looking for; it help utilise your sidebar space for other cool stuff.
can it work with my site theme also??
i am not using thesis theme bt i want to add this tab on my site…….
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 🙂
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
Thanks for poiting out Kimberly. The download link is updated now 🙂
thank you, but I can’t figure out where are page option and home page option to put the javascript code
Right I love to Interest this topic. Thank you for the information.
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
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
Well nice tut there..
It adds to the visual appeal of your customized thesis theme.
thanks for the tuts, but is there no automatic plugin for this?
This doesn’t seem to be working for me either. Hm
@Michael, @william, @Beth
Please copy and paste the code in step 5 again. It must work for you.
I’ve tried a few options and seems like the javascript never works for me.
I’m putting this in sitewide JS section
That’s great tutorial, Can you explain how to add this in a customized child theme.
Hello, Is this working on Thesis 1.8? I don’t see the script working for me?
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.
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?
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.
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.
Hey simran i need related post and google ads side by side any code to help me out?
Shashank, Putting the Google Ads code in tab2 content would be sufficient I think
Wow 🙂 Dono what to do with it:) Thanks for it 😀
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???