Show Latest Post, Related Post and Featured Post on WP
+234 816 619 6130 Friday - Dec 09, 2016

How to Show Latest Post, Related Post and Featured Post on WP Blog


How to Show Related, Random and Recent posts on Wordpress blog

This is how to show latest post, related post and featured post on your wordpress blog without using plugins. Plugins makes everything faster and easier but it also limits your wordpress blog potential when it comes to loading time, but this WP code lets you do that with ease.

In order to reduce your website bounce rate, there’s need for you to make sure that you link to other pages on your blog where the readers can read, related to the current post that is being read.

Google do punish websites for not keeping readers as long as possible because the Internet Godfather per say, Google – do drive people to blog and website while tracking “how long they’d spend on the site before leaving for other places on the web.” If people spend less time on your blog, next time, you may not get traffic for the keyword that was used to get those people to your site again. With that, you are losing more traffic on your website because of your webpages’ failure to convert people into permanent reader.

If you are searching for code to show latest post, recent post and related posts on your blog, then follow these nice CSS codes and get the job done in seconds.

How To Show Related Posts Without Plugins

This code will show related posts below all your wordpress single contents once viewed without the need for installing related posts plugins like the one mentioned on our best wordpress plugins post here.

<!–BEGIN Code for Related posts–>
<br />
<div>
<span>
<!–?php
//list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
?>
<!–?php _e(‘Related Posts:’, ‘f2?) ?>
<ol>
<!–?php
$first_tag = $tags[0]->term_id;
$args=array(
‘tag__in’ => array($first_tag),
‘post__not_in’ => array($post->ID),
‘showposts’=>5,
‘caller_get_posts’=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>

  • php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to “>

<!–?php the_title(); ?>
<!–?php
endwhile;
}
}
?>
</ol>
</span>
</div>
<!–End Code for Related posts–>

How to Show More Recent Posts after Your Blog Post

If you want your blog post to include recent posts below the content, this clean CSS code will help you do that in one two three steps, hassle free.

<!–BEGIN Code for More Recent Post after post–>
<!–?php echo “Recent Posts:“; ?>
<ol>
<!–?php get_archives(‘postbypost’, ’5?, ‘custom’, ‘

  • ’, ‘

’); ?>
</ol>
<!–END Code for More Recent Post after post–>

YOU MAY LIKE TO READ: Top 5 alternatives to HostGator

How To Show More Random Posts After Your Post Content

Time will come when you would love to show your readers some random contents on your website so that they can learn more from reading them without leaving for other websites; this code is good for that. When properly inserted into your wordpress blog, you’ll be able convince newcomers to read your evergreen contents before leaving for other places. And you know what, they are gonna stay for a very long time, and they could even subscribe to your email list along the line – so, it is now working more than decreasing bounce rate, rather, it coverts well.

<!–BEGIN Code for More Random Post after post–>
<!–?php echo “Random Posts:“; ?>
<ol>
<!–?php $posts = get_posts(‘orderby=rand&numberposts=5?); foreach($posts as $post) { ?>

  • php the_permalink(); ?>” title=”“>

</li>
<!–?php } ?>
</ol>
</li>
<!–END Code for More Random Post after post–>
<!–?php wp_reset_query(); ?>

Using these techniques will help you reduce bounce rate on your website overnight if you make use of it properly.

But remember this: Always put this code <!–?php wp_reset_query(); ?>  at the end of the whole CSS file configuration. It is very important for you to insert this code at the end of the codes because the absence of it could cause fatal errors to your blog. The wordpress comment system can give you lot of problems along the line. And you can also use this code <!--?php rewind_posts(); the_post(); ?> instead of that one.

YOU MAY LIKE TO READ: LG Optimus L3 E400 Smartphone pre-order available in Sweden

How to Add colour and Nice Designs to the Post Suggestions

You can easily set CSS style for any of these codes to make them looks more attractive to the visitors by using the styles below:

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #BE3E00;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ol li {
display : block;
background : url(your image URL) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Then add <div id=”related-posts”> before the starting of the code and close it with </div> nearer to an already closed tag. For example, look at how the </div> tag was placed in one of my websites theme file as it shows below:

!–END Code for More Random Post after post–>
<!–?php wp_reset_query(); ?>
<!–?php if(is_page()) { ?> 

</div>
</div>

</div> ========> and it was closed here. Please note that if anything wrong showed, you just have to try it near other tags that are closed.

How To Add Small Arrow In Front Of The Design

To show the arrow icon in front of your posts suggestions, then simply download any arrow or icon from the web or create one from your computer, using Adobe Photoshop and save it as arrow.jpg. After that, upload it to your theme images folder and it will certainly show on the page because we’ve already callout the option in the code above. But, make sure that the arrow icon size is 16×16.

Here is an output of my design after applying the CSS:

How to Show Related, Random and Recent posts on WordPress blog

©2015 TechAtLast Int'l Media, Inc. All Rights Reserved.
52 comments
  1. macromedia dreamweaver

    April 6, 2012 at 9:23 pm

    Real informative tips for wordpress

    Reply
  2. Rahul kuntala

    April 7, 2012 at 6:50 am

    Really excellent stuff from you. I’m always using WP plugins for it to show on my blog. Hmm, so it’s time for me to tweek on my blog. I’ll try it out.

    Thanks for the share. BTW I’ve recently published on article on my blog. You should check out 🙂

    Reply
  3. Tuan

    April 7, 2012 at 7:45 am

    Thank you for providing a useful article for me!

    Reply
  4. Imran Soudagar

    April 8, 2012 at 10:31 am

    Hey thanks for the most useful article I really needed this type of information. This is most useful for me and now I am following your steps. But I think plugins are easy to deal with.

    Reply
  5. cpm ads

    April 8, 2012 at 3:57 pm

    This works with newest version of wordpress or with all?

    Reply
    • Olawale Daniel

      April 9, 2012 at 9:21 am

      It worked with all…it all depends on your theme template

      Reply
  6. SEO company Gurgaon

    April 9, 2012 at 9:52 am

    Hey thanks for the most useful content I really required this form of details. This is most useful for me and now I am following your actions. But I think plug-ins are super simple to cope with.

    Reply
  7. Jasmine

    April 10, 2012 at 2:03 am

    Great compilation of short WordPress snippets. Sometimes it’s good to show the latest posts and etc, without using plugins. You will have more control and won’t slow down your blog with too many bloated plugins!

    Reply
  8. GRR2

    April 10, 2012 at 2:07 am

    This tutorial will come very handy for me, thanks a lot.

    Reply
  9. Niki

    April 10, 2012 at 6:42 am

    Hi.
    Definitely having related posts (or something similar) at the end of the posts is very good for keeping users in your site and for reducing the bounce rate. And with no plugins is even better.
    If I may add, it will be even better if you make it in a way that shows an image for each related post too. You can access the custom fields to get url or use a function that extracts the first image in a post (google it to find it). The image will make them much more visible.
    And another thing I want to mention is for those with a lot of posts (few thousands). Keep in mind that even without a plugin you are making big queries so be careful with the resource usage.
    Regards.

    Reply
  10. siam

    April 10, 2012 at 11:56 am

    wow. so much useful. thanks

    Reply
  11. Aadith

    April 11, 2012 at 4:13 am

    Excellent olwale..
    U Did good research in writing this article.. Great..

    Reply
  12. Teyona

    April 11, 2012 at 2:25 pm

    Another great stuff to read. Thanks for sharing.

    Reply
  13. Android App Development

    April 12, 2012 at 10:10 am

    Great article this information will help more for all WP users. Thanks for sharing such useful information.

    Reply
  14. Roxy

    April 13, 2012 at 7:10 am

    This article’s really helpful especially for those who are using wordpress for their blogs. It can be tricky sometimes to manage plugins so it’s good to find materials like this one that would guide you along the way.

    Reply
  15. Romantic love sms

    April 13, 2012 at 11:16 am

    How to add arrow in front is helpful indeed. Thanks for that.

    Reply
  16. domed labels

    April 13, 2012 at 3:31 pm

    Therefore i say word press is one of the easiest CMS of the world as well as SEO friendly. Your codes are very important and worthy for me to learn how to show latest related featured post on the word press. I will try it on my personal blog to check it out.

    Reply
  17. Harneet Singh

    April 13, 2012 at 4:21 pm

    Great Post. Keep up the Good Work. 🙂 🙂

    Reply
  18. Gurus tech

    April 14, 2012 at 12:30 pm

    nice one this great info and bro your website is cools… know in your mind you have just a new reader

    Reply
  19. James

    April 14, 2012 at 1:33 pm

    Well doing it manually will help you as Plugins will result in slow speed.

    Reply
  20. Mobile Price

    April 14, 2012 at 2:06 pm

    Hey thanks for the most useful article I really needed this type of information. This is most useful for me and now I am following your steps

    Reply
  21. Mobile Price

    April 14, 2012 at 2:06 pm

    Hi.
    Definitely having related posts (or something similar) at the end of the posts is very good for keeping users in your site and for reducing the bounce rate. And with no plugins is even better.

    Reply
  22. Commercial Outdoor Lighting Fixtures

    April 14, 2012 at 11:33 pm

    Very well said, your blog says it all about that particular topic.

    Reply
  23. gaulhost

    April 15, 2012 at 8:03 am

    thank you
    This tutorial really helped me

    Reply
  24. Zoren

    April 15, 2012 at 6:44 pm

    Wow! I’ve haven’t tried this one before…now I know what to do on my WP blog..anyways thanks a lot for sharing this awesome tip!

    Reply
  25. Tech Blog

    April 15, 2012 at 8:00 pm

    Thanks a lot for CSS codes Olwale. as too many plugins just increases the extra burden on blog. This css code will definitely help in reducing the load time.

    Reply
  26. Essiac Tea

    April 16, 2012 at 10:46 am

    Well… You have shared good information related to wordpress blog and I think it might be helpful to attract more and more traffic on blog.

    Reply
  27. Short term apartments Vancouver

    April 16, 2012 at 2:30 pm

    Great !!!!!!!! WP is needed a right concerned i will also use it in my WP blogs because i wana emerge as an triumph.

    Reply
  28. Personal Injury Attorneys

    April 16, 2012 at 10:00 pm

    Great post. I love WordPress!

    Reply
  29. fiverr clone

    April 17, 2012 at 5:08 am

    Hi Daniel,

    Thanks for the codes the more number plugin will make the blog load slower its hurts a lot,can u suggest me how to make an featured post as like you have did on your blog

    Reply
  30. Naser

    April 17, 2012 at 10:54 am

    Thanks for the useful tutorial Daniel 🙂

    Reply
  31. Piercing girl

    April 17, 2012 at 3:35 pm

    Thank you Olawale for this trick, i think i’m going to setup it on my blog too.
    Have a nice day.

    Reply
  32. Permitabs

    April 17, 2012 at 6:13 pm

    Nice tips to keep user on your site. Thanks for sharing these codes. I am facing a problem. I want to ask is it possible to show the date before the linked post title when using:

    I want to display posts in order of post date.

    Reply
  33. PHP Development India

    April 18, 2012 at 5:26 am

    Plugin is faster and easier but limited and WP code makes that work easy and this is a good method…

    Reply
  34. Jordan Xiong

    April 18, 2012 at 6:04 am

    I’ve haven’t tried this one before, Really excellent stuff from you. I’m always using WordPress plugins for it to show on my blog,I think plug-ins are pretty simple to cope with, thanks for this wonderful stuff.

    Reply
    • Olawale Daniel

      April 18, 2012 at 8:19 am

      You are welcome. Jordan

      Reply
  35. Bharat Chowdary

    April 19, 2012 at 1:59 pm

    this is good stuff. now its time to get rid of crappy plugins.

    Reply
  36. Rocky

    April 19, 2012 at 5:39 pm

    When i started my first blog, i had this issue. I searched everywhere looking about the featured thing, well, i figured it somehow over time. I’m sure this article would be helpful for those who are new to all this. I know how it feels when you cant find what you’re looking for and you feel disappointed….

    Reply
  37. seo in nepal

    April 20, 2012 at 8:02 am

    i am going use it …..thanks tutorial code share

    Reply
  38. Energy Broker

    April 21, 2012 at 7:11 am

    This is a great post. You have done such a good job.Weldon keep it up

    Reply
  39. Energy Broker

    April 21, 2012 at 7:14 am

    Weldon you have done a great job.Thanks

    Reply
  40. Jonathan

    April 22, 2012 at 8:39 pm

    Thanks for this. I’ve been meaning to add a related posts section to one of my blogs for a long time.

    Reply
  41. Terry

    April 23, 2012 at 7:12 am

    Hey thanks for the most useful article I really needed this type of information, I’m always using WP plugins for it to show on my blog, this is very useful for me and can follow you and I think plugins are easy to deal with, thanks for sharing.

    Reply
  42. Carol Ann

    April 24, 2012 at 12:51 pm

    Great article! I’m going to try and install it right now.

    Do you think you could also post the option for including related posts for a category instead of a tag?

    Ex. My Post “Anniversary Gifts” is placed in the categories “Anniversary Gifts”, “First Anniversary Gifts”, “Gifts for Her”.

    I would like to display “5” posts in the “Anniversary Gifts” category and if there are not “5” posts in that category the remaining should be pulled from the next available category. I guess the problem with this is how will the request choose the category to pull from first?

    Is it possible to make it match the keywords in the title and match that category?

    Thanks!

    Reply
  43. news naija

    June 3, 2012 at 7:39 am

    I think i will prefer installing a plugin to this code for someone with no coding background

    Reply
    • Olawale Daniel

      June 3, 2012 at 7:45 am

      You just have to do some dirty coding work bro. You should start from here http://www.codecademy.com 🙂

      Reply
  44. online shop in nepal

    August 21, 2012 at 9:15 am

    it is really informer for me because i search it long time ago.

    Reply
  45. Boles?awa

    November 30, 2012 at 11:14 am

    We are a group of volunteers and starting a new scheme in our community. Your web site provided us with valuable information to work on. You ve done an impressive job and our entire community will be grateful to you.

    Reply
    • Olukunle Moses

      November 30, 2012 at 11:35 am

      You are welcome

      Reply
  46. Emilie

    November 30, 2012 at 11:50 am

    Its the best time to make some plans for the future and it is time to be happy. Ive read this post and if you like I desire to suggest you few interesting things or advice. Maybe you could write next articles referring to this article.

    Reply
    • Olukunle Moses

      November 30, 2012 at 2:02 pm

      I will do that, thanks for the advice.

      Reply
  47. Mas

    November 30, 2012 at 9:38 pm

    Nice site you’ve got there. Rep.

    Reply

Leave a Reply

Your email address will not be published.

Predefined Skins

Primary Color

Background Color

Example Patterns

demo demo demo demo demo demo demo demo demo demo