Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Add custom Previous / Next links on blog posts to promote reader engagement

add-custom-previous-next-post-navigation

Add Previous / Next links on blog posts to increase reader engagement with your blog

We write content on our blog because we want people to read it. Plain and simple.

And most of the time the topics of our blog posts are going to centre around one main specific idea or industry. That being said, it’s a given that if a reader to our blog finds one of our posts useful, they’re going to find many other posts on our blog useful, also.

The problem we have as content generators is connecting the reader from the current post their reading onto the next one. A great way to do this is to add Previous / Next links on blog posts to keep the reader on our website and digesting our content.

In this tutorial we’ll show you a ridiculously easy way to add previous / next links onto your blog posts, just like below, where there are arrows on the left and right, and hovering on the arrow shows the title and photo of the previous / next posts.

This technique also works on responsive devices like your phone and tablet!

Why we’re writing this tutorial

We got the idea to write this tutorial while we were browsing the great Blog themes over on Theme Junkie (we have the Lifetime license with them so we use their themes when appropriate – they have some incredible blog and ecommerce specific themes that would just take way to long to code or design ourselves). We used the technique you’ll learn in this tutorial in our FemiBlogger Child Theme and have taken it one step further in this tutorial by floating the navigation links on the side on larger devices, but then placing them inline on small devices.

This technique may also improve your SEO ranking

Well-known factors that affects your SEO are your bounce rate and reader engagement. If someone goes to your website from searching in Google and immediately clicks out, it is assumed that the person did not find what they were looking for on your website. If the majority of your traffic is leaving your website straight away, search engines will deem your content NOT VALUABLE and start to rank you lower as you’re not seen to be providing people with content they’re after.

By adding previous / next links to your site, you may keep your readers clicking and on your site longer. This ultimately shows Google that people like your website and that you should (in theory) be ranked higher. There’s obviously a lot more to SEO but reader engagement is a known thing that affects your SEO ranking, so optimizing reader engagement is a must for any serious blogger.

Below we’ll show you how to add previous / next links to your single post pages in TWO easy steps.

Step 1: Add the necessary PHP code into functions.php

In your code editor (or FTP client) navigate to /wp-content/yourtheme/ and add the below code into your functions.php file.

Things to note about the above function are:

  1. The above function will work AS IS with the Beaver Builder theme. If you’re using a different theme you MUST change fl_post_bottom_meta_open to an appropriate hook in your theme, otherwise this will not work, as the fl_post_bottom_meta_open hook is only available in the Beaver Builder theme.
  2. You can change the image size by replacing medium in the function above with the image size you wish to use.

Step 2: Add the necessary CSS code

We recommend adding the below into your style.css file within your theme, but you can add the CSS wherever you wish.

Things to note about the above CSS are:

  1. This will work AS IS with the Beaver Builder theme but you may need to tweak the CSS to work with other themes, depending on how they are coded.
  2. The CSS within the @media only screen and (min-width: 992px) media query targets the layout of these previous / next links on larger devices, whereas the first bit of CSS in the file above handles the mobile / small and medium device layout.

The responsive version of these previous / next links will layout automatically like the below – how cool is that!

add-custom-previous-next-result

add-custom-previous-next-result-mobile

Share with us examples of where you add the Previous / Next links on blog posts

Comment below and showcase how you’ve used this technique on your blog!