How to Display Recent Posts With Thumbnails in Thesis Theme

Simple guide that helps to Display Recent Posts With Thumbnails in Thesis Theme sidebar without using plugin. For a while, we have been writing some unique and useful tips to customize thesis theme. Here is another cool tutorial, that helps to display thumbnails along with the links in your recent posts list.

In this method we have used default thesis post image values to display thumbnails, you can also try all the 3 ways to generate thumbnails in thesis. A Simple query will generate list of recent posts, which are displayed by using action hooks in Thesis.

Recent Posts With Thumbnails in Thesis Theme

You need to add the below code to custom_functions.php file and save it. If you want to use a widget to add this code, then follow how to execute php in sidebar widget.

By default 5 recently published posts will be displayed, you can change this number by modifying the highlighted value in the code. Also, that order is selected as DESC so that most recently published post will be displayed first.

/* Recent Posts With Thumbnails in Sidebar */
function recent_posts_thumb() {
if (!is_home()) { ?>
<div id="recent-posts">
<h3>Recent Posts</h3>
<ul>
<?php global $post; $postslist=get_posts('numberposts=6&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]; ?>&w=65&h=45&zc=1&q=100" alt="<?php the_title(); ?>" width="65" height="45" /></a>
<div>
<p><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</div>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php }
}
add_action('thesis_hook_after_sidebar_1', 'recent_posts_thumb');

PS: Width and Height of thumbnails can be changed by modifying the values in the highlighted code.

In this code a conditional tag is used and it allows to display recent posts with thumbnails on all pages of your blog, except on home page. If you want to display recent posts on home page also, just remove if (!is_home()) { ?> and its closing tag } from the code carefully.

Check Display Related Posts in Thesis Theme without a Plugin

CSS for Recent Posts with Thumbnails in Thesis Theme

Add below CSS code to custom.css file and update it. We tried to add some clean and elegant styling to the recent posts with thumbnails. Anyhow, you can tweak the code and customize it based on the color scheme of your theme.

.custom #recent-posts {
margin: 0 0 15px;
float: left;
}
.custom #recent-posts ul {
float: left;
list-style: none outside none;
margin-top: -5px;
}
.custom #recent-posts ul li {
border-bottom: 1px solid #EEEEEE;
display: block;
float: left;
padding: 8px 0;
width: 100%;
}
.custom #recent-posts ul li a {
font-size: 13px;
line-height: 20px;
}
.custom #recent-posts ul .img {
float: left;
margin-right: 10px;
}

Voila, you have successfully added recent posts with thumbnails in thesis theme and its time to check whether they are working or not. Take your blog to a test drive, get back here and drop a thank you comment.

Hope you like this awesome cool way to display recent posts with thumbnails in thesis theme sidebar without using a plugin. If you need any help regarding this, drop a comment and we will get back to you very soon.