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 = 'https://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:
Do let us know how you are showing featured posts?
Hi, when I add this code to my theme (Tiny Framework), I can’t log in to dashboard.
Can you explain how should I change this code?
+1
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?
Thanks so much.. Easiest tutorial ever… I really do appreciate..
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
ohh…gr8 tips. I tried in my site & succeeded
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!
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?
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?
that great.. thanks for sharing such imp.. :)
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.
how to add page number if I have 100 feature post
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.
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.
Thanks for this post. Your posts are very thorough. Excellent.