How to Display Featured Posts with Thumbnails in WordPress

There are a lot of tactics shared on the internet to demonstrate Featured Posts. But nearly all purposes and plugins lack one thing. In this instructional, we can percentage a serve as which is able to permit customers to make a choice particular Post IDs and demonstrate them as featured posts with thumbnails by using the WordPress Post Thumbnail characteristic that was once added in WordPress 2.9. This means lets in you to steer clear of the use of Sticky posts which every now and then is also essential due to different purposes in a customized mission.

Note: This is a Multi-Part instructional, so we suggest that you’ve got some wisdom of WordPress, PHP, HTML, and CSS.

We changed the plugin Featured Posts Lists via San of W3C Gallery. Even regardless that San has created a sophisticated model of his plugin to display pictures, it calls for a customized box. This means you’ll simply use Post Thumbnail characteristic in 2.9.

Final Product

Modified Plugin

First you could possibly want to paste the code beneath in your purposes.php record OR in a separate record and add it as a plugin.

Plugin Name: Featured Posts List with Thumbnail
Plugin URI:
Description: Display particular/a couple of posts List with Thumbnails to your sidebar or anyplace of your web page. It creates a tab "Featured Posts List" in "Settings" tab
Version: 2.0
Author: SAN – & & Syed Balkhi
Author URI:

// Main serve as to diplay on entrance finish

serve as featuredpostsList() {
international $submit, $wpdb, $posts_settings;
// posts_id from database
$posts_id = $posts_settings['posts_id'];

if($posts_id) {

$posts_idarray = explode(',',$posts_id);

foreach ($posts_idarray as $listing){
$submit = new WP_Query('p='.$listing.'');
<div magnificence="popcontainer">
<div magnificence="popthumb"><a href="<?php the_permalink(); ?>" name="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div magnificence="popcontent">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div magnificence="popauthor"><?php the_time('M j, Y') ?></div>



<?php }
} else {
echo $earlier than ."None discovered". $after;

$information = array(
'posts_id' => ''

$posts_settings = get_option('posts_settings');

serve as posts_add_pages() {
// Add new menu in Setting or Options tab:
add_options_page('Featured Posts List', 'Featured Posts List', 8, 'postsoptions', 'posts_options_page');

/* Define Constants and variables*/
outline('PLUGIN_URI', get_option('siteurl').'/wp-content/plugins/');

/* Functions */

serve as posts_options_page() {
international $ol_flash, $posts_settings, $_POST, $wp_rewrite;
if (isset($_POST['posts_id'])) {
$posts_settings['posts_id'] = $_POST['posts_id'];
$ol_flash = "Your Featured List has been stored.";

if ($ol_flash != '') echo '<div identification="message"magnificence="up to date fade"><p>' . $ol_flash . '</p></div>';

echo '<div magnificence="wrap">';
echo '<h2>Add Posts ID to Create Featured Post List</h2>';
echo '<desk magnificence="optiontable form-table"><variety motion="" way="submit">
<tr><td colspan="2"><sturdy>This plugin offers complete freedom to demonstrate a couple of posts as Featured Post List to your web page.</sturdy></td></tr>
<tr><td><sturdy>Post ID :</sturdy></td><td><enter kind="textual content" title="posts_id" price="' . htmlentities($posts_settings['posts_id']) . '" length="50%" /></td></tr>
<tr><td colspan="2"><sturdy>SAN Hint: To Add Multiple Post IDs use " , " for exmple : " 1, 2, 3" </sturdy></td></tr>

echo '<Div magnificence="put up"><enter kind="put up" price="Save your listing" /></div>
<p>Paste this code into the place you need it to demonstrate featured posts listing <sturdy>&lt;?php featuredpostsList(); ?&gt;</sturdy> <br/> Or you'll go variable earlier than and after like this default environment <sturdy>&lt;?php featuredpostsList($earlier than = &lt;li&gt;", $after = &lt;/li&gt;") ?&gt;</sturdy></p>
echo '</div>';


add_action('admin_menu', 'posts_add_pages');


Once you’ve achieved that then you’ll demonstrate it via pasting the code any place in your template record:

<?php featuredpostsList(); ?>

Custom CSS

We are the use of customized CSS categories, so you could possibly want them as smartly. Paste the next code in your taste.css record.

border-bottom: 1px cast #D0CDC5;
width: 274px;
glide: left;
padding: Zero 0 15px 0;
margin: Zero 0 15px 0;
width: 60px;
glide: left;
background: #D0CDC5;
padding: 5px;
margin: 0 10px Zero 0;
width: 185px;
glide: left;
.popcontent h2{
font-size: 13px;
margin: Zero Zero 3px 0;
padding: 0;
.popcontent h2 a{
text-decoration: none;

Advanced Options

The above code will pull your default thumbnail and demonstrate it with the submit name and the date the submit was once printed. The most effective drawback is if you need to use a unique length of thumbnail. Your theme may well be the use of the thumbnail characteristic somewhere else thus you can’t use two other sizes with the present codes. So you’ll have to tweak it somewhat bit and upload a brand new symbol length.

Open your purposes.php and to find the thumbnail codes and upload the next code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // Normal submit thumbnails
add_image_size( 'featured-thumbnail', 60, 60 ); // Featured thumbnail length

Now to find the next line in the plugin above:

<div magnificence="popthumb"><a href="<?php the_permalink(); ?>" name="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>

and Replace it with:

<div magnificence="popthumb"><a href="<?php the_permalink(); ?>" name="<?php the_title(); ?>"><?php the_post_thumbnail('featured-thumbnail'); ?></a></div>

This would permit you to have two other sizes.

Another identified factor can be in case your thumbnail isn’t proportional, it might purpose a smaller symbol to demonstrate somewhat than 60 x 60px as a result of WordPress does now not have the cropping skill. To steer clear of that you’ll use Additional Image Sizes Plugin which has the facility to crop. Name the customized symbol length as featured-thumbnail and use the similar code as above to substitute the unique code.

The sole reason we used this system was once as a result of we had been the use of Sticky posts to demonstrate every other listing. You too can do so via the use of sticky posts. For the thumbnail trick, we selected the Additional Image Sizes plugin as a result of we wish to steer clear of the use of TimThumb JavaScript and handle a quick loading web page.

If you’ve further answers to this drawback, please percentage it with us in the feedback.

Recent Articles

The Best Pinterest Alternatives to Use if You are Bored of Pinterest

Pinterest is a loved social media network among the lover of aesthetics, mostly females tbh. Now, however more and more people are...

Ways you can add links to your Instagram post in 2021

Instagram has many cool features which need no introduction. However, there are a number of features that...

Finance App You should Have on Your iPhone and Android

We live in the age of digitization. When everything is digital, it is no surprise that money has joined the club too....

5 Video Editing Softwares to Try Your Hand at in 2021

Video is the king when it comes to social media. With reels dominating Instagram and Facebook and...

Charge Your Laptop Without a Charger in 5 Ways

Forgetting your laptop charger is a pretty common thing. We all have been there and all of...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here