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
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><?php featuredpostsList(); ?></strong> <br/> Or you can pass variable before and after like this default setting <strong><?php featuredpostsList($before = <li>", $after = </li>") ?></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.
Awesome tutorial, this is what I really want. Thanks for this code.
You hav great job. Awesome. Thank you so much .
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) ?
Yes, look in our plugins category. We have done a howto for SlideDeck which lets you do this.
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
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?
Make sure there is no space before the following tag in your plugin file: <?php
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!
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.
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!
You can simply run a loop to pull in specific categories or tags, and just use the post thumbnail feature that way.
got it to work, thanks!
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.
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)
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.
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?
Please use the contact form to send us the question.
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
There is no file called loop.php. You need to search the term the loop wordpress and read the codex page.
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
There are other ways of displaying featured posts with thumbnails. The code should work with all themes (slight modifications might be required)
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
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.
awesome tutorial.
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.
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.