HeadsetOptions Web Design, SEO, WordPress, Etcetra

If you're new here, you may want to subscribe to our 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). To learn more about theme tabbed panes and how they can be effectively used, visit the tutorial straight from the source of Java at java.sun.com.

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.

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 Java 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.

Typical DOMtab XHTML code looks like below:

1. <div id=”dom ” class=”domtab doprevnext”>
2. <ul class=”domtabs”>
3. <li><a href=”#t1″>Test 1</a></li>
4. <li><a href=”#t2″>Test 2</a></li>
5. <li><a href=”#t3″>Test 3</a></li>
6. <li><a href=”#t4″>Test 4</a></li>
7. </ul>
8. <div>
9. <h2><a name=”t1″ id=”t1″>Proof 1</a></h2>
10. <p>Test to prove that more than one menu is possible</p>
11. <p><a href=”#top”>back to menu</a></p>
12. </div>
13. <div>
14. <h2><a name=”t2″ id=”t2″>Proof 2</a></h2>
15. <p>Test to prove that more than one menu is possible</p>
16. <p><a href=”#top”>back to menu</a></p>
17. </div>
18. <div>
19. <h2><a name=”t3″ id=”t3″>Proof 3</a></h2>
20. <p>Test to prove that more than one menu is possible</p>
21. <p><a href=”#top”>back to menu</a></p>
22. </div>
23. <div>
24. <h2><a name=”t4″ id=”t4″>Proof 4</a></h2>
25. <p>Test to prove that more than one menu is possible</p>
26. <p><a href=”#top”>back to menu</a></p>
27. </div>
28. </div>

Note how the unordered list (ul) is separated from the content. Although this is the cleaner way to code, it could for the novice eye be a little confusing.

Tabber code is a lot easier for novice users; check the structure below:

1. <div class=”tabber”>
2. <div class=”tabbertab”>
3. <h2>Tab 1</h2>
4. <p>Tab 1 content.</p>
5. </div>
6. <div class=”tabbertab”>
7. <h2>Tab 2</h2>
8. <p>Tab 2 content.</p>
9. </div>
10. <div class=”tabbertab”>
11. <h2>Tab 3</h2>
12. <p>Tab 3 content.</p>
13. </div>
14. </div>

Note in this structure, the content and the tab headings are tied together, suggesting that the Java is far more versatile in Tabber.

These are examples I have used are available within the downloaded files, so you don’t have to copy it from here and struggle with it. Simply download the complete pack of either of the scripts and look for index.html or example.html files and view source.

So how do we add it to WordPress

It’s really very simple, first you’ll have to decided which of these two JavaScript to use, in our case, I will use Tabber. Next you add it to your WordPress theme as described below.

1. To make things easy, I will create a new file called tabs.php within the theme folder where index.php resides and added the aforementioned Tabber XHTML structure to it.

2. I also created a new folder called js within the theme folder and added the tabber.js file to it.

3. I then edit the header.php file and add this line of code just below the call for the style.css:

1. <script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/tabber.js”></script>

4. Optionally, a temporary tag can be added right below the call for Java to keep the tabs closed on insert (I skipped this step):

1. <script type=”text/javascript”>
2. document.write(’<style type=”text/css”>.tabber{display:none;}<\/style>’);
3. </script>

5. I then open sidebar.php and add a call to pull tabs.php (this file will contain the source of Tabber JS that can be customized) at the desired location:

1. <?php include(”tabs.php”); ?>

I added this php tag to the very top of my sidebar. There is one more step before we can see any results, that is the addition of the style.

6. For the sake of keeping things simple, I copied the style provided in the download of the Tabber JS within example.css and pasted it into the theme style.css at the very bottom.

The result are promising already, see this demo at HeadsetOptions Play or on Etrix Internet Marketing.

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.

1. <div class=”tabber”>
2. <div class=”tabbertab”>
3. <h3>Archive</h3>
4. <ul>
5. <li>
6. <ul>
7. <?php wp_get_archives(’type=monthly’); ?>
8. </ul>
9. </li>
10. </ul>
11. </div>
12. <div class=”tabbertab”>
13. <h3>Categories</h3>
14. <ul>
15. <li>
16. <ul>
17. <?php wp_list_cats(’sort_column=name& amp;optioncount=1 &hierarchical=0′); ?>
18. </ul>
19. </li>
20. </ul>
21. </div>
22. <div class=”tabbertab”>
23. <h3>Meta</h3>
24. <ul>
25. <li>
26. <ul>
27. <?php wp_register(); ?>
28. <li><?php wp_loginout(); ?></li>
29. <li><a href=”#” title=”1″>Web Design</a></li>
30. <li><a href=”#” title=”2″>Top WordPress Themes</a></li>
31. <li><a href=”#” title=”3″>Best WordPress Theme</a></li>
32. <li><a href=”#” title=”4″>Web Directory</a></li>
33. <?php wp_meta(); ?>
34. </ul>
35. </li>
36. </ul>
37. </div>
38. </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.

How to integrate it with the design?

Now that the installation is complete, we need to style the tabs to look and feel more like the rest of the theme/site. This part of the work will focus mostly around the existing XHTML and CSS. Since the strategy employed to carry out designing differs from designer to designer, I recommend you use discretion while reading the following the section.

To style an element, it is imperative that you add a class or id attribute (depending on its usage) to all elements that share the same attribute. For example, in our example above, I could change the style of all the H2 headings to that of H3 or change the H2 in tabs.php to H3. Here’s what I did, changed the heading to H3 and styled to match the rest of the sidebar widget headings. Check the results, it is not pretty, but I spent the least possible time styling it.

Are there other options?

Sure, there is a one other JavaScript that is picking up popularity. It’s called Tabs and is revolutionary. It is by far the simplest piece of code and is easy to style. You can get the full tutorial for tabs here.

I used this technique in the final version of the theme we developed as part of the demonstration of this tutorial series. The theme is to be released shortly.

Next up, we will build cool menu interfaces using JS and CSS.

References: Java, wpSnap and a whole bunch of premium theme demo’s.