New Post has been published on Devtoolsplus
New Post has been published on http://www.devtoolsplus.com/display-recent-posts-with-thumbnails/
How to Display Recent Posts with Thumbnails in WordPress
In this tutorial I will explain how to display recent post 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!
Display Recent Posts with Thumbnails in WordPress
Setp 1: Add Thumbnail Feature with post
Make sure your WordPress theme has supported WordPress featured image in your post. If you don’t clear about WordPress Featured image you can check it from post editor under Tags like the image below.
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"); } ?>
Setp 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.
Setp 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.
I will try to show “How to Display Random Posts with Thumbnails in WordPress ” at my next WordPress tutorial.