Last month I wrote a Wordpress tutorial about adding tabs to a blog sidebar, that was pretty popular, judging from the number of comments and trackbacks it’s been getting. In fact, it’s because of the comments that I’m writing this post. As most of you know by now, if my reader ask for something, I usually deliver. 
When I wrote that article, I said that implementing these tabs comes with a cost: you will lose the widgt ready functionality of your blog sidebar. Jon Phillips of Freelance Folder suggested using multiple widgetized “sidebars” and I’ve been thinking about this solution. But since you can’t control how many tabbed panels (or how many tabs for each panel) you will use, this still isn’t very flexible. This could only work if you say “I want a tabbed panel with X widget ready tabs”. Anyway… maybe I will write about this in a future post.
For now, I want to answer the question of one of my readers:
I just need to know how to add most popular post, recent comments and top commentators into the tab content.
I don’t want to make this a very long post, so I think the best way is to just post part of the code that I actually use on my blog’s sidebar and just leave the comments open for questions. Here’s the code for my first tabbed panel:
<div id="tabs-posts" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1">Most Popular</a></li>
<li><a href="#tab2">Most Commented</a></li>
<li><a href="#tab3">Recent</a></li>
</ul>
<div class="yui-content">
<div id="tab1">
<ul class="tab-list">
<?php if (function_exists('get_most_viewed')): ?>
<?php get_most_viewed(); ?>
<?php endif; ?>
</ul>
</div>
<div id="tab2">
<ul class="tab-list">
<?php mdv_most_commented(10, '<li>', '</li>', true, ''); ?>
</ul>
</div>
<div id="tab3">
<ul class="tab-list">
<?php recent_posts(); ?>
</ul>
</div>
</div>
</div>If you want to use the content generated by a certain plugin (say Top Commentators), just check the help for that plugin and look for the PHP output function. For Top Commentators use this:
<?php ns_show_top_commentators(); ?>
10 Comments
Thanks for posting the code, I have loved how that tabbed comments box works, just never had time to look up the code, thanks.
Well I tried to add it and just got a parsing error, guess I will hang around and see what the others say about adding the code.
I just directly added it into the sidebar.php file
Great Post. I have really enjoyed the quality posts on this blog since you got it going. I have printed out a few of the tutorials.
Have you done anything with buddypress and MU yet. I have a project that I will try to use buddypress/MU/ and tabs in a post which I will manually place content and code into and a tab in the sidebar.
No, not yet, but I intend to look at BuddyPress pretty soon.
Great resources, Adrian. I’ll definitely come to your blog if I’m going to use tabs in my sidebar later.
Thanks!
Fath’s last blog post: Virb: Social Community
Thx alot man. But I somehow missed that I will loose the widgt ready functionality, but thx anyway. And what about Tabifier, idTabs or DomTabs. Which did you like better and do they have any side effects/
All three are pretty easy to setup and customize using CSS. Problem is each one cause some problems. Might be some conflict with my plugins.
As for the widget ready functionality… I’m pretty sure that a rockstar Wordpress developer could create a plugin where you could customize the number of panels and tabs for each panel. Then place the content of your choice in each tab.
That would be cool! I’m more into Wordpress themes, rather than plugins, but who knows!
I’ve recently discovered tabs (earlier today ironically) and this will be very helpful. I’ve experimented with DOMTab somewhat and haven’t decided on which tab implementation to use yet but after reading your post I’m eager to try the YUI tabs.
What I’ve found difficult is where to find that magic line of code that controls certain WP widgets, for example, the recent comments. An example you used is, for some plugin. Another is . Is there a list of these function calls somewhere in the Codex or elsewhere? I briefly searched WP but was unable to find anything definitive.
Hi Adam! The best place to start is the Template Tags, for some built-in functions. If you install a certain plugin (like Top Commentators) you should find the function in the plugin help. Let me know if this works for you.
I’ve tried using a post tabs plugin and tabs in the sidebar and neither has worked right. I really like the tabs in the post plugin but it doesn’t link. If you go to my site (very soon as I’m ready to yank it out) you will see something is wrong. I didn’t understand much of your post, so my question is: is there anyone who would be willing to code this for me? If I shouldn’t ask this question here can you point me in the right direction? Thanks
Elizabeth Day’s last blog post: Lose weight with Coconut Oil?