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!
The installation of DOMtab is similar, instead of the tabber.js, you add domtab.js, replace the style from example.css with that from domtab.css and change the code in tabs.php with the example code for DOMtab above (note that you can not sell a theme with DOMtab, so if you are making a paid premium theme, stick with Tabber).
How to add WordPress template tags?
This really is the easy part. Identify the template tags (learn about tags here: http://codex.wordpress.org/Template_Tags) that you need. Just copy them and paste it as shown below along with the required type attributes like ordered and unordered lists.
<div class="tabber">
<div class="tabbertab">
<h3>Archive</h3>
<ul>
<li>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
</ul>
</div>
<div class="tabbertab">
<h3>Categories</h3>
<ul>
<li>
<ul>
<?php wp_list_cats('sort_column=name& amp;optioncount=1 &hierarchical=0'); ?>
</ul>
</li>
</ul>
</div>
<div class="tabbertab">
<h3>Meta</h3>
<ul>
<li>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="#" title="1">Web Design</a></li>
<li><a href="#" title="2">Top WordPress Themes</a></li>
<li><a href="#" title="3">Best WordPress Theme</a></li>
<li><a href="#" title="4">Web Directory</a></li>
<?php wp_meta(); ?>
</ul>
</li>
</ul>
</div>
</div>
As you see from the demo here, WordPress template tags like archives, categories and meta list can be easily added or substituted with any approved tag or function. In fact, any conceivable piece of code can be added within these tabs.
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!