Related Posts – CSS Method

Related Posts - How to Set Up Using CSS

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:

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:

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

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):



Related Posts:

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.


Related Posts:


Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

8 thoughts on “Related Posts – CSS Method

  1. Hi Leora,

    Another great post. I did use YARPP and had it set up with my tags which worked ok (ish) but I wasn’t always happy with the links it selected so switched over to Efficient Related Posts, which is a lot better.

    I do like the images beneath your post and think it is much more eye catching. The only trouble, with me, is that I have loads of posts and by having to do it manually for all of them would eat up my time…. Unless of course I just started with those from now on…..

    I think I’ll leave it for now, but do think this is an excellent post 🙂

    Thanks Leora, catch up soon

    Barry
    Barry Wells recently posted…What Would You Like To Achieve This Year?My Profile

    1. Funny that you say if you did it all manually, how much time it would take – I only do it sometimes.

      But if you have the plugin + manual, that would look funny.

      Efficient Related Posts – I will have to take a look at that plugin. Most people don’t have the patience do this much manual work, so a plugin recommendation is in order.

  2. I use the efficient related post plug-in my self Leora. I just let them pull the ones they think are related and I don’t worry myself with all that coding. Although I’ve done a little here and there to change things around on my blog per someone’s careful step-by-step instructions. That’s not my area of expertise for sure.

    I know the images for the related posts are suggested, I personally don’t care of them. I find them too distracting myself but that’s just me.

    Thanks for sharing this information, I’m sure others will find it very useful.

    ~Adrienne

    1. I figured most people who are doing their blog themselves will just want the plugin.

      But sometimes, especially if one’s content is visual in nature, the added specially tweaked thumbnail can help.

    1. Hi, Frank. I haven’t looked at this post in a long time – maybe I never used the related-tag for anything, but I named it just in case I wanted to use it later? Sometimes one names an area of HTML but then doesn’t make use of it.

  3. This is just the code I have been looking for, the plugins don’t work for me since I have to add both random pages and post. From what I have seen, the plugins just drags in post that are in the sale category>>> I don’t like that, so this is my best approach. I am happy to also learn that it displays well on mobile – http://allnigerianfoods.com/african-salad

    1. Yes, I can understand how manual code in some cases can work better than the plugins. If I had the time, I would write a plugin that can be tweaked a lot, so you wouldn’t have to do the manual code each time. Glad you found this useful, David. Your salads look good.

Please leave a comment.

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

CommentLuv badge