How To Install DomTABs on WordPress
Have you ever seen blogs where the popular posts, top commentators, and blogroll are all tabbed into one small area? Those blogs are using DOMtabs.
DOMtabs is a free script and by using the guide below, its quick to install. I've also created a simple stylesheet that you can use to easily restyle your DOMtabs.
You can see DOMtabs in action in the sidebar here on Pro Blog Design. It is a very user-friendly way of saving space on the page, and cutting your clutter.
Lastly, this guide is written with WordPress in mind, but the script can be used anywhere. If you're on another platform, try applying the steps to your own platform, or read the help on the script's site, and comment here for help if you need it.
5 Step Guide to Install DOMtabs
- Download the script from the official site, and unzip it on your computer.
- Upload the domtab.js file to your theme folder in WordPress.
- Download pbd_domtab.css (Right click, "Save Target As" or "Save Link As"), and upload that to the theme folder as well.
- In header.php, paste the following above </head> :
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" /> - In sidebar.php, or in a widget if you use widgets, paste the following where you want the DOMtabs to go:
<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 contents of the first tab here, e.g. The code for a plugin.</p> </div> <div> <a name="t2" id="t2"></a> <p>Insert contents of the second tab here.</p> </div> <div> <a name="t3" id="t3"></a> <p>Insert contents of the third tab here.</p> </div> </div>
And that's you done. If you want to add another tab, just make another copy of one of the sections. There is no limit on the number you can have.
You can customize the colors and appearance by editing the pbd_domtab.css file. The lines to change have been highlighted at the top of the file.
If you have any problems, just comment below and I'll help out.
Update: A lot of people have issues with parts of their page disappearing when you click an in-page link (e.g. the /post/#comments link). Thanks to Mike Smith for sharing a solution to that problem!
Enjoy this post? Get future updates sent to you for free! Join by email or RSS.
About the Author - Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies. Written on 24th March 2008.
2nd June, 10:15 pm GMT
By the way am using atomic blogging, and it seems like Alvin never reply to me even I post on his blog...zzzzz...He use it on his blog theme but he never design it in his new theme, was wondering what is he thinking?
5th June, 5:06 pm GMT
if i add a class to the css of the domtabs, i doesn't work, why?
i want to make my doomtabs to look like yours, and i don't know how, can you explain please, a link, something?
29th June, 9:27 pm GMT
Ok. There's a big huge "hubba hubba" missing here.
21st June, 8:34 pm GMT
Wonderful Post, its works great.
Thanks Much!
22nd June, 6:23 am GMT
I Need To LEarn All This Stuff
17th July, 8:44 am GMT
@Comment10 but jQuery break Lightbox and share-it
11th August, 5:55 pm GMT
i wanna insert two group of tab. each will have three tab. but i cant do it by this code. when i push the tab which one is up the tab is bottom acts also. what should i do?
12th August, 11:59 pm GMT
Talat.
For the second one, use the same code for the domtabs, but everywhere you see a "t1" "t2" etc, change it to "s1" "s2" etc.
15th September, 11:56 pm GMT
Hi Micheal, Looking for some more good content..
Miss reading your blog man.
16th September, 8:36 pm GMT
Brad,
), but I'll be writing again soon. And some guest posts lined up as well! 
Things have been pretty busy lately (And un-busy. Holidays are fun!
24th September, 10:59 am GMT
I have been looking for this for a while now. Gonna try this out right now
26th October, 8:11 am GMT
I am trying this on a site running revolution theme and it seems to work, but the page lags on loading which is kind of a drag.
19th November, 10:38 am GMT
Hi, I find that this does not work with the "wp recent comment" plugin. If I put the code that the plugin uses to generate recent comments inside the DomTABs, it displays nothing under that tab. In fact, if I check the source file of the page I can see that the content has actually been generated, but it just does not show up on the page. I guess if might has something to do with javascript, as the "wp recent comment" plugin uses some js to control the display of its content, and that js might intervene with DomTABs' js and produces nothing.
Can you see to it? Many thanks.
19th November, 10:40 am GMT
Sorry, a typo: "I guess if might has" should be "I guess it might have"
27th November, 7:30 am GMT
i agree with your opinon. thank you for this post. very intresting. i like it.
7th December, 6:42 am GMT
Okay, I have spent 24 hours, literally, on this domtab! I got it installed but I have a couple of things I cannot get to work right. I thought I should ask for help as I have very little hair left...LOL
1. Can I make the main content box a static size instead of variable by content?
2. How can I add my democracy poll info to a tab's content box (I have tried every code I can get my hands on to no avail)?
3. What would the code be to get a double columned featured ( or recent posts) section like on this page (http://www.womenpreneurs.info/) below the flash picture viewer?
I have tried to do this on my own...but I fear I am in a "little" over my head...LOL. Any help you could give me would be much appreciated!
blessings,
Wendy
13th December, 10:36 am GMT
My comment pop up link does not work after inserting domtab.js before the /head tag.When I click on comment pop up link comment_template is visible for few seconds,then it is disappears.Please giveme a solve as I am not an expert coder.
14th December, 3:20 am GMT
Sorry, I never use the comments popup link. I'm not sure what's wrong with it.
I've had a similar-ish error a few times with the DOMtabs script though. It picks a completely unrelated div from the code and hides it. The only way I've found to fix it was to go through the code and add blank s in a few places until you found the right now, so that DOMtabs would hide one of your empty s, instead of any actual content.
I'm not sure how exactly to get that to work with the comments popup, sorry!
4th January, 7:34 pm GMT
Hi
Nice article.
Always nice to read some tips concerning the appearance of our blogs.
Jack
12th January, 4:36 am GMT
Thanks Michael it's interesting i will try to install on my Wordpress 3.7.
Thank you!
22nd January, 6:03 am GMT
Hi, i wanted to know why it doesn't work on m site?, could you please check it out my url is http://www.beta.techappeal.com.mx thank you very much
3rd February, 6:47 pm GMT
very nice !!!!
7th February, 8:07 pm GMT
Thanks, but practically speaking, how would I go about getting actual content in the tabs? For example, If I have a "Recent comments" tab, what code do I insert in the "Insert contents of the second tab here." section to display the recent comments?
Also if I wanted to have a "Popular Posts" tab, what code would I need to use to show the most popular posts?
26th February, 1:40 am GMT
There are several variations of “dom tabs” out there, and lets be honest they work pretty well. If a user has javascript everything works as planned,
27th February, 12:23 pm GMT
True, there are quite a few versions now. I've only written up domtabs here because it's the one that I know. I always use it now.
26th February, 1:54 pm GMT
I really wanted to put DomTABS like this in my blog. Thanks for the tutorial.
27th February, 12:21 pm GMT
Good luck, they're a pretty great feature to have. Saves lots of space!
5th March, 2:36 pm GMT
Thanks for sharing
5th March, 5:17 pm GMT
Nice Info.. thanks.. i'll try soon
6th March, 4:42 am GMT
nice posting, thanks for information
6th March, 6:33 am GMT
nice posting, i wanna try this tutorial..its very interesting..
thanks for sharing with us..
6th March, 12:25 pm GMT
nice trick dude,,,,
keep posting
good luck
best regard
nyubi
7th March, 6:32 am GMT
i add a class to the css of the domtabs, i doesn't work, why?
i want to make my doomtabs to look like yours, and i don't know how, can you explain please, a link, something?
7th March, 6:49 am GMT
realy nice blog....great
keep on working
7th March, 7:52 am GMT
nice info... thanks
10th March, 6:31 am GMT
Wow, nice tips. Thanks for sharing..
14th March, 9:08 am GMT
very very good, Thanks for sharing, I will look for go on.
16th March, 8:53 pm GMT
Here is a short list of plugins that I can/can't get to work within the domtabs. I'm not sure what the problem is, but I've noticed that domtabs doesn't like divs inside it so you have to use span classes which limits things a bit.
Can:
Last viewed post
Get most viewed post (Lester Chan)
Get Least Viewed post (Lester Chan)
Recently modified post
Recent comments
Total comments on blog
and also the_query = new WP_Query('showposts=XXX&orderby=XXX')
Can't:
Contextual Related Posts
Highest Rated (Lester Chan)
Lowest Rated (Lester Chan)
22nd March, 2:07 pm GMT
Thanks for this valuable information
2nd April, 8:39 am GMT
globalsewingmachine.com
23rd April, 9:14 am GMT
This is great and very usefull, thanks for sharing!
24th April, 4:22 am GMT
Thank you very much for share this,it's very Good,you had help me solved my difficult.
2nd June, 2:53 pm GMT
It's nice posting, i believe that this information can help the bloggers and thanks a lot for sharing.
12th June, 9:48 am GMT
Very nice, easily done with this guide. thank you very much!
Zemalf´s last blog ..IntenseDebate Plugin Breaks the Admin Area in WordPress – Correction is Coming [WordPress 2.8]
18th June, 7:34 am GMT
Thanks for your sharing this information
r4i´s last blog ..R4i-SDHC Revolution for NDSi/NDSL/NDS
18th June, 8:20 pm GMT
Thanks! Works great!
Nate Defosses´s last blog ..Hallelujah! And pass the Lysol spray!
19th June, 3:14 pm GMT
Okay so here is a large issue with the JS from domtabs and Wordpress - at least with 2.8
When using the more tag of Wordpress and domtabs together it breaks the more tage functionality. What do I mean by this? Well when I have my domtabs and use a more tag in a post the content rolls up and dissapears for all users.
So the main url with a "read more of this entry" in it, once clicked takes you to a url like this
http://www.url.com/post-name/#3548 - when you arrive at this link - it shows content very quickly and then it rolls up and dissapears.
ANY HELP WOULD BE APPRECIATED
Thanks much
20th June, 12:51 pm GMT
Let me know your site address over email and I'll take a look for you. I know the problem, I've had it on quite a few sites by now, and the only fix I have for it sucks...
6th July, 2:35 am GMT
good , Thanks for your sharing this information
r4ds´s last blog ..R4i-SDHC Revolution for NDSi/NDSL/NDS
6th July, 8:38 pm GMT
Hey Michael,
I am going to chime in and give you the same question as Atomic Popcorn... with wordpress 2.8 I am having the error that every time I click a link like this:
http://www.bloggingtips.com/20.....ent-327479
The DOMtab script is causing the comments to move up the page and the post to disappear. Would love to get a workaround (even if it sucks haha). Would love if you could email me at the email address I am commenting with.
Thanks
Mike Smith´s last blog ..BTM is rebranding as GUERRILLA (very soon)
6th July, 9:00 pm GMT
Just as I posted this, I found a solution
http://wordpress.org/support/topic/223420
changing "none" to "block" in the domtab.js file seems to fix it. Just thought I'd pass it along.
Mike Smith´s last blog ..BTM is rebranding as GUERRILLA (very soon)
6th July, 9:14 pm GMT
Thanks a lot for sharing that Mike! My fix before now had been horrible, I just put in empty s which the script would then hide, leaving the real ones untouched. It worked, but it was a hack!
Will update the post now with that link!