Add Popular Posts To Thesis Sidebars Using WordPress Post Thumbnails

Recently, I posted a tutorial explaining how to replace Thesis post images with WordPress post thumbnails. One of the nice things about WP post thumbnails is that you can define an unlimited number of sizes for images which you can crop and use in your theme.

One of the best uses I’ve found is creating thumbnails for lists of popular, favorite, or recent posts in your blog’s sidebar.

Enabling The Thumbnails

The first item we need to address is actually setting up the thumbnails. If you read the first tutorial, I explained how to enable thumbnails in your theme (in this case Thesis). Here is that code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 610, 9999, true );
add_image_size( 'teaser', 150, 150, true );

That adds a default, full sized post image, and a cropped teaser image for use with Thesis teasers. In order to add an additional size for post thumbnails, we need to add this code to custom_functions.php:

add_image_size( 'thumb', 50, 50, true );

That’s just the name of the image, the width of the image in pixels, and the height of the image in pixels. The addition of true specifies that the image is hard cropped (crucial) to the specified width and height.

Creating The List Of Popular Posts

Next, we need to use get_posts() to create a list of posts with thumbnails. We’ll throw in a comment count as an added bonus cuz we’re cool like that ;)

I’ll just give you the code in one big lump and then explain it piece by piece. If you want to take the shortcut, just slap this in custom_functions.php and add some CSS. Otherwise, read on! Here’s the code:

function pop_posts_with_thumbs() { ?>
	<li class="widget popular_posts">
		<h3>Popular Posts</h3>
		<ul>
		<? $args = array('posts_per_page' => 5, 'orderby' => 'comment_count');
		global $post;
		$popular = get_posts($args);
		foreach($popular as $post) {
			setup_postdata($post); ?>
			<li>
				<a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>">
					<?php if(has_post_thumbnail()) { the_post_thumbnail('thumb'); } ?><?php the_title(); ?>
				</a>
			</li>
			<!--[if lte IE 6]>
				<div class="clear"></div>
			<![endif]-->
		<? } ?>
		</ul>
	</li>
<? }
add_action('thesis_hook_before_sidebar_1', 'pop_posts_with_thumbs');

There are several things involved here:

• Creating a function
• Creating an <li> to fit with Thesis’ sidebar widget code and inherit the proper CSS
• Creating an <h3> to be used as the heading for the widget
• Creating an <ul> to house the list of posts
• Using get_posts() to grab the list of your most popular posts, and arrange the title, thumbnail, and comment count accordingly
• Using thesis_hook_before_sidebar_1 to place this list of posts in your blog’s sidebar.

Getting Started

The first thing we need to do is open all of our items. This code initiates the function, <li>, <ul>, and the <h3>:

function pop_posts_with_thumbs() { ?>
	<li class="widget popular_posts">
		<h3>Popular Posts</h3>
		<ul>

Setting Up Arguments For get_posts()

Next, we need to tell get_posts() which posts to grab. It accepts parameters that can be found here and here. Basically, we’re going to grab the posts that have the most comments and list them in order of comment count from highest to lowest. That code looks like this:

<? $args = array('posts_per_page' => 5, 'orderby' => 'comment_count');
$popular = get_posts($args);

Getting The Posts

Now that we’ve told WordPress what posts we want, we need to tell it what to display for each post. As I wrote earlier, we’re going to display the post title, comment count, and a thumbnail for each post. Additionally, we house all of this in an <li> so that the items will appear in a list. That code looks like this:

foreach($popular as $post) {
	setup_postdata($post); ?>
	<li>
		<a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>">
			<?php if(has_post_thumbnail()) { the_post_thumbnail('thumb'); } ?><?php the_title(); ?>
		</a>
	</li>

Accounting For #$%@ Old Browsers

We’re going to add some CSS here in just a minute, and the overflow parameter will work to keep our floating images nice and cleared on modern browsers, but for IE6 (a.k.a. the bane of my existence), we’re going to add a <div> that we’ll use to clear the floats through CSS. Here’s that code:

<!--[if lte IE 6]>
	<div class="clear"></div>
<![endif]-->

Hooked Up

The last thing we need to do is hook the function on the appropriate hook to place the list in the sidebar. We do that use a simple add_action():

add_action('thesis_hook_before_sidebar_1', 'pop_posts_with_thumbs');

Adding Style

Now that we’ve got an ugly list in our sidebar, let’s add some styling to spruce it up a bit! This will vary quite a bit depending on any custom CSS you’ve already applied, but here is a good starting point:

.custom ul.sidebar_list ul li a { padding: .7em 0; display: block; border-bottom: 1px dashed #ddd; text-decoration: none; color: #111; overflow: hidden; }
.custom ul.sidebar_list ul li a:hover { color: #777; }
.custom ul.sidebar_list ul li a img { float: right; margin-left: .7em; }
.custom ul.sidebar_list ul li a span.comment_number { font-weight: bold; color: #f3802b; }
.clear { clear: both; }

Wrapping Up

Popular posts are great for increasing page views and for getting the eyes of your visitors on your best content. Don’t be afraid to play around with get_posts(). You can grab all sorts of lists of posts. Recent posts, your favorites, random posts, and similar posts are just a few. Use your imagination!