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:
Leave a Reply