I found myself working on a site that was meant to be viewed in the manner of a book, where each post was like a page and each category was like a chapter. At the end of each post there were links to Previous/Next posts, along with a link that directed the user back to the main category page. The static code looked like this:
<ol class="slats">
<li class="group pagination-row">
<h3 class="pagination">
<a class="button"
href=""
title=""
>← Previous Article</a>
</h3>
<h3 class="pagination">
<a class="button"
href=""
title=""
>All Articles</a>
</h3>
<h3 class="pagination">
<a class="button"
href=""
title=""
>Next Article →</a>
</h3>
</li>
...
(Yes, the above code uses SimpleBits’ Pears. I love Pears!)
One issue I ran into was that I only wanted to link to posts within the same category, or pages within the same chapter. There was another issue: I wanted to style the links to look like buttons, as opposed to displaying plain text hyperlinks, which meant I needed more flexibility than I found the more straight forward tag offered. (In WordPress there are a ton of different ways to link to things!) The next_post_link(); tag would display stylized text if a next post existed, otherwise it would display nothing. But I didn’t want to have a text-less button if there was no adjacent post, I wanted no button at all. So I opted to use the get_previous_post();/get_next_post(); tags along with conditional if statements.
The code I ended up with looked like this:
<ol class="slats">
<li class="group pagination-row">
<?php
$prev_post = get_previous_post(true,'');
$next_post = get_next_post(true,'');
?>
<?php if (!empty( $prev_post )): ?>
<h3 class="pagination">
<a class="button"
href="<?php echo get_permalink( $prev_post->ID ); ?>"
title="<?php echo $prev_post->post_title; ?>"
>← Previous Article
</a>
</h3>
<?php endif; ?>
<?php
$the_cat = get_the_category();
$category_name = $the_cat[0]->cat_name;
$category_link = get_category_link( $the_cat[0]->cat_ID );
?>
<h3 class="pagination">
<a class="button"
href="<?php echo $category_link; ?>"
title="<?php echo $category_name; ?>"
>All Articles
</a>
</h3>
<?php if (!empty( $next_post )): ?>
<h3 class="pagination">
<a class="button"
href="<?php echo get_permalink( $next_post->ID ); ?>"
title="<?php echo $next_post->post_title; ?>"
>Next Article →
</a>
</h3>
<?php endif; ?>
</li>
...
Let’s step through this code line by line and take a look at how each of the issues noted above were overcome.
First, I set some variables to store the information of posts found before and after the post the user was currently viewing with the following fragment (inside the loop, of course):
<?php
$prev_post = get_previous_post(true,'');
$next_post = get_next_post(true,'');
?>
The variables were set as $prev_post and $next_post. And within each tag I set some arguments—the true value sets the $in_same_cat parameter to true, meaning only posts within the same category are retrieved. This sets the boundaries of the chapter. The empty second parameter means that I did not want to exclude any categories (since, in this case, I was only ever dealing with one category at a time).
With the adjacent posts retrieved we can begin to create the buttons. But I only wanted the buttons to appear if there was a post to link to. In example, the first post in a category/chapter shouldn’t link to a previous post and therefore the previous post button shouldn’t appear. By wrapping the previous post button in the following logical statement we can effectively hide the previous post button if there is no previous post.
<?php if (!empty( $prev_post )): ?> ... <?php endif; ?>
Continuing to build out the button, we extract the post’s ID and title from our variable and echo this data for our href and title attributes.
<a class="button"
href="<?php echo get_permalink( $prev_post->ID ); ?>"
title="<?php echo $prev_post->post_title; ?>"
>← Previous Article
</a>
Next, I did the same thing with the next post button.
<?php if (!empty( $next_post )): ?>
<h3 class="pagination">
<a class="button"
href="<?php echo get_permalink( $next_post->ID ); ?>"
title="<?php echo $next_post->post_title; ?>"
>Next Article →
</a>
</h3>
<?php endif; ?>
The last button to create was the button that brought the user back to the main category page of whichever category the post they were currently viewing was found in.
To do this, I retrieved the category ($the_cat), the category name ($category_name) and the URL of the category page ($category_link), and echoed it out in the appropriate attributes of the anchor tag, similar to what was done with the other buttons.
<?php
$the_cat = get_the_category();
$category_name = $the_cat[0]->cat_name;
$category_link = get_category_link( $the_cat[0]->cat_ID );
?>
<h3 class="pagination">
<a class="button"
href="<?php echo $category_link; ?>"
title="<?php echo $category_name; ?>"
>All Articles
</a>
</h3>
With that my “smart” Previous/Next post links were set.
To make them even smarter I could add logic to say “if there is no next post in this category display a next category/chapter button,” but that’s a job for another day.
Unfortunately, this job was a bit rushed. I’m sure, given a little more time, even the code that did make it to production could be made a bit more efficient.
Regardless, I think this is a good example of how to expand on the basic usage of the previous_post_link();/next_post_link(); tag.
Leave a Reply