A Clever Way to Keep Unsatisfied Visitors from Leaving Your WordPress Site

A Clever Way to Keep Unsatisfied Visitors from Leaving Your WordPress Site

Recently I came across a site called Contextly. They are essentially a turbo-charged service for related posts. They’re also pretty expensive.

One of the more interesting features they have is the ability to put list of related content in a miniature sidebar stuck directly into the post itself.

Of course most people don’t just land on a blog post and start reading. Most will start scanning first.

If enough of the post catches their interest, then they’ll start reading.

But what if the post doesn’t catch their interest? Many will just hit the back button.

featured-jagger-3

And so these in-post related links are perfect for these visitors. If you place them about halfway down your post, they will catch the eye of antsy visitors and encourage them to try out something else instead of simply backing away.

Contextly isn’t the inventor of this little trick, of course, but it did get me to thinking of a good way to do that in WordPress. And for free.

We’ll go over how below.

In-Post Sidebars – What We’re After

What we’re after essentially looks something like the following, i.e. a menu of related posts right in the middle of the post itself.

in-post-sidebar

Using the Display Posts Shortcode

In order to pull the related posts in, we’re going to be using a plugin called Display Posts Shortcode. This plugin lets you display links to other posts with a shortcode.

It’s quite powerful once you begin looking into what it can do.

I’m using the Display Posts Shortcode because it offers a lot of control. Getting this control might take a little bit of manual work, however. For example, I outlined in another post how you can use this plugin to put tags onto posts you’d like to show up as related posts, and then pull them into your post.

You could probably use other plugins that would do something similar, and another plugin may even fit your style better. As long as it’s a shortcode plugin that pulls in post, the same basic idea outlined here should work.


Step by Step Instructions

OK, so after installing and activating the Display Post plugin, and then tagging the posts that I wanted to appear, I called those posts into my current post with a shortcode.

In this case it looked like this:

[display-posts tag="lemonchicken" image_size="thumbnail"]

There are a list of common shortcodes here. You can also find other info at that link about CSS, etc.

While that will pull in linked titles and thumbnails, as I want, it will not wrap the text around the whole menu as you see it above.

In order to do that, I need to just wrap the shortcode (and the title I created for it, “More Lemon Chicken Posts”) in a quick div.

<div id="lefttags">
<strong>More Lemon Chicken Posts</strong>
[display-posts tag="lemonchicken" image_size="thumbnail"]
</div>

I gave my div an ID called “lefttags” and then went to my CSS file and floated the whole container to the left (and gave it some space out to the right):

#lefttags {
float: left;
padding: 0 10px 0 0;
}

I then styled the actual links by taking some CSS code found on the plugin’s wiki page, and adding a bit of my own to clean it up a little. I also resized my thumbnails to be 50px by 50px.

.display-posts-listing .listing-item {
   clear: both;
   list-style:none;
   margin: 5px 0 0 0;
}
.display-posts-listing img {
   float: left;
   margin: 0 10px 10px 0;
   height: 50px;
   width: 50px;
}

 

Here’s the screenshot one more time.

in-post-sidebar

 

And that was it. Of course if you have some CSS skills, you can style things up even more.

Even though it takes a little manual work (you’ll have to put in a shortcode and wrap it in your div each time), it might be a good alternative to an expensive service.

Photo: the rolling stones