Add Thumbnails to the WP-Postviews Plugin
What choices do you have for listing most viewed posts?
The first one that comes to my mind is WP-Postviews plugin by Lester Chan. I am using it on many of my Wordpress powered websites, including TNT Base.
You can find it here: http://lesterchan.net/wordpress/readme/wp-postviews.html
Everything works great with Lester’s plugin, it does what is supposed to, but I needed a little bit more. I wanted to show thumbnails of the most viewed posts. All those of you runing photoblogs should know what I am talking about.
So, after hours of searching and even a short talk to Lester, I have come up with my way of doing it.
Here is my solution:
Basically what we need to do is
- To create a function that lists the thumbnail of a post
- To integrate this function into Lesters great plugin
I have found this function here: http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it
The function to list thumbnails of the first image in a post goes like this:
1 2 3 4 5 6 7 8 9 10 11 12 | function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "/images/default.jpg"; } return $first_img; } |
This must be in the functions.php file inside your theme.
Now, you can list on the home page or anywhere else in your theme the thumbnail of the image in a post by inserting
1 | <img src="<?php echo catch_that_image() ;?>" style="width:100px; height:auto;" alt="" /> |
In order to have this integrated with WP-Postviews plugin you must edit wp-postviews.php which is in the /wp-content/plugins/wp-postviews/ folder of your blog.
In my example we will list the thumbnails for the most viewed posts by category, but you can do it for any of the functions in the same way.
So, in the wp-postviews.php find this line
### Function: Display Most Viewed Page/Post By Category ID
Under this line there must be many $temp rows. Add the following row:
1 | $temp = str_replace("%THUMBNAIL%", catch_that_image(), $temp); |
At this point you have finished coding.
Now, go back to your Dashboard settings for WP-Postviews and in the Template for Most Viewed Posts by Category use the newly created “%THUMBNAIL%”.
REMEMBER: thumbnail is a link so use it like
1 | <img src="%THUMBNAIL" alt="" /> |
Hope it helps and I am right here to answer future questions on this topic. Until then, please leave a comment if you can improve my method or if you know a better one and don’t forget to subscribe to my RSS if you find this topic interesting.









Well structured tutorial. Thank you for sharing.
WPExplorer´s last blog post …WPExplorer.com – We Dofollow Your Comments
Twitter: wpexplorer
Thnaks for the tips, although it’s hard for me to understand, because it’s about code.
I have install Post views plugin, version 1.5, but it’s still not appear at article page? I do know why.
thanks for the tips
regards
Business Directory´s last blog post …Specialize and Suppliers of: Titanium Dioxide, Lubricants, Organic Peroxide, Water Treatment Chemical, etc
what version of the plugin are you using.. im having trouble getting this to work for me. im using 1.50… I tried using the catchthatimage function call outside the postviews call and it works fine.
great tutorial by the way.. will be very happy to have this one going..
I am using version 1.50
Please keep me posted about your efforts and let me know if I can help in any way.
Twitter: tntbasecom
Hi!
I also have a problem getting the thumb to work for me…
I’m using version 1.50 as well.
It only show the default image, which means all posts considered has “no thumbnail”.
I hope you can help me solve the problem…
Twitter: MysteryE
MysteryE´s last blog post …30 Unique (Creative?) Wall Clock Design
Twitter: MysteryE
I know why it didn’t work for me.
I don’t have any images in the post, since I use custom field to add the thumbnail in each post.
So this solution only for those who has image in the post, right?
Is there any workaround to edit these codes that must be put in the function.php to show the image from Custom Fields…?
MysteryE´s last blog post …30 Unique (Creative?) Wall Clock Design
Twitter: MysteryE