How To Display Recent And Popular Posts With Thumbnails In Thesis

Some people asked me how I display recent posts on my sidebar with thumbnails, so I figured that it would be a good idea to just make a post on how to do that.

You can do it without any plugins and format it the way you want to if you play with the code I am going to give you.

By the way, I am using Thesis 1.8.4 still.

Step 1. The first thing you want to edit is the custom.css file. Navigate to “Custom File Editor” under Thesis options and insert this code.

.custom #sidebars #recent-posts li a img.footer-thumb { display:block; float:left; margin-top:1px; margin-right:10px; margin-bottom:10px;}
.custom #sidebars #recent-posts li p {clear:right; height:80px; margin-top:20px; font-size:1.6em; }

After you paste the code above just hit “Save”.

Step 2. Now we need to add a custom function to our custom_functions.php file that is going to render our widget with recent posts.

I use this code for that:

function recent_posts_thumb()  {
if (is_single()) {
?>
<div id="recent-posts">
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; color: #333; text-align: center;">Recent Posts</p>
<?php global $post; $postslist=get_posts('numberposts=10&order=DESC'); foreach($postslist as $post) : setup_postdata($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]; ?>" alt="<?php the_title(); ?>" class="footer-thumb" width="70" height="60" /></a>
<div>
<p><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</div>
</li>
<?php endforeach; ?>
</div>
<?php }
}
 
add_action('thesis_hook_after_sidebar_1', 'recent_posts_thumb');

Notice that I am displaying recent posts only on single posts on my blog, but if you want it to show sitewide then you would need to remove the If(is_single) condition from the code above.

Also, if you want to display less or more than 10 then you need to change “’numberposts=10” value from 10 to whatever you want.

That’s pretty much it, but let’s say you want to have the hover effect like me, so when someone hovers their mouse over your recent posts list it highlights each item in grey color or whatever color you choose.

To do that we need to add some additional code to our custom.css file and then mark up our custom function code as well.

For your custom.css file you only need these 2 lines of code:

.custom .mybox { background: #FFFFFF;}
.custom .mybox:hover { background: #F7F7F7;}

(You can change the color code of course)

So if we combine this with the css code I posted above the whole thing you could copy and paste into your custom.css file would look like this:

.custom #sidebars #recent-posts li a img.footer-thumb { display:block; float:left; margin-top:1px; margin-right:10px; margin-bottom:10px;}
.custom .mybox { background: #FFFFFF;}
.custom .mybox:hover { background: #F7F7F7;}
.custom #sidebars #recent-posts li p {clear:right; height:80px; margin-top:20px; font-size:1.6em; }

Now we need to mark up our custom function code above to include the new css rule.

The code then turns into this:

function recent_posts_thumb()  {
if (is_single()) {
?>
<div id="recent-posts">
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; color: #333; text-align: center;">Recent Posts</p>
<?php global $post; $postslist=get_posts('numberposts=10&order=DESC'); foreach($postslist as $post) : setup_postdata($post); ?>
<div class="mybox">
<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]; ?>" alt="<?php the_title(); ?>" class="footer-thumb" width="70" height="60" /></a>
<div>
<p><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</div></div>
</li>
<?php endforeach; ?>
</div>
<?php }
}
 
add_action('thesis_hook_after_sidebar_1', 'recent_posts_thumb');

As you can see the only thing that has changed is that we’ve added the ”mybox” div tag into the previous code.

You can of course play around with it and customize it even more to fit your site layout but that’s the exact code I am using here on this blog right now.

Displaying Popular Posts With Thumbnails

If you want to show your popular posts the same way it gets a bit more tricky, because we need to track views of each post on our blog.

There is a function for that too 🙂

Here it is:

/**Count Views***/
function getPostViews($postID){
    $count_key = 'post_views';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "0 View";
    }
    return $count.' Views';
}
function setPostViews($postID) {
    $count_key = 'post_views';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}
 
function trackPostViews ($post_id) {
    if ( !is_single() ) return;
    if ( empty ( $post_id) ) {
        global $post;
        $post_id = $post->ID;    
    }
    setPostViews($post_id);
}
add_action( 'wp_head', 'trackPostViews');
 
add_filter('manage_posts_columns', 'posts_column_views');
add_action('manage_posts_custom_column', 'posts_custom_column_views',5,2);
function posts_column_views($defaults){
    $defaults['post_views'] = __('Views');
    return $defaults;
}
function posts_custom_column_views($column_name, $id){
    if($column_name === 'post_views'){
        echo getPostViews(get_the_ID());
    }
}
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

You need to add the above code to your custom_functions.php file. It will start counting views of each post and add an additional column under “All Posts” in your WP dashboard.

The only problem with this way of counting views is that if you attract a lot of spam bots the hits they generate will be included in the view count so some of your posts might get insane amount of views that are not really that popular.

After you add the above code to track views you might want to wait 2-3 days before actually trying to render the widget with your popular posts.

When you are ready to show your popular posts you can just use this code below (it goes into your custom_functions.php file too):

/**Popular Posts Thumbnails Sidebar***/
function popular_posts_thumb()  {
?>
<div id="recent-posts">
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; color: #333; text-align: center;">Popular Posts</p>
<?php $args = array('posts_per_page' => 5, 'orderby' => 'meta_value_num', 'meta_key' => 'post_views'); 
global $post; $popular=get_posts($args); foreach($popular as $post) : setup_postdata($post); ?>
<div class="mybox">
<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]; ?>" class="footer-thumb" width="80" height="70" /></a>
<div>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</div></div>
</li>
<?php endforeach; ?>
</div>
<?php }
 
add_action('thesis_hook_after_sidebar_1', 'popular_posts_thumb');

I am using the same css formatting for popular posts as I do for recent posts in this example that’s why you see “mybox” and “recent-posts” div tags in it still. You can of course create custom css rules for your “popular posts” widget on your blog.

Anyway, I hope that was helpful.

Share

2 thoughts on “How To Display Recent And Popular Posts With Thumbnails In Thesis

  1. Forgot the add that if you want to display more than 5 popular posts you would need to change the “posts_per_page” variable from 5 to something else.

Leave a Reply

Your email address will not be published. Required fields are marked *