On this article, I would like to share a tutorial on how to add a thumbnail in popular posts. The scope of this tutorial includes the list of plugins and PHP files needed to run, adding the thumbnail generator scripts in a WordPress, and the steps on how to modify the WordPress theme in order to add the function.

You need to have a little  background on PHP, MySQL, and WordPress to get this tutorial working.

Requirements

Popularity Contest Plugin. This WordPress plugin is developed by Alex King. You may get a copy from the WordPress Plugins website. Install it as instructed from the manual and activate it.

TimThumb Script. You need this script created by Tim McDaniels and Darren Hoyt in order create a thumbnail of your image.

Any WordPress Theme. Any WordPress theme will do for the modification.

Step 1: Altering the Directory Structure

Make sure that you already activated the Popularity Contest Plugin. Under wp-content folder, create folder called tt-script. Under tt-script folder, paste the timbthumb.php file. Also, still under tt-script folder create a folder called cache

Step 2: Setting the Default Image

Put the default image to the tt-script folder. On this tutorial, let’s set the icon’s dimension to 16 pixels by 16 pixels and call the filename, default.png. Any image format will do.

Step 3: Function Page Modification

Under the function.php file in your preferred theme folder, there are two functions needed to render the “widget.” The first function does the capturing of the first image of the post. I found this code at Cats Who Code website and modified by yours truly to meet the modification needs.

/**
 * Capture the first image from the post.
 * @global object $post
 * @global object $posts
 * @return string
 */
function theme_function_capture_first_image($p=null) {
	$firstImg = '';
	if (empty($p)) {
		global $post, $posts;
		$firstImg = '';
		ob_start(); ob_end_clean();
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$firstImg = $matches[1][0];
	} else {
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $p->post_content, $matches);
		$firstImg = $matches[1][0];
	}
	return $firstImg;
}

The second function does the displaying the list of the popular posts. We can make use of the Alex King’s Popularity Plugin functions.

/**
 * Renders the list of most popular posts together with icons.
 * @global object $akpc
 */
function theme_function_popular_posts() {
	if (function_exists('akpc_most_popular')) {
		global $akpc;
		$posts = $akpc->get_top_ranked_posts(5);
		if ($posts)
			// Your preferred default icon url.
			$default = get_option('siteurl'). '/wp-content/tt-script/default.png';
			$scrp = get_option('siteurl'). '/wp-content/tt-script/timthumb.php?';
			echo '<ul>';
			foreach ($posts as $post) {
				$img = theme_function_capture_first_image(get_post($post->ID))
				$src = get_permalink($post->ID);
				$title = $post->post_title;
				$imgpath = '';
				if (empty($img)) {
					$imgpath = $default;
				} else {
					$imgpath = $srcp . 'src=' . $img . '&amp;w=16&amp;h=16&amp;zc=1';
				}
				echo '<li><a href="' . $src . '"><img src="' .  $imgpath . '" alt="'. $title .'" /></a> <a href="' . $src . '">' . $title .'</a></li>';
			}
			echo '</ul>';
		} else {
			print('<p>There are no popular posts shown.</p>');
		}
	} else {
		echo '<p>Please install the Alex King\'s Popularity Contest Plugin.</p>';
	}
}

Putting the Code to Sidebar

Now you created the two essential functions in order to render the list of most popular posts with icons, the very least thing to do in the sidebar.php of your theme of your choice is insert the code as shown below.

<li>
	<h2>Most Popular</h2>
	<?php theme_function_popular_posts(); ?>
</li>

Sometimes I prefer the boxy way to contain the widget.

<div class="widget widget-most-popular">
	<h2>Most Popular</h2>
	<div class="widget-interior">
		<?php theme_function_popular_posts(); ?>
	</div>
</div>

Either way, it will show the list of most popular posts together with icons. If you really want this function to be widgetized, you can do so the following:

function theme_widget_popular_posts_icons($args) {
	extract($args, EXTR_SKIP);
	echo $before_widget . "\n";
	echo $before_title . 'Most Popular' . $after_title . "\n";
	theme_function_popular_posts();
	echo $after_widget . "\n";
}
register_sidebar_widget('Your Theme Name Feedburner Subscription', 'theme_widget_popular_posts_icons');

Copy and paste this code snippet to functions.php file under your preferred theme.

Final Step

The final step on rendering the most popular posts together with icons is to style the list using CSS. There are plenty of ways to style, so I will leave it to you as an exercise.