Anatomy of a Magazine Style Premium WordPress Theme – Part 2: DOMTab, Tabber, more
- Share Your Thoughts ↓
- 01.19.2008 - 2:43 pm
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
In continuing our efforts of slicing and dicing a Magazine style WordPress theme, we come to a very interesting juncture with Java interfaces. This probable is the most ubiquitous feature of most all magazine themes. If you think about it, it makes sense that magazine style themes use this non-obtrusive code to help manage content. These sidebar tabbed interface gives you the most bang for you buck in terms of digital real-estate.
Granted that it will not necessarily minimize bandwidth usage by loading the page any faster, but nonetheless provides an alternative to having the entire content load on each and every page (even where not needed).
From our last experiment, we have a layout constructed with featured post option and some borrowed styling. Now we will add the cool tabbed interface to the sidebar.
There are many Java options out there that can generate these tabbed interfaces, the more popular ones are DOMtab and Tabber. We will introduce one other simple tab JavaScript at the very end that has recently found its way into WP themes, but for most part, we will focus on DOMtab and Tabber.
35 Responses to “Anatomy of a Magazine Style Premium WordPress Theme – Part 2: DOMTab, Tabber, more”
Trackbacks
- How to add a tabbed interface to your WordPress blog | WordPressGarage.com
- bingo game ks1
- How To: Creating Sidebar Tabs In Your WordPress Theme
- Wp Wordpress » Blog Archive » How To: Creating Sidebar Tabs In Your WordPress Theme
- A Vertitable Tsunami of Goodness « Feet up, eyes closed, head back
- Anatomy of a Magazine Style Premium WordPress Theme - Part 3.1 “Navigation – Second Level Menu” » Headsetoptions.org
- Do I read your Blog?
- How To: Creating Sidebar Tabs In Your WordPress Theme | [Blog Tutorials]
- Great Articles | SpiderMarket
- sizzling slots bonus code
- flash kasino
- tb test » Dallas Blogging
- When To Use Magazine-Style Themes For Blogs? | How-To | Smashing Magazine
- Weekly Links: 7/31/2009
Leave a Response
Some Useful Info
Use SimpleCode while including codes.
The links from all comments have the no-follow tag to prevent spammers from gaming their way up into SERP. So please keep the comments clean, try not to use keywords as "Names" or post unnecessary links in the comments. Thank you for cooperating.
About
WP Pro was conceived and developed with one goal in mind, “To bring our experience and expertise gathered over the years to one convenient location on the web to serve the needs of bloggers and webmasters“. -Sunny
To learn more about who we are and what we can do for you, read on...
-
Archives
-
Categories
Popular Tags
Blog Design Cockney Consulting CSS Google Grid Habari Project Hosting HTML Internet JavaScript Magazine Style WordPress Themes PHP Plugin Reboot Search Engine Optimization SEO Site Validation Spam Support Tag Technology Toolbox Troubleshoot Tutorials Web Web 2.0 Web Design Web Development Web Hosting Web Sites Widget WordPress WP XHTMLBookmarks
Thanks Moses, I hope it if useful for everyone too.
This is a really great post, thanks for taking the time,i’m sure many WordPress users will benefit from this article.
Cheers.
Very use full!!!!!!!!!!
Thanks so much.
*dug
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/
@ 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
@ Mark
Thanks!
Great info. Any reason why you did not address jquerry/tabs3? Is its license too restrictive?
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.
@ 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.
Great and informative blog.
Thanks for all your hard work in getting this info to us.I’ll be eagerly awaiting all of your future posts.
where did you get this call:
there’s no latest.php file in the themes right?
so why use latest.php?
@ 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.
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.
@ 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?
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!
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?
Yep… it should be standard in every CMS, including the automatic switching mouseover DTABS. Thanks.
Nice tutorial….but i am unable to adjust CSS……not able to fix the width of the tab and top margin etc….
Please help
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
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!