When a WordPress sidebar starts getting too long, but you still want to show more content, grouping two or three sections into a single tabbed box is a practical solution. A simple tab setup can place recent posts, most commented posts, and random posts in the same area without making the sidebar feel crowded.
Below is a straightforward way to build it.
One important note before editing anything: use a proper code editor such as Dreamweaver. Don’t edit these files with Notepad.
Also make sure your site is already loading the jQuery framework.
1) Add the function for popular posts
First, place the following code into your theme’s function.php file. This function fetches posts with the highest comment counts:
// 获得热评文章
function simple_get_most_viewed($posts_num=10, $days=60){
global $wpdb;
$sql = "SELECT ID , post_title , comment_count
FROM $wpdb->posts
WHERE post_type = 'post' AND TO_DAYS(now()) - TO_DAYS(post_date) < $days
ORDER BY comment_count DESC LIMIT 0 , $posts_num ";
$posts = $wpdb->get_results($sql);
$output = "";
foreach ($posts as $post){
$output .= "\n<li><a href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". mb_strimwidth($post->post_title,0,30)."</a></li>";
}
echo $output;
}
This function limits the results by both quantity and age, using 10 posts from the last 60 days by default.
2) Create the tab content file
Save the next block as r_tab.php, then upload it into your current theme folder.
<h3><span class="selected">最新日志</span><span>热评日志</span><span>随机日志</span></h3>
<div id="tab-content">
<ul><?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post): ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,30); ?></a></li>
<?php endforeach; ?></ul>
<ul class="hide"><?php simple_get_most_viewed(); ?></ul>
<ul class="hide"><?php $myposts = get_posts('numberposts=10&orderby=rand');foreach($myposts as $post): ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,30); ?></a></li>
<?php endwhile;endif; ?></ul>
</div>
This file outputs three tabs:
- latest posts
- most commented posts
- random posts
3) Insert it into the sidebar
Open sidebar.php and place this code wherever you want the tabbed box to appear:
<div id="tab-title"><?php include('r_tab.php'); ?></div>
4) Add the jQuery switching behavior
Use the following script to handle tab switching:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#tab-title span').click(function(){
jQuery(this).addClass("selected").siblings().removeClass();
jQuery("#tab-content > ul").slideUp('1500').eq(jQuery('#tab-title span').index(this)).slideDown('1500');
});
});
</script>
When a tab label is clicked, the matching list slides into view while the others are hidden.
5) Apply the CSS
Finally, add the following CSS so the tabs and content display properly:
#tab-title .selected{color:#000;font-weight:bold}
#tab-title span{padding:5px 18px 8px 1px;border-right:0px;margin-left:-1px;cursor:pointer;}
#tab-content .hide{display:none;}
#tab-content ul{padding:5px 10px;overflow:hidden;border-right:1px solid #ccc;border-left:1px solid #ccc;background:#fff;}
#tab-content ul li{line-height:25px;list-style:none}
That’s enough to get the basic effect working. After that, you can fine-tune the layout and styling so it fits your own theme better.