How to Display Recent Posts With Thumbnails in WordPress

Add Tool

Display Recent Posts With Thumbnails in WordPress


Display Recent Posts With Thumbnails in WordPress

In this tutorial I will explain How to Display Recent Posts With Thumbnails in WordPress sidebar, footer or other place. Especially where you want. This tutorial will help you avoiding plugins to display recent posts with thumbnails. After complete the below steps your recent post sidebar widgets will like the below image. Let’s started!

How to Display Recent Posts with Thumbnails in WordPress

Step 1: Add Thumbnail Feature with post

Make sure your WordPress theme has supported WordPress featured image in post area. If you don’t clear about WordPress Featured image you can check it from post editor under Tags like the image below.

Recent Posts with Thumbnails
If your theme doesn’t support that feature image, you can add this very easily by adding some codes in your template’s functions.php file. You can see How to add Featured image in WordPress?

Add the below codes in functions.php file and check your post or page editor. Your will see The Featured Image option like the above image.

<?php if ( function_exists("add_theme_support") ) 
{ add_theme_support("post-thumbnails"); } ?>

Step 2: Display Recent Posts with Thumbnails

Now I will provide your some php codes which will call your recent posts with thumbnail image. Open your sidebar.php file and add the codes below where you want to display recent post with thumbnail image.

<div class="widget">
 <h3 class="widgettitle">Recent Post</h3> 
 <div class="text-widget"> 
  <div class="fimage-post"> 
   <ul> 
     <?php $the_query = new WP_Query('showposts=5&orderby=post_date&order=DESC'); ?> 
     <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 
     <li> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?> 
      <a style="display:block; font-weight:bold;" href="<?php the_permalink(); ?>"><?php echo substr(strip_tags(get_the_title()),0,26); ?>[...]</a> 
     <?php echo substr(strip_tags(get_the_content()),0,62); ?> </li>
    <?php endwhile;?>
  </ul> 
 </div> 
</div> 
</div>

Now you will be able to display thumbnail image with recent post title. Now need to add some style to design the recent post. After adding some CSS I will explain the above codes.

Step 3: Stylization of Recent Posts with Thumbnails

Now open your template’s style.css file and add the codes

.widget {
 margin: 0 0 20px;
 padding:10px;
 overflow:hidden;
 background:#eee;
 border:1px solid #ddd;
}

h3.widgettitle {
 font-size:12pt;
 letter-spacing:0;
 padding: 0 0 5px;
 border-bottom:1px dotted #ccc;
 margin-bottom:10px;
}
.fimage-post {
 background:#ffffff;
 padding:10px;
}

.fimage-post a {
 float: none;
}

.fimage-post img {
 float: left;
 margin: 4px 4px 0 0;
}

.fimage-post .clear {
 clear: both;
}

.fimage-post ul {
 list-style:none !important;
 margin:0 !important;
 padding:0 !important;
}

.fimage-post li {
 background: none repeat scroll 0 center transparent;
 border-bottom: 1px dotted #AAAAAA;
 list-style: none outside none !important;
 margin: 0 !important;
 padding: 10px 0;
}

Explanation of Recent Posts with Thumbnails in WordPress

The tag <h3> is for widget title

$the_query = new WP_Query('showposts=5&orderby=post_date&order=DESC'); is to make new post query, we use 5 to display 5post. If you want to display more, use your number. DESC mean Last post will show first. If you want to display your firs post or old post than you need to change DESC to ASC.

The tag <div class="fimage-post"> is for post title container with their thumbnails

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>

Here first 50 mean image width and last 50 mean image height. You can change it with your own size.

substr(strip_tags(get_the_title()),0,26);> is showing 26 character of your title. You can use your own character size.

substr(strip_tags(get_the_content()),0,62); is showing 62 character of your post details. You can use your own character size. Here I can use <?php the_excerpt(); ?> to display post description. Buy it would ugly.

wp_reset_query(); is to reset a new query made earlier.

Now you know how to display recent post with thumbnails in WordPress sidebar. Do you know how to display recent post with thumbnails in wordpress Footer? It easy only copy and past the sidebar widgets codes in your footer.php file.


Tags: Blogging, post thumbnail, posts with thumbnails, recent post, recent posts with thumbnails, sidebar.php, thumbnail, WordPress, wordpress development, wordpress widgtes, wp thumbnail,
Payza

About Masum Billah

Display Recent Posts With Thumbnails in WordPress 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: How to Display Recent Posts With Thumbnails in WordPress


adf.ly