Display Random Posts with Thumbnails in WordPress

Add Tool

Display Random Posts with Thumbnails in WordPress


Display Random Posts with Thumbnails in WordPress

In this tutorial I will explain how to display random post with thumbnails in WordPress sidebar, footer or other place. Especially where you want. This tutorial will help you avoiding plugins to display random posts with thumbnails. After complete the below steps your random post sidebar widgets will like the below image. After refreshing your page the post will change. Let’s started!

random post 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.

random facebook posts

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? for more details of adding featured image in your theme.

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 randmo Posts with Thumbnails

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

<div class="widget"> 
 <h3 class="widgettitle">Random Post</h3>
 <div class="text-widget"> 
 <div class="fimage-post"> 
  <ul>
  <?php query_posts('showposts=5&offset=0&orderby=rand'); ?> 
  <?php if (have_posts()) : while (have_posts()) : 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 random post title. Now need to add some style to design the random post. After adding some CSS I will explain the above codes.

Setp 3: Stylization of Random 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 Random Posts with Thumbnails in WordPress

  • The tag <h3> is for widget title
  • <?php query_posts('showposts=5&offset=0&orderby=rand'); ?> is to make new post query, we use 5 to display 5post. If you want to display more, use your number. rand mean post will change after page reload.
  • 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. But it would be ugly.
  • wp_reset_query(); is to reset a new query made earlier.

Tags: Random posts widget WordPress plugin, WordPress random posts sidebar, WordPress random image widget, WordPress random text widget, WordPress random image
Payza

About Masum Billah

Display Random 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: Display Random Posts with Thumbnails in WordPress


adf.ly