Home | Experience Design

Drawing attention with related posts

Alex Christie

14 December 2009

Why are we talking about related posts?

To try and improve the effectiveness of the Tamar blog, it was thought important to draw more attention to the related posts to reduce bounce rate.

The best option seemed to be to take the related posts from being just a list and make it larger and more visual. Sometimes a title of a post just isn’t enough to describe what the post is about so the addition of an excerpt similar to the homepage of the blog was included.

To reduce the page scrolling needed in order to view the new larger, more visual related posts, the section was columnised and a thumbnail of an image in the related post was added to the top.
Finding the plugin

After searching for a while and finding a few good, yet unsuitable plugins, I stumbled across ‘Best Related Posts’. Its modesty aside, it is very simple and effective, giving complete control over how the code is output. The downside is that the default setup meant that the plugin used nested tables(!).

Now I’m not sure how old this plugin is but it works with WordPress 2.8 so it was quite surprising to see nested tables used. The deisgn worked but because of the use of nested tables it was best to change the output to suport CSS.

I thought I would impart my wisdom and show where to get the plugin and how I converted it to CSS. Very simple and offers limitless customisation (with related posts).

How to create great related posts

  • Click the link to download Best Related Posts for WordPress.
  • To install it simply extract it and upload the folder to the plugins folder of WordPress - /wp-content/plugins/
  • Then go to the plugins tab of the WordPress admin section and activate it.
  • In the settings tab, click ‘Best Related Posts’ and it brings up the settings for the plugin.
  • So, lets delete the table rubbish and add some HTML. I kept it simple but there are many more things you can do. Click the image to see a screenshot or copy and paste the code below it into the relevant sections.

Customising 'Best Related Posts'

Heading:

<h3>If you liked this post, you should also like these:</h3><div id="related-posts">

Body:

<div class="related-item">
<a href="{link}"><img  src="{image}" width="110" title="{title}" alt="{title}" /></a>
<h4><a href="{link}">{title}</a></h4>
<p>{excerpt}</p>
</div>

Footer:

<div class="clearfix"></div>
</div>

Explaining the HTML

In the ‘header’ section I have an H3 tag with the title letting people know what will follow. A more natural phrasing was used to connect more with the user rather than just saying ‘Related Posts’.

After the H3 tag there is a div tag that creates the element in which we will work. I have given it the ID related-posts which is very original – I think you’ll agree.

The ‘body’ section will be repeated depending on how many posts you choose to show, so you can only use classes. I have created a new div element and given it a class of ‘related-item’. We will reference these in the CSS in a moment.

Next there is a link element that has not changed from the default – this gets the permalink of the related post and creates a link, then it puts an image inside it.

Only the width is specified for the image as we want to scale it proportionally. If the height were specified as well then the image would become distorted.

I have also added the title and alt tags for accessibility and web standards compliance. These will just contain the title of the post it is linking to.

The plugin allows the use of {link}, {image}, {title} and {excerpt}. You can move these around to your hearts content for customisation. They are pretty self explanitory.

In the footer I’ve added a clearing div (explained in the CSS below) and also closed the div tag opened in the header.

Now for the CSS

This is where the magic happens.

#related-posts {
margin:10px 0 0 0;
}

.related-item h4 {
font-size:12px;
}

.related-item {
width:20%;
float:left;
margin-left:auto;
margin-right:auto;
}

.related-item p, .related-item h4 {
width:110px;
}

h4 {
padding: 0;
margin: 10px 0 5px 0;
}

.related-item img {
border:1px solid #CCC;
}

.clearfix {
clear:both;
}

I have given the whole ‘related-posts’ div element a top margin to push it down a bit from the content above.

I wanted the header element to be the same size as the text so have given it a size of 12px.

The related-item div element has a width of 20% and auto margin-right and margin-left to ensure they space themselves equally. The 20% is based on 100% of the available width divided by the number of related items you specify in the setting. I chose 5 so 100/5=20.

The paragraph and h4 tags need to have a width set otherwise the content will over run the images. So set this to the same width the image has in the body output section in the settings for the plugin.

There needs to be some more space between the image and the h4 tag, so I added the styling for the h4 element. This will be site-wide unless you add ‘.related-item’ before it if it conflicts with other styling.

Finally, to extend the parent div (related-posts) to the bottom of the longest div inside it (related-item) you need to add a clearing div. This is an empty div that clears both sides and ‘fixes’ the parent div.

Position the related posts

To add this plugin to your theme you just need to find the ‘single.php’ file which can be done thorugh the built in editor. In the Appearance tab, click editor and look on the right hand side for ‘single.php’ and click that. Within the template look for <?php the_content();?> (yours may be slightly different) and add the follwing after it:

<?php if ( function_exists( 'boposts_show' ) ) {
boposts_show();
} ?>

This basically says, if the plugin is turned on then do what it does, which is print the HTML we added in the plugin settings, to the page.

Now sit back and relax, you’re done. You can continue to play around with the stlying and there are many great examples of related post designs dotted around. Have a Google.

As there are not enough images in the Tamar blog posts, we have to go through and add them before we show the image containers above the related post titles. It still looks better and means we now have the choice to add images later very simply.

To do this simply add a line of CSS to hide the image div element:

#related-posts .related-item img {
display:none;
}

This is the old related posts section:

Old related posts

You can see the new related posts below this post. Tell me, which entices you more?

LEAVE A COMMENT

HOME | WHAT WE DO | CULTURE | THINKING | BLOG | REQUEST A CASEBOOK

IGNITING DIGITAL BRANDS | SEO | SOCIAL MEDIA | JOBS | TALK TO US

CELEBRATING 19 YEARS IN DIGTAL
© TAMAR 2014