Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Display Featured Posts with Thumbnails in WordPress

Last updated on by
Elegant Themes
How to Display Featured Posts with Thumbnails in WordPress

There are numerous ways shared on the web to display Featured Posts. But almost all functions and plugins lack something. In this tutorial, we will share a function which will allow users to select specific Post IDs and display them as featured posts with thumbnails by utilizing the WordPress Post Thumbnail feature that was added in WordPress 2.9. This way allows you to avoid using Sticky posts which sometimes may be necessary due to other functions in a custom project.

Note: This is a Multi-Part tutorial, so we recommend that you have some knowledge of WordPress, PHP, HTML, and CSS.

We modified the plugin Featured Posts Lists by San of W3C Gallery. Even though San has created an advanced version of his plugin to show images, it requires a custom field. This way you will just use Post Thumbnail feature in 2.9.

Final Product

Display Featured Posts with Thumbnails in WordPress

Modified Plugin

First you would need to paste the code below in your functions.php file OR in a separate file and upload it as a plugin.

<?php
/*
Plugin Name: Featured Posts List with Thumbnail
Plugin URI: http://www.w3cgallery.com/w3c-css/display-specificmultiple-posts-as-featured-post-list-plugins
Description: Display specific/multiple posts List with Thumbnails on your sidebar or any place of your site. It creates a tab "Featured Posts List" in "Settings" tab
Version: 2.0
Author: SAN – w3cgallery.com & Windowshostingpoint.com & Syed Balkhi
Author URI: http://www.w3cgallery.com/
*/

// Main function to diplay on front end

function featuredpostsList() {
global $post, $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 $list){
$post = new WP_Query('p='.$list.'');
$post->the_post();
?>
<div class="popcontainer">
<div class="popthumb"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="popcontent">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="popauthor"><?php the_time('M j, Y') ?></div>

</div>

</div>

<?php }
} else {
echo $before ."None found". $after;
}
}

$data = array(
'posts_id' => ''
);
$ol_flash = '';

$posts_settings = get_option('posts_settings');

// ADMIN PANLE SEETTING
function 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*/
define('PLUGIN_URI', get_option('siteurl').'/wp-content/plugins/');

/* Functions */

function posts_options_page() {
global $ol_flash, $posts_settings, $_POST, $wp_rewrite;
if (isset($_POST['posts_id'])) {
$posts_settings['posts_id'] = $_POST['posts_id'];
update_option('posts_settings',$posts_settings);
$ol_flash = "Your Featured List has been saved.";
}

if ($ol_flash != '') echo '<div id="message"class="updated fade"><p>' . $ol_flash . '</p></div>';

echo '<div class="wrap">';
echo '<h2>Add Posts ID to Create Featured Post List</h2>';
echo '<table class="optiontable form-table"><form action="" method="post">
<tr><td colspan="2"><strong>This plugin gives full freedom to display multiple posts as Featured Post List to your site.</strong></td></tr>
<tr><td><strong>Post ID :</strong></td><td><input type="text" name="posts_id" value="' . htmlentities($posts_settings['posts_id']) . '" size="50%" /></td></tr>
<tr><td colspan="2"><strong>SAN Hint: To Add Multiple Post IDs use " , " for exmple : " 1, 2, 3" </strong></td></tr>
</table>';

echo '<Div class="submit"><input type="submit" value="Save your list" /></div>
<p>Paste this code into where you want it to display featured posts list <strong>&lt;?php featuredpostsList(); ?&gt;</strong> <br/> Or you can pass variable before and after like this default setting <strong>&lt;?php featuredpostsList($before = &lt;li&gt;", $after = &lt;/li&gt;") ?&gt;</strong></p>
</form>';
echo '</div>';

}

add_action('admin_menu', 'posts_add_pages');

?>

Once you have done that then you can display it by pasting the code anywhere in your template file:

<?php featuredpostsList(); ?>

Custom CSS

We are using custom CSS classes, so you would need them as well. Paste the following code in your style.css file.

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

Advanced Options

The above code will pull your default thumbnail and display it with the post title and the date the post was published. The only problem is that if you want to use a different size of thumbnail. Your theme might be using the thumbnail feature elsewhere thus you cannot use two different sizes with the current codes. So you will have to tweak it a little bit and add a new image size.

Open your functions.php and find the thumbnail codes and add the following code:

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

Now find the following line in the plugin above:

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

and Replace it with:

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

This would allow you to have two different sizes.

Another known issue would be if your thumbnail is not proportional, it would cause a smaller image to display rather than 60 x 60px because WordPress does not have the cropping ability. To avoid that you can use Additional Image Sizes Plugin which has the ability to crop. Name the custom image size as featured-thumbnail and use the same code as above to replace the original code.

The sole reason why we used this method was because we were using Sticky posts to display another list. You can also achieve this by using sticky posts. For the thumbnail trick, we chose the Additional Image Sizes plugin because we want to avoid using TimThumb JavaScript and maintain a fast loading site.

If you have additional solutions to this problem, please share it with us in the comments.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. nero says:

    hey thanks for the artice, please show me how to add featured post on this my little blog … see how it should look here …thanks!!!

    • WPBeginner Support says:

      We can not offer you support for individual WordPress themes, please contact theme support.

  2. Jay Prewitt says:

    I was wondering if you could tell me how to do a recent post on my home page that updated with new posts but allowed me to have a 200px by 150px pic and a little bit of the post in the area. I want them to be two by two inline. two on the top two below. Is this possible?

    Thank you,
    Jay
    Great tutorial, by the way

  3. harinder says:

    hey nice article, i want help from u..
    i am unable to split pages in my home page
    will you plz help me out…..
    thank you

  4. Isaias says:

    Awesome plugin! i did it and works very nice!
    Just i got a little problem… how can i do it with custom post type?
    I wrote the post id in settings section but does not work.
    with normal post works awesome!

    Thanks!

    • WPBeginner Support says:

      you need to enable post thumbnails for your custom post type. Go to your theme’s functions.php file and find the line

      add_theme_support( 'post-thumbnails');

      Replace this line with

      add_theme_support( 'post-thumbnails', array( 'post', 'yourcustomposttype' ) ); 
      
  5. namaserajesh says:

    Awesome tutorial, this is what I really want. Thanks for this code.

  6. DaniHandoko says:

    You hav great job. Awesome. Thank you so much .

  7. Rohit says:

    thanks for the tip…i am looking for a slider featured post plugin, any idea about which one is best (least bug free and easy to use) ?

    • Editorial Staff says:

      Yes, look in our plugins category. We have done a howto for SlideDeck which lets you do this.

  8. Yetunde says:

    Hi,

    After using your resources and couldn’t get what I wanted, I removed the codes from my function.php and it has distrupted my admin page.

    See what I get whenever I try to login

    Warning: Cannot modify header information – headers already sent by (output started at /home/robert/public_html/babiesvilleng.com/wp-content/themes/redtime/functions.php:251) in /home/robert/public_html/babiesvilleng.com/wp-includes/pluggable.php on line 890

    Can’t login to my admin page

    • Editorial Staff says:

      First time we hear anyone complain about an issue like this. What was the error that you were getting when you had the code in?

    • Hastings says:

      Make sure there is no space before the following tag in your plugin file: <?php

      • heather says:

        I’ve had the same problem as Hastings.. won’t let me proceed. I had to take the info out of the functions page and re-paste in my old info to proceed.

        Bummed because this looks exactly like what I need! thanks for our time!

        • Editorial Staff says:

          You need to make sure that you paste this at the very bottom of your functions.php file. Second make sure that if your file has php tag open, then remove the beginning php tag from our code.

  9. michelle says:

    This is almost exactly what I need. I have it working on:
    http://www.bostonframing.com/dev/frame-gallery/

    I basically want to have 3 different pages that will show different posts on those pages based on categories or tags. Any ideas how to do that?
    thanks!

  10. Belinda says:

    Awesome tutorial.. perfect for a site I’m building right now thank you!

    I noticed in the latest wordpress 3.0 the box ‘Post Thumbnail” is now referred to as ‘Featured Image’… but it still works the same.

  11. Cindy says:

    Could I use this in order to show all of the posts in a category with their thumbnails? So instead of featured articles the title will be the name of the category and then every post in that category will appear below (with a title and image)

    • Editorial Staff says:

      You can’t use this hack for that. You need to search in our database to find category hacks, and then run the loop to display posts from the specific category.

      • Cindy says:

        Thanks for getting back to me.
        \I have spent hours going through your site looking for category hacks as you suggested but I can’t see anything that seems relevant. Could you please let me know which category hack you were referring to?

  12. Costi says:

    If I don’t have the file loop.php, what am I supposed to do? What it is supposed to contain?
    Thank you for your support

    • Editorial Staff says:

      There is no file called loop.php. You need to search the term the loop wordpress and read the codex page.

  13. Costi says:

    Hello,

    I have the theme scarlett by jinsona designs, and I was wondering what I must do to display Featured Post with Thumbnails, I saw the code in the articole, but I was wondering if it is the same for every theme, because this one it already displays them.
    Thank you

    • Editorial Staff says:

      There are other ways of displaying featured posts with thumbnails. The code should work with all themes (slight modifications might be required)

  14. Dan says:

    Hey there,

    I was wondering if you could help me integrate this with another php code. My full request is here: http://wordpress.org/support/topic/390685

    I can’t seem to get any thumbnails to show up, and all this php is starting to make my head spin.

    Thanks

    • Editorial Staff says:

      That is two different codes. Our code is utilizing the feature list posts plugin where you get to choose the posts that are featured. The plugin you are working with is different. We haven’t worked with it in a long time to give an accurate answer here in the comments. You can contact our support team using the contact form, and they can take a closer look for you and probably give you an answer.

  15. Nimit Kashyap says:

    awesome tutorial.

    • Connie says:

      A simple add_action() hook would ealisy remove the need to hard code things into the theme files. Not sure why the plugin author doesn’t suggest this or better yet add the add_action() code into the plugin themselves.Anyways looks like a neat plugin.

      • Editorial Staff says:

        The reason why we don’t use add_action is because every theme is coded differently. People may need to show this in their sidebar. Which action should we hook the function to there? For those working with theme frameworks, would know exactly what they need. The purpose of the tutorial is to show folks the basics. They can take it from there.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.