How To Add a Tabbed Menu to Your Custom WordPress Design

The sidebar for WordPress is typically where the archive, categories and other items are listed on your front page. However, as your categories and numbers of posts in the archive grow, so does the list; resulting in a really long sidebar.  Having a long sidebar can take up precious onscreen real estate.  It can also be a distraction to the user.

Tabbed Menu as the Solution

In looking how to save some onscreen real estate as well as providing a more slick interface for users to navigate for content on the site, designers can choose to create a tabbed menu.

In searching the internet, there were many solutions.  There are actually a couple of specific plugins for WordPress.  Although, it is easier to use a plugin, the widget based style is less customizable for my liking.

I found several resources on the tabbed menu mechanism and some required a lot of coding as well as using different javascript framework libraries to achieve such effect.

Implementing the Yahoo! TabView

In the end, I chose to use the method found on Rubiqube because it uses a trusted code source, Yahoo’s TabView.  Rubiqube does a good job of explaining implementation and reassures that this technique will work with WordPress.

Here are the steps I took to implement:

1. Go to http://developer.yahoo.com/yui/tabview/#start and read through the instructions.
2. You will need to paste the following code in the header part of header.php for the theme your working on.  This will allow your theme to load the necessary javascript for the tabbed view menu.

   <!-- Sam Skin CSS for TabView -->
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/tabview.css">
   
   <!-- JavaScript Dependencies for Tabview: -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
   
   <!-- OPTIONAL: Connection (required for dynamic loading of data) -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script>
   
   <!-- Source file for TabView -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/tabview/tabview-min.js"></script>

3. Add the HTML code into the location of where you desire the tabbed menu, this is most likely somewhere in your sidebar.php.

<div id="demo">
<ul>
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div>
<div>
Tab One Content</div>
<div>
Tab Two Content</div>
<div>
Tab Three Content</div>
</div>
</div></pre>

<pre><div id="demo"><ul>	<li><a href="#tab1"><em>Tab One Label</em></a></li>	<li><a href="#tab2"><em>Tab Two Label</em></a></li>	<li><a href="#tab3"><em>Tab Three Label</em></a></li></ul><div><div>
Tab One Content</div><div>
Tab Two Content</div><div>
Tab Three Content</div></div></div>

4. Do not forget to activate by enabling the Yahoo TabView by calling the  script with the following:

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>

5. Finally, make sure the tabbed menu is loaded on the desired page and the effects are working.  You can now begin customizing the content to be loaded.  Just replace items in the HTML code markup.
6. Once you customize what you want in each tab which is just a <li> element, you can add the CSS classes to style it to your liking.  The CSS classes used to style the tabbed menu are the following:

   .yui-navset {
       background: #E8F4FD;
       padding: 5px 5px 3px 5px;
       margin-bottom: 35px;
   }
   .yui-nav li
   {
       list-style: none;
       float: left;
       margin-right: 2px;
       text-align: center;
       font-size: 90%;
       font-weight: bold;
   }
   .yui-nav li a
   {
       text-decoration:none;
       color: #005288;
       display: block;
       padding: 8px;
   }
   .yui-nav li.selected a {
       background: #FFFFFF;
   }
   .yui-nav li a:hover
   {
       color: #000;
   }
   .yui-content {
       background: #FFFFFF;
       clear: both;
   }
   .tab-list li {
       padding: 8px;
       border-bottom: 2px solid #E8F4FD;
   }

Simple enough, I was able to implement it after reading both articles and having a rough idea on how to style it.  It works easily enough and I will use this for future projects as well.