How to Show Latest Post, Related Post and Featured Post on WP 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

Comments

52 responses to “How to Show Latest Post, Related Post and Featured Post on WP Blog”

  1. macromedia dreamweaver Avatar
    macromedia dreamweaver

    Real informative tips for wordpress

  2. Rahul kuntala Avatar
    Rahul kuntala

    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 🙂

  3. Tuan Avatar
    Tuan

    Thank you for providing a useful article for me!

  4. Imran Soudagar Avatar
    Imran Soudagar

    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.

  5. cpm ads Avatar
    cpm ads

    This works with newest version of wordpress or with all?

    1. Olawale Daniel Avatar
      Olawale Daniel

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

  6. SEO company Gurgaon Avatar
    SEO company Gurgaon

    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.

  7. Jasmine Avatar
    Jasmine

    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!

  8. GRR2 Avatar
    GRR2

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

  9. Niki Avatar
    Niki

    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.

  10. siam Avatar
    siam

    wow. so much useful. thanks

  11. Aadith Avatar
    Aadith

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

  12. Teyona Avatar
    Teyona

    Another great stuff to read. Thanks for sharing.

  13. Android App Development Avatar
    Android App Development

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

  14. Roxy Avatar
    Roxy

    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.

  15. Romantic love sms Avatar
    Romantic love sms

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

  16. domed labels Avatar
    domed labels

    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.

  17. Harneet Singh Avatar
    Harneet Singh

    Great Post. Keep up the Good Work. 🙂 🙂

  18. Gurus tech Avatar
    Gurus tech

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

  19. James Avatar
    James

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

  20. Mobile Price Avatar
    Mobile Price

    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

  21. Mobile Price Avatar
    Mobile Price

    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.

  22. Commercial Outdoor Lighting Fixtures Avatar
    Commercial Outdoor Lighting Fixtures

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

  23. gaulhost Avatar
    gaulhost

    thank you
    This tutorial really helped me

  24. Zoren Avatar
    Zoren

    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!

  25. Tech Blog Avatar
    Tech Blog

    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.

  26. Essiac Tea Avatar
    Essiac Tea

    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.

  27. Short term apartments Vancouver Avatar
    Short term apartments Vancouver

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

  28. Personal Injury Attorneys Avatar
    Personal Injury Attorneys

    Great post. I love WordPress!

  29. fiverr clone Avatar
    fiverr clone

    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

  30. Naser Avatar
    Naser

    Thanks for the useful tutorial Daniel 🙂

  31. Piercing girl Avatar
    Piercing girl

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

  32. Permitabs Avatar
    Permitabs

    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.

  33. PHP Development India Avatar
    PHP Development India

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

  34. Jordan Xiong Avatar
    Jordan Xiong

    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.

    1. Olawale Daniel Avatar
      Olawale Daniel

      You are welcome. Jordan

  35. Bharat Chowdary Avatar
    Bharat Chowdary

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

  36. Rocky Avatar
    Rocky

    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….

  37. seo in nepal Avatar
    seo in nepal

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

  38. Energy Broker Avatar
    Energy Broker

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

  39. Energy Broker Avatar
    Energy Broker

    Weldon you have done a great job.Thanks

  40. Jonathan Avatar
    Jonathan

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

  41. Terry Avatar
    Terry

    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.

  42. Carol Ann Avatar
    Carol Ann

    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!

  43. news naija Avatar
    news naija

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

    1. Olawale Daniel Avatar
      Olawale Daniel

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

  44. online shop in nepal Avatar
    online shop in nepal

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

  45. Boles?awa Avatar
    Boles?awa

    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.

    1. Olukunle Moses Avatar
      Olukunle Moses

      You are welcome

  46. Emilie Avatar
    Emilie

    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.

    1. Olukunle Moses Avatar
      Olukunle Moses

      I will do that, thanks for the advice.

  47. Mas Avatar
    Mas

    Nice site you’ve got there. Rep.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.