Keep Visitors On Your Site With Supercharged Post Navigation

Have you ever noticed the post navigation links (next and previous) displayed at the bottom of the post content in most themes and usually consisting of a post title?

If you haven’t, it’s hardly surprising. If you have, then you’re probably thinking that they are not exactly anything to get excited over. But we should get excited over them because they are major tool for keeping visitors on your site. If they are done properly. Like Medium, for example.

So, let’s supercharge your post navigation and start inducing those precious time-on-site-building clicks.

Screenshot of post navigation on Medium.com
Just slightly more effective than a hyperlinked post heading!

Most implementations of post navigation links are, frankly, pretty lame. Unless you are a headline-writing genius, a simple text link is not going to encourage anyone to click through.

But it need not be this way as the example above from Medium shows.

Adding post navigation like this isn’t difficult and fits nicely into our 15 minute goal for a Weekend Project, so you’ve got absolutely no excuse for not doing it!

Step 1 : Install the Supercharged Post Navigation Plugin

Here’s the plugin code in its entirety: you can also download it from its Gist.

Its basic function is to provide a template tag to replace any current calls your theme makes to display post navigation.

It works by getting the next post (it can get confusing because due to most posts being accessed in descending chronological order, the “next” post is actually the “previous” post) and then creating a Medium-style display including the title and the excerpt, with the post’s featured image as the background.

Far more eye-catching and far more click-inducing than the lowly text link.

Step 2 : Add the Supercharge Function to Your Theme

Many themes already include functions to output post navigation, so you’ll need to look for where these are. Most likely they’ll be in single.php and will look something like this (although some themes have their own functions):

{code}
<?php next_post_link(); ?>
{/code}

Remove these links and add a single call of the surpercharged_post_navigation function like this:

{code}
<?php supercharged_post_navigation(); ?>
{/code}

The function takes 5 parameters:

  1. $title_text, this is the text in heading. Leave empty to use the default ‘NEXT IN [CATEGORY NAME]’ (text is automatically uppercased when displayed)
  2. $image_size, the image that the function should use for the background, defaults to ‘post_thumbnail’ (featured image)
  3. $in_same_term, determines whether the next post should come from the current category, defaults to ‘true’ (if no post is found, then the function will redo the search using any category)
  4. $excluded_terms, a list of categories that should not be used when searching for the next post, defaults to ” (use category ids)
  5. $previous, search for the next oldest post, that is descending chronological order, defaults to true (if false will get the next youngest post)

It’s probably overdoing it to include links to both previous and next posts but if you do want to, then include two calls to the function, one with $previous=true and one with $previous=false:

{code}
<?php
supercharged_post_navigation($previous=true); // output the previous (next oldest) post
supercharged_post_navigation($previous=false); // output the next (next youngest) post
?>
{/code}

Here’s an example of how the post navigation can be improved. This is test site using the current WordPress default theme, TwentyFourteen.

Before:

Screenshot of the default 2014 post navigation
You need a really good title if that’s all you are relying on

After:

Screenshot of supercharfed post navigation with background image and excerpt.
Eye-catching picture and an excerpt transforms the navigation

That’s it! Just two simple steps to supercahrge your post navigation give your visitors every reason to click through and spend more time on your site.