Tabbed Sidebars with WordPress StudioPress/Revolution Themes

To further modify my rendition of StudioPress’ Streamline theme, I implemented a tabbed sidebar. By doing so, I was able to display the same amount of information (recent posts, most commented posts, recent comments, etc.) without occupying as much screen real estate. Furthermore, tabbed menus prevent a visitor from being overwhelmed by information. They can simply click and view whatever they want. 🙂

I’ve written a “how-to” of sorts to help implement a similar feature on your StudioPress/Revolution theme. I’m sure this technique can be applied to other themes, but I’ve personally tested it on a StudioPress theme and have written the guide accordingly.

I utilized the Tabber framework after trying out other options. Tabber provides a very easy implementation method, but doesn’t have as many features as comparable tabbing solutions (ie, JQuery UI Tabs). To begin, download the JavaScript for Tabber and upload it to your webserver.

Next, edit your theme’s header.php file and add an entry in the “head” section to load the aforementioned JavaScript file. Here’s an example (adjust the URL to match the location of your JavaScript file):

<script type="text/javascript" src="https://mysite.com/javascript/tabber.js"></script>

After that, you need to add some styling rules so your tabs coordinate with your theme. You can modify the original CSS template for Tabber and add it to your theme’s style.css file, or you can use mine:

.tabberlive .tabbertab h2{display:none}
.tabberlive .tabbertabhide{ display:none}
.tabberlive{ margin-top:1em}
ul.tabbernav{ margin:0; padding:3px 0}
ul.tabbernav li{ list-style:none; margin:0; display:inline}
ul.tabbernav li a{ padding:3px 0.5em; margin-left:3px; border:thin solid #778;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px text-decoration:none}
ul.tabbernav li a:hover{ color:#FFF; background:#2B3349; border-color:#227; text-decoration:none}
ul.tabbernav li.tabberactive a{ background-color:#2B3349; color:#FFF}
.tabberlive .tabbertab{ padding-top:10px}
.tabbertab ul li{list-style-type:square;margin-left:5px;padding:0 0 3px}

Now that the preliminary steps are done, it’s time to create our tabbed sidebars! To increase my site’s performance, I use WP Widget Cache, and to take advantage of the caching abilities for the tabbed menus, I used text widgets and cached the widgets for a day (or until a new comment was added). For example, in one text widget which I titled “Posts”, I added the code to display my tag cloud and most commented posts. (Note, to execute PHP in widgets, you’ll need a plugin like Exec-PHP).

<div class="tabber">
     <div class="tabbertab">
	  <h2>Posts</h2>
	  <ul><?php mdv_most_commented(); ?><ul>
     </div>

     <div class="tabbertab">
	  <h2>Tags</h2>
	  <?php wp_tag_cloud('smallest=8&largest=18&number=25&orderby=count&order=DESC'); ?>
     </div>
</div>

With some CSS adjustments, you too can create a tabbed sidebar menu for your site! 🙂 I’m not a CSS guru by any means so I’ll be of very little help in troubleshooting, but let me know if you have questions regardless!

Previous article
Next article

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Try EchoTools - my free, iOS ultrasonography reference application!

Latest Articles