wordpress-featured posts
April 26th, 2011

How to Display Featured Post with Thumbnails Without Plugin

Object:
1. Display featured post with thumbnail.
2. Title will be placed below the thumbnail.
3. Featured posts will be randomly selected and must show default thumbnail if no thumbnail is defined for the post.
4. All selected posts must appear together, no slider to navigate.
5. It must not use any script(Not good for SEO) or plugin.


On home page, we generally show a fixed number of recent posts with summary. Although, WordPress provides Sticky Posts functionality but not so useful when number of featured posts are more. So I decided to implement this without any plugin.

1. To implement this, First, You need to create a category (say featuredcategory) and add featured posts in the category.
2. Write following code in function.php of your WordPress theme.

<?php
function getFeaturePosts(){
 ?>				
				<ul class="related-posts">
				<?php
				$default_thumbnail = 'http://img.techbrij.com/techbrij%20logo.gif';
				$the_query = new WP_Query('showposts=5&orderby=rand&category_name=featuredcategory');
				while ($the_query->have_posts()) : $the_query->the_post(); ?>
						<li>
							 <div class="related_thumbnail">
	        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> 							
							<?php 
							if (has_post_thumbnail()):
							 the_post_thumbnail(); 
							else:
							?>
							<img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />
							<?php endif; ?>
							</a>
	    </div>
	    <div style="clear:both;"></div>
			<div class="related_permalink">
	        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>		
	    </div>
							
						</li>				

				<?php endwhile; ?>
				<?php wp_reset_query(); ?>
				</ul>
<?php
}
 ?>

In the above code, you need to define $default_thumbnail parameter and assign default thumbnail link. If there is no thumbnail then defined $default_thumbnail link will be displayed.

Following line is the most important line.

$the_query = new WP_Query(‘showposts=5&orderby=rand&category_name=featuredcategory’);

showposts=5: define number of posts to be displayed
orderby=rand: posts are randomly selected
category_name=featuredcategory: define category of featured posts.

3. Add following styles in your css file:

/* Related OR Feature Posts */
.related-posts {
    list-style:none;
    margin:0;
    padding:0;
		
}
 
.related-posts li {
    display:block;
	text-align:center;
    float:left;
    margin:0 auto;
    padding-left:3px 10px 3px 0px;    
    width:150px; 
	height:175px;
}
.related-posts li :hover{

} 
.related_permalink{   
    text-align:center;
    padding-top:5px;	
	padding-bottom:5px;
margin-bottom:2px;	

}
 .related_permalink a{
color:black;
font-weight:bold;
 text-decoration:none;
 }
 .related_permalink a:hover{
 text-decoration:underline;
 } 
.related_thumbnail{
     text-align:center;
}
.related_thumbnail img
{ border-width:0px;
width:100px;
float:none;
margin:0 auto;
}
/* Related Posts End */

you can change thumbnail size by defining height and width in .related_thumbnail img style.

4. Now call method where you want to display featured posts.

<?php  getFeaturePosts(); ?>

See following sample display of featured posts:

wordpress featured post

Do let us know how you are showing featured posts?

  • Anonymous

    Thanks for this post. Your posts are very thorough. Excellent.

  • http://HackTik.com Hacktik

    Very nice indeed. I was actually looking for this already and thanks I found it here. I have tried other features post plugin which works as a slider but never like them and was looking for something like this. Will give it a try.

  • Gophar

    how to add page number if I have 100 feature post

  • http://www.techbrij.com Brij Mohan

    The object is to select random feature post and show them, not all. you can configure using showposts parameter. It is better to give feature category link saying ‘more…’ instead of pagination.

  • http://techinfoblog.net Navin

    Thanks Brij, This is awesome tweak, I may try this to display featured post on my homepage. I hate those plugins to get related posts, thats why I never use it. Your tute seems easy to opt. Thanks for sharing.

  • Anonymous

     that great.. thanks for sharing such imp.. :)

  • http://twitter.com/amuletts Amy Letts

    I tried this and I get an error:

    Fatal error: Call to undefined function has_post_thumbnail() in …functions.php on line 13

    Could you help me? How do I get rid of this error?

  • http://twitter.com/amuletts Amy Letts

    Ah, sorted out my error, thumbnails were not ‘enabled’. Unfortunately not it is only displaying the default image. Do you know why it might have difficulty finding the thumbnails for the posts?

  • http://twitter.com/amuletts Amy Letts

    Ahh! I’ve got it now. Sorry for moaning! LOL. I needed to set the ‘Featured image’ in each post for it to show up. Thanks very much for this code – very useful!

  • http://www.techzons.com/ Ahsanul Karim

    ohh…gr8 tips. I tried in my site & succeeded 

  • Anonymous

    Frank, thanks for your notes. I think all your points are valid. The only issue is what and how you use in real time scenario.Nice tut! Thanks so much for the great info.
     I was wondering this post,I like the idea Stephanie. I wonder if there wouldn’t be another, even more elegant solution.
    vps hosting reviews

  • Anonymous

    Thanks so much.. Easiest  tutorial  ever… I really do appreciate..

  • http://www.ipublisharticles.com/ iPublish Articles

     Hi, I searched for days for something like this code and found your site just when I was about to give up. Thank you for writing it up so well. Some sites put up code but the css is missing and its really difficult for people who are not programmers to follow. Is it possible to use the first image of the post (attachment image) instead of the featured image?

  • Hasitha Prabath

    +1