What are Related Posts

When someone visits your blog post, you can display some related posts at the bottom to entice your visitor to view other posts on your site as well. So, for example, let’s say you are posting about a new WordPress plugin. You might want to display some other posts you wrote about WordPress plugins, or you might want to display a post about content management systems, or maybe one about why WordPress is so popular.

Are There Easy Ways to Display Related Posts?

You want an easy way to do this? There are some nice plugins to display Related Posts, here are two:

• Yet Another Related Posts Plugin (YARPP)
• Efficient Related Posts (thanks to Barry Wells for the recommendation)

If you have self-hosted WordPress, you can install a plugin easily on your blog. And you don’t really have to read the rest of this post. But if you install a related posts plugin and you don’t like the way it appears or which posts it chooses as related posts, maybe you want to keep reading this post.

If you like a coding way to display related posts, without a plugin, try one of these articles:

• Display Related Posts using PHP instead of a Plugin
• How to: Show related posts without a plugin

You will find, however, that those coded posts are based on tags. What if you want to display a post that doesn’t have the same tag? Or you want the 6th post in the second tag on your post to display?

• • •

What? You are still here? Oh, yes, now I am going to teach the slow and meticulous way to set up related posts, so you can tweak every little detail. And you can learn some CSS (Cascading Style Sheets – it’s the best way to make your website shine with design) in the process. Once you set this up for one post, you will find it quite easy to re-use the code with new links on another post.

Thinking Through Our Layout Needs for the Related Posts

To set up our related posts, we are going to need:

• Thumbnail images for each post – if you have these already, great. But if not, you will need to create some thumbnails. I am going to make mine 100px by 100px, but they don’t have to be that size.
• Links to the Posts – I find it handy to set up my code in a code editor separate from WordPress (I used Dreamweaver). For now, just paste into your code editor 3-4 links that you would like to appear in your related posts.

We want these thumbnail images to line up nicely on the bottom of a post, each with a little caption underneath. Both the thumbnails and the captions should be linked to the related post. One’s first reaction might be to put this in a table, but a nicer way to code that will help if you are also doing responsive design (you want this to appear on mobile neatly, too) would be to float each little area of the related links. (If you don’t know about floats, read about floats).

Set up the HTML and CSS

Here’s how the HTML should look for three links (add another related-area div for four links):

<hr />

<strong>Related Posts:</strong>

<div class="related-links clearfix"><!--start related links area-->



<div class="related-area"><div class="related-img"><a href="http://biz.leoraw.com/clear-float/"><img src="http://biz.leoraw.com/wp-content/uploads/2009/12/water_effect2-100x100.jpg" alt="unwanted wrap around text - needs to clear float" /></a></div><div class="related-tag"><a href="http://biz.leoraw.com/clear-float/">Unwanted Wrap</a></div></div>

    

<div class="related-area"><div class="related-img"><a href="http://biz.leoraw.com/css-spacing-woes-and-solutions/"><img src="http://biz.leoraw.com/wp-content/uploads/2010/10/spacing_woes-sq.jpg" alt="CSS spacing woes" /></a></div><div class="related-tag"><a href="http://biz.leoraw.com/css-spacing-woes-and-solutions/">CSS Spacing</a></div></div>



<div class="related-area"><div class="related-img"><a href="http://biz.leoraw.com/fancy-colored-boxes-with-css/"><img src="http://biz.leoraw.com/wp-content/uploads/2009/12/fancy-boxes-css.jpg" alt="Fancy Colored Boxes with CSS" /></a></div><div class="related-tag"><a href="http://biz.leoraw.com/fancy-colored-boxes-with-css/">Fancy Boxes</a></div></div>



</div><!--end related links area-->

<hr />

And here’s the CSS:

/*RELATED POSTS

========================================*/

.related-area {text-align: center;}

.related-links .related-area {float: left; width: 135px; margin-right: 30px; }

.related-img {padding: 15px; background-color:#eee; border: 1px solid #999999}

.related-img img {border: 1px solid #999999}



.clearfix:after {

   content: ".";

   visibility: hidden;

   display: block;

   height: 0;

   clear: both;

}

I would suggest doing all this in your code editor, check it offline, and then copy to your WordPress post. You should save the HTML code somewhere convenient so you can use it again for a later post, just add different related links.

You should copy the CSS to the bottom of your theme’s style.css. Be sure to put a comment on top of the CSS that says /*Related Posts*/ so you know what this section of your style.css does.

Hope some of you find this Related Posts with CSS useful! If it’s too much code for you, go to the top of this post and try the YARRP plugin.

Unwanted Wrap

CSS Spacing

Fancy Boxes