WordPress Tutorial: Editing Tabbed Content
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(); ?>




