How to Display Popular Posts with Thumbnails in Thesis Theme

Tutorial on How to Display Popular Posts with Thumbnails in Thesis Theme sidebar without using a plugin. It is good to list popular posts in the sidebar, which helps to get more attention from the blog readers. In General, popular posts are the ones with more user activity in the form of discussion through comments.

So articles with more comments can be considered as the popular posts and this tutorial will help you to list popular posts with thumbnails in Thesis Theme Sidebar.

Tutorial on How to Install Thesis Theme on WordPress

Tip: Backup your WordPress theme before editing theme files.

Display Popular Posts with Thumbnails in Thesis Theme

This code helps to display popular posts with thumbnails based on the number of comments. Simply add this to custom_functions.php file and update it We have already tested this code and it works fine with latest version of Thesis also. See How to Customize Thesis Theme directly from WordPress Dashboard.

/** Start of Popular Posts with Thumbnails in Thesis Theme */
function popular_posts() {
if (is_home()) { ?>
<div id="popular-posts">
<h3>Popular Posts</h3>
<ul>
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?><?php while ($popular->have_posts()) : $popular->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=/<?php
$values = get_post_custom_values("thesis_post_image"); echo $values[0]; ?>&w=65&h=45&zc=1&q=100" alt="<?php the_title(); ?>" class="img" width="65" height="45" /></a><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php }
}
add_action('thesis_hook_after_sidebar_1', 'popular_posts');
/** End of Popular Posts with Thumbnails in Thesis Theme */

Just check the highlighted part of the code and you can change things like number of posts to be displayed, thumbnails width and height etc things easily.

You can use any other thesis hook to display popular posts at that particular place.

Other Thesis Theme Customization Tutorials:

• Display Recent Posts With Thumbnails in Thesis Theme
• Display Related Posts in Thesis Theme without a Plugin

Add CSS to Popular Posts with Thumbnails in Thesis Theme

Final step is to add some CSS to the popular posts in thesis theme. Here is the CSS code that helps to align and style elements in the popular posts. Add this code to custom.css file and update it.

/** Start of Popular Posts with Thumbnails CSS */
.custom #popular-posts {
margin: 0 0 15px;
float: left;
}
.custom #popular-posts ul {
float: left;
list-style: none outside none;
}
.custom #popular-posts ul li {
border-bottom: 1px solid #EEEEEE;
display: block;
float: left;
padding: 8px 0;
width: 100%;
}
.custom #popular-posts ul li a {
font-size: 13px;
line-height: 20px;
}
.custom #popular-posts ul .img {
float: left;
margin-right: 10px;
}
/** End of Popular Posts with Thumbnails CSS */

You can add your own CSS to these popular posts and can change any part of it, to make popular posts fit with your theme.

Hope you like this simple tutorial on How to Display Popular Posts with Thumbnails in Thesis Theme without using a plugin and if you need help in adding the same to your blog, then drop a comment here and we are glad to help you.