How To Add Thumbnails in Popular Posts Plugin

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.

iconspp

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.

Categories: Tutorials

Tags: , , ,

Comments

  1. Ravi 09.29.2009 Reply

    Nice tutorial. Thanks ..

  2. Adam 10.04.2009 Reply

    Great tut. :-) More please.

  3. Waheed Akhtar 10.07.2009 Reply

    Nicely implement. Will give this a try on my blog.

  4. WarnaMedan 10.14.2009 Reply

    Thanks for the info..very useful

  5. Saroj 10.21.2009 Reply

    nice tuts…thanks

  6. Sam 11.03.2009 Reply

    Thanks for the tutorial, I’ve been looking how to do this for aaaages!

    One quick question though; the popularity plugin also ranks pages as well as posts. I haven’t found a solution to only display posts. does your code above address this?

    It’s a pain when the entry at the top of your ‘popular’ list is the homepage :D

  7. Wordpress Themes 12.05.2009 Reply

    Thanks u so much. Great tutorials. I wanna try it in my website.

  8. Join Smith 12.28.2009 Reply

    Thanks for sharing, I will apply to site, good luck

  9. ekyerleştirme 01.31.2010 Reply

    Nice tutorial. Thanks …

  10. ekyerleştirme 03.17.2010 Reply

    Nice tutorial.
    Thanks.

  11. Chirs 03.23.2010 Reply

    The second function is causing my blog to appear blank.. all white, can’t even view any source, it appears blank. I think there might be a php error, but i can’t view the error.

  12. Chirs 03.23.2010 Reply

    I actually found out what was wrong… there is a type in one of the variables referenced later on in the function.. this is the updated and working version of code for the theme_function_popular_posts() function.

    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 ”;
    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 = $scrp . ‘src=’ . $img . ‘&w=125&h=125&zc=1′;
    }
    echo ‘ ‘ . $title .’‘;
    }
    echo ”;
    } else {
    print(‘There are no popular posts shown.’);
    }
    }

  13. chris 03.24.2010 Reply

    $scrp variable is naped $srcp on the following line:

    $imgpath = $srcp . ‘src=’ . $img . ‘&w=16&h=16&zc=1′;

    the function will not work unless it is spelled properly.

    Also, is it possible to get the top ranked posts for the month? If so, please advise.. it would be awesome!

  14. Geoffblog 07.22.2010 Reply

    Thanks James, I used some of the advice/code snippets here to make a thumbnail for the WordPress.com Popular Stats plugin, I credited your work here of course :)

    http://www.geoffblog.com/2010/07/thumbnails-for-wordpresscom-popular.html

  15. Rebecca 07.25.2010 Reply

    Hi, I would be so grateful if you could help me get this to work. I copied and pasted exactly what you had and even fixed the srcp variable thing like people recommended but still got this error:
    Parse error: syntax error, unexpected T_VARIABLE in functions.php on line 38

    I would love to get this to work and write about it on wpgarage. Thanks!!!
    Rebecca

  16. jerike 09.17.2010 Reply

    Hi, if you want to know how to use timthumb in wordpress try this http://www.wp-coder.com/wp-programming/how-to-create-wordpress-gallery-with-timthumb-2/

  17. web2marrakech 01.14.2011 Reply

    real Nice tutorial.

  18. Boozakajoe1 06.17.2011 Reply

    To Rebecca,

    “Hi, I would be so grateful if you could help me get this to work. I copied and pasted exactly what you had and even fixed the srcp variable thing like people recommended but still got this error:
    Parse error: syntax error, unexpected T_VARIABLE in functions.php on line 38

    I would love to get this to work and write about it on wpgarage. Thanks!!!
    Rebecca”

    You need to replace all the slanted hooks ( ”, ‘ ‘, ′, ect..) above ” to the straight hooks (”).

  19. David 07.11.2011 Reply

    I’m also trying to install these in my wife’s blog, and have the same issue mentioned by Rebecca above, and I’m not sure what the issue is.

    My error message says:

    “Parse error: syntax error, unexpected T_VARIABLE in functions.php on line 50″

    And this is line 50 from my functions.php file:

    $src = get_permalink($post->ID);

    Any idea what I’m “suffering” from? I’ve copy-pasted the code from above.

    • James 07.28.2011 Reply

      Are you using WordPress 3.2? If that’s the case you need at least PHP 5.0 or better.

  20. Genuineapps 05.11.2012 Reply

    thank you……

  21. Ankit 07.06.2012 Reply

    Thanks dude ….. its really good…a bit lengthy but its great

  22. Zareen Khan 10.30.2012 Reply

    Great tutorial.Thanks for Sharing.please post more.Thanks again…..:)

  23. Adam Nguyen 11.08.2012 Reply

    Nice tut.
    Thanks for sharing!

  24. isko 02.19.2013 Reply

    thanks for this great tutorial.. newbie here!!

  25. James 11.08.2009 Reply

    You are very welcome. :)

    Unfortunately, this code cannot address the problem of inclusion of page ranks since I merely use the get_top_ranked_posts method from the said plugin.

Add a Comment