Anatomy of a Magazine Style Premium WordPress Theme – Part 2: DOMTab, Tabber, more

Share Your Thoughts ↓
01.19.2008 - 2:43 pm

Welcome back! Have you subscribed to my RSS feed? If not, please consider doing so. Thanks for again for visiting!

Tabber interface

DOMtab vs. Tabber

Now depending on whether you plan on using the theme yourself, distribute it for free, or resell, you need to check the licensing on each of these Java to ensure you are complying with the license agreement.

Commercial use of DOMtab would require special permission from the author, but use on your personal site is completely fine.

This piece of JavaScript is probably the most commonly used interface, but seldom used in magazine style premium themes for the simple reason that premium themes have a price tag attached to it, making it commercial.

The alternative to this in the Tabber interface, very similar in function, but absolutely free to use in all projects including commercial, making it the tabbed interface of choice.

You will need a copy of one of these if you plan on creating a tabbed interface, so go ahead and download the full copies of one of em from the links below.

DOMtab was created by Christian Heilmann and can be downloaded by visiting Onlinetools.org and click on the Download Tab. Tabber is the work of Patrick Fitzgerald of Barelyfitz.com, visit his site to grab a copy.

Structure and Style

These JavaScript rely on two thing for the tabbed interface to work, first is its structure which is mostly written in our case in HTML or XHTML and second, the styling within the Cascading Style Sheet or CSS. Put together, the Java simply manipulates how the style affects the display of the structure. In other words, the structure loads in its complete form, however, the style hides parts of it by overlaying the display panel one over the other, resulting in the interface as we see it.

Sub-pages: 1 2 3 4 5 6

HTML, Magazine Style WordPress Themes, Tutorials, Widget, WP, XHTML

Design, How to, Resources, Tips

Sunny

January 19, 2008 • 7:46 pm

Thanks Moses, I hope it if useful for everyone too.

Moses Francis

January 19, 2008 • 7:36 pm

This is a really great post, thanks for taking the time,i’m sure many WordPress users will benefit from this article.

Cheers.

Mark

January 20, 2008 • 3:34 am

Very use full!!!!!!!!!!
Thanks so much.
*dug

Chris Heilmann

January 20, 2008 • 4:06 am

Interesting to see my domtab pimped here

Just two quick notes: All of these are JavaScript, not Java. Java is the same to JavaScript as Car is to Carpet. As there are (heaven forbid) still tabbing solutions out there that use Java Applets for this kind of effect, it’d be good to not put them in one sentence.

Furthermore there is also the YUI tabbing solution that is totally free and was built by yahoo and used on their own news and sport sites: http://developer.yahoo.com/yui/tabview/

January 20, 2008 • 8:31 pm

@ Chris

Thanks for pointing out YUI tabs, we recently redesigned mandarinmusing.com using YUI grids but never touched the tabs! Also, I will make sure I distinguish between Java and JS in the future

January 20, 2008 • 8:37 pm

@ Mark

Thanks!

don

February 22, 2008 • 6:03 pm

Great info. Any reason why you did not address jquerry/tabs3? Is its license too restrictive?

Shanx

February 22, 2008 • 7:47 pm

Tabber and domTabs are for people who don’t want to import a huge library into their pages. YUI, JQuery, Mootools, and especially Sccriptaculous type libraries are for many other bells and whistles. If you don’t use all that functionality, then just stick to a specific JS include from Tabber. Personally, I think the stuff from dynamicdrive.com is fantastic and lightweight as well.

February 22, 2008 • 8:58 pm

@ Don

I could not cover them all, I will try and mention them in the next post in the series.

@ Shanx

Thanks for pointing out the many options that are out there.

john

March 1, 2008 • 2:14 pm

Great and informative blog.

James

March 1, 2008 • 2:31 pm

Thanks for all your hard work in getting this info to us.I’ll be eagerly awaiting all of your future posts.

anne

May 9, 2008 • 9:25 pm

where did you get this call:

there’s no latest.php file in the themes right?
so why use latest.php?

May 11, 2008 • 9:30 am

@ anne

You are right, there is no latest.php, it should read tabs.php (made the corrections) and that is the file with the Tabber JS. I keep the JS in its own file so that we can easily disable the feature if an edit fails by commenting the call for that file in your sidebar.

guzfrie

May 20, 2008 • 12:41 am

Hi sunny,
This tutorial is very useful, especially for me as a complete novice in programming.
But as I use a fixed width sidebar, the number of tabs can be displayed neatly is limited. If I included too many tabs whose the total width is greater than the sidebar width, my tabs would mess (disorderly stacked). How can I fix this problem?
Sorry for bothering you with this question since I don’t know where to ask help. Thank you.

May 20, 2008 • 5:49 pm

@ guzfrie

That is a limitation which can be addressed only by finding alternative way to represent the tab headings, have you considered using simple icons in place of headings to minimize tab width?

BioTecK

June 4, 2008 • 3:03 am

Some cool info!
At first I didn’t knew what to choose (Domtab Or Tabber) but then I figured that Tabber is much easier to work with and style it!

John R

June 5, 2008 • 11:24 pm

This is exactly what I’ve been looking for! However, I’m trying to implement these on a new site I’m building using WordPress, and I’m having trouble. For some reason the ‘tabs’ are all one under the other and 100% wide and there’s a small gap between the tab and the content box.

The right side bar in the template CSS is an ID, not a class. I thought maybe that cause the problem, so I changed it to a class. Yet, that didn’t make a difference except to make the gap below the bottom tab and the tab content box smaller.

Any thoughts?

steen clausen hosting center cph

August 24, 2008 • 6:23 pm

Yep… it should be standard in every CMS, including the automatic switching mouseover DTABS. Thanks.

Ganesh

July 27, 2009 • 2:52 pm

Nice tutorial….but i am unable to adjust CSS……not able to fix the width of the tab and top margin etc….

Please help

Ken

November 8, 2009 • 2:06 pm

Hi Sunny,

In the first step you mention creating a file called tabs.php. Is it possible to get a link to see how that page actually looks?

I’m trying to create a few tabs including a wordpress categories tab. The tab panel shows but the tabs don’t work when clicked on.

Also the tab box as a whole seems to run right into the box below it (no separation) and unwanted bullet points are showing.

Any help appreciated.

Kind Regards,
Ken

Sunny
November 9, 2009 • 9:51 pm

Ken,

Go to http://www.wppro.org/about/ and scroll down to the list of themes. Click and download “The Box” theme (or any other newer theme) and you will find within the theme folder a file called “tabs.php”, use that in conjunction with the included “js” folder. Two thing to add to your theme files are the style for the tabs in your style.css or style.php and the call for the JavaScript from within your header.php file. Hope that helps, let me know!