How To Install DomTABs on WordPress
March 24th 2008
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.
Twitter
March 24th at 10:12 am GMT
Comment #1
great article! thanks for the tutorial!
March 24th at 10:24 am GMT
Comment #2
I've tryed using domTabs and have found that it conflits with some templates.The solution i found was creating an external php file with the html code for the tabs inside it and call it in the main wordpress template.
March 24th at 12:23 pm GMT
Comment #3
Style,
No problem.
Mario,
I've had a little trouble with it here as well. Your fix sounds strange (Not quite sure how it would work! xD ), but as long as it worked, then well done.
March 24th at 12:27 pm GMT
Comment #4
I tried DomTabs a while back but for some reason they just didn't cooperate with me. Had trouble styling them.I found that I like idTabs much better: http://www.sunsean.com/idTabs/. Plus the idTabs don't interfere with the other jQuery stuff I'm using on the site.
March 24th at 1:49 pm GMT
Comment #5
I've been using this in a project, and the styling has been nice and easym installation and everything went nice. The only problem is that I need two instances on certain pages.
That idTab thing is interesting Deron, I might use that. I'll be using jQuery too, so it will be nice to not interfere.
March 24th at 1:56 pm GMT
Comment #6
Interesting.. When I see tabs, for some reason it reminds me of a magazine style theme. Personally, I like a large sidebar to compliment the post contents.
March 24th at 2:50 pm GMT
Comment #7
Great helpful post! We're going to use this in our new layout... look for it next month
March 24th at 4:21 pm GMT
Comment #8
Deron,
idTabs look great. Thanks for sharing! If it's a little less buggy to work with than DOMtabs, I might try it out in the future.
Connor,
Check out the page source of the official site. They're running 2 instances per page, so that will show ya how its done.
Brad,
But is there anything wrong with borrowing from a magazine style?
Starfeeder,
Looking forward to it!
March 24th at 5:01 pm GMT
Comment #9
Michael, the code display (in posts) doesn't work properly in op 9.26, adding a dead long scrollbar, otherwise helpful tutorial, however the domtabs are interfering with other j scripts like prototype.js.
March 24th at 5:16 pm GMT
Comment #10
Have you tried JQuery Tabs 3? (http://www.stilbuero.de/jquery/tabs_3/).I've been playing about with them on a WordPress theme I'm working on. Very slick, and with loads of options.
March 24th at 6:10 pm GMT
Comment #11
I've been trying to implement DOMtabs ever since you mentioned them the first time, but unfortunately ran into 2 problems that were too big for me. The first was the fact that apart from the "#back to top" link I also needed the "#comments" link excluded from the JS batch (very poor JS knowledge here). The second problem was a problem with styling the tabs, which may arise from the fact that the topblogger template is mostly css "id" and not "class" based. Whatever I did, the link text on the tabs would just remain standard style and changing the tab's "class" to an "id" would just break the whole script. Would you be so kind as to point me in a direction which would help me in my struggles, please :).
March 24th at 8:06 pm GMT
Comment #12
Great post. I thought about putting DOM Tabs on Webmaster-Source when I was making room for 125x125 ads. In the end I decided against it and just cut a bunch of the extraneous things out, since their functionality is available on my Archives page.
March 24th at 9:28 pm GMT
Comment #13
Great article! I was having trouble installing DomTABs on my blog until I saw this.
March 24th at 10:28 pm GMT
Comment #14
Milo,
Seems to be a problem with the <pre> tag. Thanks for letting me know.
Simon,
No, I hadn't heard of it before. Didn't realise there were this many alternatives. Thanks!
Luke,
When you loaded one of those #comments links, did most of the page disappear on you?
As for styling it, it was probably due to CSS specificity. Try this example rule:
div.domtab ul.domtabs li {color:#ffffff;}
Redwall,
You probably made the better choice there. DOMtabs can help lessen the clutter, but not so much as taking things out altogether will do!
AJ,
It can be a little awkward, can't it? xD
March 25th at 1:37 am GMT
Comment #15
Yes, it can be xD. Now I can use NicEdit by replacing Tabber
March 25th at 1:29 pm GMT
Comment #16
Michael,Yes, the div containing the "a href" the #comments points to dissapears completely (i.e. the whole content of the posts, lol).Still have to try out the styling though.
March 25th at 3:08 pm GMT
Comment #17
AJ,
Sounds good.
Luke,
That happened here as well! What you have to do is add a few blank divs. eg. Look at the page source for this page, and you'll find the very start of my page looks like this:
The stupidtabs divs are there so that DOMtabs will make those disappear, and not my actual content.
I can't tell you where exactly to put the empty divs in your page though, unless I saw a page with the error on it.
March 25th at 5:50 pm GMT
Comment #18
No, Magazine styles are fine.
Tabs are quite slick, but don't work for every design, was basically what I was trying to say..
March 25th at 6:19 pm GMT
Comment #19
Brad,
Ahh, that's true. I get you now.
March 26th at 3:52 am GMT
Comment #20
Ah, I have wanted to know how to do this, thanks for the tutorial.
March 26th at 4:31 pm GMT
Comment #21
Off-topic: Michiel, have you noticed that your DOMtabs are working buggy in Opera? It's probably easy to fix.
DOMtabs are nice, but don't use them on your page to have a smaller sidebar. Just use them for the nice effect: you don't have to reload the page to see more. It's very useable to put some information in.
March 28th at 8:15 am GMT
Comment #22
Is this so simple?? damn the hours i've lost tring to get this to work...
March 28th at 1:02 pm GMT
Comment #23
Michael, you have perfect timing, I was asked this week to add these style of tabbing to a client's site and the info supplied to me didn't look too great. Yours looks like a perfect solution
Cheers for the great post
March 28th at 4:40 pm GMT
Comment #24
Noonoo,
Yeah, I know about that (The extra border around the tabs?). I've spent goodness knows how long trying to fix it, but I can't work it out!
Ricardo,
It's only ever simple when things work the way they should. And we all know how rarely that can be!
Sarah,
No problem Sarah. Tabbing does seem to be getting very popular in blog designs, so it's a good thing to know.
March 28th at 4:46 pm GMT
Comment #25
Michael, this isn't a blog but a business site selling watches (no not fakes!). They have a list of 5 recently added products, they now want a few tabs of 5 latest rolexes, 5 latest tags etc.
It's been requested by their SEO although I'm sure the site owner will like it too
March 28th at 5:19 pm GMT
Comment #26
Sarah,
Ahh, I suppose I should have said "design in general." Hope it goes down well.
March 29th at 4:40 am GMT
Comment #27
Hello, i am really impressed with this article but i have i little problem i can not get to work my plugins, i called the plugins e.g
< ?php recent_posts(); ?>
But it does not work, am i doing something wrong?What plugins do you use?thanks a lot and sorry for my bad english
March 29th at 6:34 am GMT
Comment #28
I am trying to install domtabs into sidebar.php. How do I get popular and recent comments to appear?
March 29th at 11:29 am GMT
Comment #29
Ganha,
Are you using a widget for this? If so, you should read this post.
Mia,
You need to use plugins to get those. e.g. Get Recent Comments. You would then put the plugin code (Will be explained in the plugin's "Install" section) into the DOMtabs.
March 29th at 1:00 pm GMT
Comment #30
DomTABs are nice, they gracefully scale if you have CSS or images disabled, but they have a big problem: without Javascript enabled they don't show anything.A lot of people browse without JS (i.e. Internet point, corporate PCs...) so they would display at least the default tab in these cases.(IMHO)
March 29th at 1:52 pm GMT
Comment #31
Gianluca, I thought that at first but the original dom tabs on the site Michael linked to do display all the content without JS on, providing you use JS and CSS to hide the extra tabs as opposed to just CSS, although using document.write as the DOM tabs site suggests isn't valid Strict XHTML.
March 29th at 10:59 pm GMT
Comment #32
@Gianluca S.,About browsing without JS on. Only 2,5% of the users of the web haven't JS on. It doesn't seem to be much. But that are much people. Millions! You are right. This is a big problem. They even should show up right when JS is off. But have you ever considered how your tabs look like in the no-style mode (CSS off). Please be aware of that fact too! There are many people who have disabilities! My site is as safe as I can make it. But I change al lot to improve the look in the no-style mode.The standard WordPress mode is 100% friendly.
I want to warn everybody for this. Someone in my family has a disability and browsing on the web is a hell for her. Be nice for everyone! Everyone!
March 30th at 3:12 pm GMT
Comment #33
Gianluca,
That's true! I definitely should have mentioned that up there, so well done for pointing it out.
What Sarah has said is right, and it completely skipped my mind. In the original, you use JS for part of the CSS. In my tutorial, I've put that line of CSS into the CSS stylesheet itself. Definitely not as accessible as the JS version.
I'll have to fix that!
Sarah,
Thanks for pointing that out. You're completely right.
Noonoo,
I agree, though the accessibility of Pro Blog Design has been a little sloppy lately! I need to set aside a weekend to redo some things around here.
March 31st at 1:29 pm GMT
Comment #34
Thank you for all your help Martin :). I finally settled for tabber instead of DOMTabs as I found it easier to configure.
March 31st at 9:24 pm GMT
Comment #35
Luke,
I'm glad you've got something working now (They look great)! I'll try Tabber out as well sometime. If it's easier to set up, then all well and good to it.
April 2nd at 9:30 am GMT
Comment #36
Hey,Thanks for the tip. I have it on my blog now... however, I am having trouble with the width of the domtab... will you please have a look and suggest some quick fix?thanks
April 2nd at 12:19 pm GMT
Comment #37
Dinsan,
On line 502 of your CSS file, you've given ul.domtabs a width of 583px. Just lower that value to whatever you want it to be.
April 2nd at 1:01 pm GMT
Comment #38
I am not getting it right. Whats the exact code, and is it on the main stylesheet or the dom stylesheet, that I am supposed to add it ?
April 2nd at 1:09 pm GMT
Comment #39
It's on the main stylesheet (The style.css file in the wpdesigner theme).
April 3rd at 8:23 am GMT
Comment #40
Great tutorial! Do you have any insight you want to share when it comes to styling the output content? I'd like to style my recent comments list but I can't figure out what style tags they are attached to.
April 3rd at 11:56 am GMT
Comment #41
Mor10,
Do you know much about CSS?
It might be a little hard if you don't, but here's an example. Let's say you wanted to change the colors of those links to blue. You would add this to your theme's style.css file:
ul#recentcomments li a:link {color:blue;}
April 5th at 1:17 am GMT
Comment #42
so you style the elements dependent on the output of the plugin? problem is I can't actually see that output when I strip the code - it's hidden in the javascript.
April 5th at 5:29 pm GMT
Comment #43
Mor10,
Yep, it's the output HTML that matters for styling it.
But you can see it. Just load a page on your blog, and go to View > Page Source. You'll be able to see the HTML structure then.
(That's how I was able to do it for your blog in my last comment.)