Enabling Next/Previous Post Links in WordPress

0

 

Blog Tutorial header image

Hello! One of the major points of this blog will be to share some of the things I’m learning as I go through the process of creating and improving it. I just recently added a new feature — the ability for posts to have “Next Post” and “Previous Post” navigation links at the bottom — and I figured that it might be helpful to someone out there if I explained how it’s done. Plus, someone might even have a better way that they could share ;-)

Purpose and Example

The basic idea behind the feature is to give readers an easy way to navigate back and forward between individual posts. (And note that I’m using a self-hosted WordPress setup as the system for this blog, so everything is specific to that. If you’re not using WordPress, this won’t apply, sorry!) With the theme I’m using, there aren’t any “Next/Previous” links in a post, so for the reader to navigate, they’d need to go back up to the main blog list and select the next post they’d like to view. If they just want to navigate chronologically between posts, then this creates extra steps.

Screenshot of Next Post & Previous Post Navigation Links

Screenshot of Next Post & Previous Post Navigation Links

Having these “Next/Previous” links is something that’s pretty common in blogs I’ve seen, and I think most themes add them automatically, but unfortunately, the theme I’m using doesn’t. (And if you’re building a theme from scratch, then this ought to help.) I had also done a cursory search for a WordPress plug-in that would automatically do it, but one that I found had a display that I didn’t really like. I started to look through its code, but figuring out how they handled the display seemed like it’d be more difficult than just implementing my own solution. Plus, it’d be more fun to roll up my sleeves and implement it myself. :-)

Generating the Links

Fortunately, doing it is pretty easy. The key is to make use of the following two WordPress functions:

  • next_post_link()
  • previous_post_link()

The default behavior for these is actually pretty good and might work just fine for you. It’d cause the display to be like “« Title of Previous Post” and “Title of Next Post »”.

But I didn’t actually want the post titles to appear. Instead, I wanted the text to be “Next Post” and “Previous Post”. So I had to take advantage of some of the arguments that these functions support. There are several that can be passed into them in order to customize the behavior, but I only had to concern myself with the first two, which define the format and the label. To set the format, the first argument is '%link'. Then, whatever text is defined in the second argument would be the text of the link. To get what I wanted, I used '« Next Post' and 'Previous Post »'.

The '«' and '»' are the html codes to create the ‘«’ and ‘»’ symbols.

I also wanted to separate the two links with a ‘|’ character, so I had a line of code in between the two that would cause it to be printed (using PHP’s echo command.)

Here’s the PHP code sample below:

//include next/prev post navigation
next_post_link('%link', '« Next Post');
echo ' | ';
previous_post_link('%link', 'Previous Post »');

This code went within my “single.php” file, in the location where I wanted it to appear on the page (finding that spot will be dependent upon whatever theme you’re using.) I also put it within an existing PHP code block. If your file isn’t set up to already have a PHP code block in the section where you want the navigation to appear, wrap the code block with the PHP code tags: <?php and ?>, like so:

<?php
     //include next/prev post navigation
     next_post_link('%link', '&laquo; Next Post');
     echo ' | ';
     previous_post_link('%link', 'Previous Post &raquo;');
?>

Making the Divider Conditional

That’s nice and all, but it left me with a problem: for the very most recent post and the very last post, there’d be an unnecessary ‘|’ character within the navigation, since there would only be a “Next Post” or a “Previous Post” instead of having both. You’d end up with something like:

« Next Post |”.

So I had to put in logic around the display of the ‘|’ character to only show up if there was both a previous post and a next post.  My first attempt was to just continue to make use of the next_post_link() and previous_post_link() functions, but within an if statement. I figured that if one of them evaluated to false, then I could have the echo command not be carried out. Unfortunately, simply running these functions, even within the if statement, will cause them to carry out the text display for the link. (That actually makes sense, but I’m pretty new to WordPress and my PHP is really rusty, so I’m still doing a lot of trial and error.)

So I did some searching to find a way to determine if the next post and previous posts exist and came across the following method (see reference #1 below) which gets the post’s title, determines the length, and tests if it’s greater than zero.

if (strlen(get_previous_post()->post_title) > 0)
There’s probably a simpler way, but I decided to just go with whatever first solution seemed like it would work. Perhaps at some other point I can try to be more elegant, but I just wanted to have it working ASAP.

Since I needed to know if both the previous post and next posts existed, I modified it to be the following:

if( (strlen(get_previous_post()->post_title) > 0) &&
    (strlen(get_next_post()->post_title) > 0) )

Then, after the if statement, I’d put in the echo command to display the ‘|’ character. This way, the line would only be executed if both the previous and next posts existed. The full code is below:

//include next/prev post navigation
next_post_link('%link', '&laquo; Next Post');
if( (strlen(get_previous_post()->post_title) > 0) &&
    (strlen(get_next_post()->post_title) > 0) )
         echo ' | ';
previous_post_link('%link', 'Previous Post &raquo;');

Well, there you go. My next steps will be to add some customized styling to make the links more like buttons and be more obvious (at which point I’ll be able to get rid of the ‘|’ character to separate the links, so at least that part will be simpler ;-).

I hope that if you’ve run into a similar issue with a theme that doesn’t already have “Next/Previous Post” navigation for your WordPress blog, that this article has been able to help you!

References

  1. Checking if Next Post Exists in WordPress:
    http://www.webdevdoor.com/wordpress/checking-next-post-exists/
  2. WordPress Function Reference for previous_post_link():
    http://codex.wordpress.org/Function_Reference/previous_post_link
  3. WordPress Function Reference for next_post_link():
    http://codex.wordpress.org/Function_Reference/next_post_link

 

|

Leave a comment


Name*

Email(will not be published)*

Website

Your comment*

Submit Comment

© Copyright 2014-2018 - Brian J. Matis Photography - Theme by Pexeto