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:
More About Me
Real informative tips for wordpress
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 🙂
Thank you for providing a useful article for me!
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.
This works with newest version of wordpress or with all?
It worked with all…it all depends on your theme template
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.
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!
This tutorial will come very handy for me, thanks a lot.
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.
wow. so much useful. thanks
Excellent olwale..
U Did good research in writing this article.. Great..
Another great stuff to read. Thanks for sharing.
Great article this information will help more for all WP users. Thanks for sharing such useful information.
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.
How to add arrow in front is helpful indeed. Thanks for that.
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.
Great Post. Keep up the Good Work. 🙂 🙂
nice one this great info and bro your website is cools… know in your mind you have just a new reader
Well doing it manually will help you as Plugins will result in slow speed.
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
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.
Very well said, your blog says it all about that particular topic.
thank you
This tutorial really helped me
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!
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.
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.
Great !!!!!!!! WP is needed a right concerned i will also use it in my WP blogs because i wana emerge as an triumph.
Great post. I love WordPress!
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
Thanks for the useful tutorial Daniel 🙂
Thank you Olawale for this trick, i think i’m going to setup it on my blog too.
Have a nice day.
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.
Plugin is faster and easier but limited and WP code makes that work easy and this is a good method…
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.
You are welcome. Jordan
this is good stuff. now its time to get rid of crappy plugins.
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….
i am going use it …..thanks tutorial code share
This is a great post. You have done such a good job.Weldon keep it up
Weldon you have done a great job.Thanks
Thanks for this. I’ve been meaning to add a related posts section to one of my blogs for a long time.
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.
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!
I think i will prefer installing a plugin to this code for someone with no coding background
You just have to do some dirty coding work bro. You should start from here http://www.codecademy.com 🙂
it is really informer for me because i search it long time ago.
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.
You are welcome
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.
I will do that, thanks for the advice.
Nice site you’ve got there. Rep.