Add Single Post Nav Links For Categories

In this tutorial, i’ll provide the code you can use to link all single posts within a category together. This code displays next and ‘previous post in category’ navigation links after your post content.

You’ll be able to:

  • Link all posts in all categories together with next and previous post in category links
  • Add styling to your single post navigation links
  • Display Next & Previous nav links to all posts assigned to a specific custom post type

I’ll provide working examples of PHP code as well as some sample CSS code you can modify according to your own styling preferences.

Why Link Posts Within A Category?

You’d have to think linking all posts assigned to one specific category together provides links to more highly related content than simply linking to the next and previous post regardless of which category they’re assigned to.

Posts assigned to one specific category may contain related content whereas posts in another category may not contain any related content therefore decreasing the chance your reader would feel the need to click on the links.

Linking Posts In All Categories

This code will display previous and next post in category links after the content. This means all single posts will be linked only to the next and previous posts assigned to the same category.

add_action( 'genesis_entry_footer', 'category_post_nav', 5 );
function category_post_nav() {
    if( !is_single() ) 
        return;
 
    previous_post_link('<span class="single-post-nav previous-post-link">%link</span>', '&lt;&lt; Previous Post in Category', TRUE);
    next_post_link('<span class="single-post-nav next-post-link">%link</span>', 'Next Post in Category &gt;&gt;', TRUE);
}

Style Single Previous & Next Post Nav Links

You’ll then want to add some basic CSS code to your child themes style.css file to float the links to the left and right otherwise they will be displayed together on the left.

.previous-post-link {
float: left;
}

.next-post-link {
float: right;
text-align: right;
}

Here’s what it looks like with only the minimal CSS above added.

no styling added to links

You can then add some CSS code like this to your child themes style.css file:

.single-post-nav {
background-color: #F5F5F5;
border: 1px solid #6ec6ea;
color: #fff;
cursor: pointer;
font-family: 'Oswald', arial, serif;
font-size: 12px;
font-weight: normal;
padding: 10px;
text-decoration: none;
}

Here’s the result after adding the styling:

Links with styling added

Adding Buttons To Post Nav Links

You could easily create CSS to add buttons for each link using a free CSS 3 online generator.

Linking Posts In Custom Post Types

I’ve already provided several code snippets which you can use to link all posts assigned to a custom post type together.

function wpsites_custom_post_type_links() {
if( 'portfolio' == get_post_type() && is_single() ) {?>
<?php previous_post('&laquo; &laquo; %', 'Previous Slide Show', 'no'); ?>
 | <?php next_post('% &raquo; &raquo; ', 'Next Slide Show', 'no'); ?>
<?php
} }
add_action('genesis_entry_footer', 'wpsites_custom_post_type_links', 5 );
[/code]

The only problem with the above code is it doesn't generate a class to enable you to style your links.

So you may prefer to use this code instead and use the above CSS code for styling your links.

[code]
function wpsites_cpt_pagination_links() {
if( 'portfolio' == get_post_type() && is_single() ) {?>
<span class="nav-previous alignleft"><?php previous_post('&laquo; &laquo; %', 'Previous Slide Show', 'no'); ?></span>
<span class="nav-next alignright"><?php next_post('% &raquo; &raquo; ', 'Next Slide Show', 'no'); ?></span>
<?php
} }
add_action('genesis_entry_footer', 'wpsites_cpt_pagination_links', 25 );
[/code]

You could also use 
[code]
if( is_singular( 'portfolio' ) ) {?>

in replace of

if( 'portfolio' == get_post_type() && is_single() ) {?>

Note: Both next_post and previous_post functions are deprecated and have been replaced with next_post_link and previous_post_link however these will not work for single CPT’s.

Other Options

You can also install the WP Page Navi plugin and add pagination in your template files. This plugin also adds styling.

Add previous and next post nav links to all single posts not linked within a category.

Add single post nav links using code in your template files for themes which don’t include any built in links.

Do You Know The Answer To This Question

Can you still use the template tags previous_post() and next_post()?

deprecated template tags
Source: WordPress Codex


Comments

17 responses to “Add Single Post Nav Links For Categories”

  1. Thanks, got it working for a single category… How would I edit it so it would show up for two separate categories, where the categories stay independent of each other with different previous /next descriptive text for each category.

  2. James Maduk Avatar
    James Maduk

    Thanks, does exactly what I need it too… How would I edit it so it would show up for two separate categories, where the categories stay independent of each other with different previous /next descriptive text for each category.

  3. Hi, love this post! Thanks very much, it works perfectly!

    Is it possible to have the post navigation show up at the top of the post as well as in the post footer?

    I’m not sure how to change the code to have it show up in both places.

    Thanks,
    Helene

    1. Brad Dalton Avatar
      Brad Dalton

      [code]
      add_action( ‘genesis_entry_header’, ‘category_post_nav’, 15 );
      [/code]

      1. Thanks Brad. Do I put that instead of the “add_action” line above? Or in addition to it? Sorry, I don’t know php at all.

        1. Brad Dalton Avatar
          Brad Dalton

          In addition

      2. Wow! Thanks for that super quick response, Brad. Could you please help me with where to add this code? I don’t know php at all, and although I can follow instructions well, I can’t work out where to put it. I tried to place it under the original code you’ve given above, but it “broke” the theme.

        Appreciate your help.
        Helene

        1. Brad Dalton Avatar
          Brad Dalton

          Hello Helene

          Did you give me a link or make a donation?

          1. Helene Goldberg Avatar
            Helene Goldberg

            No Brad, not yet. I intend to as soon as the website is done, which is pretty close to being ready for my husband to start redoing/adding content.

  4. I tried implementing this and was able to get the “previous post” links and styling to work, but the “next post” never appeared. I copied the code to my functions.php file exactly as you indicated above, as well as the CSS to my style.css file. Have you encountered that before, where only the “previous” shows up? How might I troubleshoot the reasons why it’s not appearing? Thanks.

    1. Brad Dalton Avatar
      Brad Dalton

      Yes, but not with that code.

      Let me add it to your theme locally and test it for you.

    2. Brad Dalton Avatar
      Brad Dalton

      Just tested it on your theme and it works.

      The code comes from my site where i have removed all the post meta so maybe that’s a problem, which you can fix by removing the post meta links and changing the 3rd parameter in the code from 5 to 12.

      1. Thanks, Brad. That did the trick, but the styling isn’t coming through for some reason. It worked on the dev site but not the live site. I find that odd, since the CSS, functions etc. are identical in both instances and running on the same server.

        1. Brad Dalton Avatar
          Brad Dalton

          That’s what its like with CSS sometimes. Happens to me all the time.

          Could be server side or plugin caching.

          Clearly the coding works locally.

          1. Just wanted to close the loop on this with you. It ended up being a caching issue with CloudFlare. I had CloudFlare activated on the primary URL but not the dev site. Once I purged the CloudFlare cache, the code began displaying correctly immediately. Thanks again for your help.

          2. Brad Dalton Avatar
            Brad Dalton

            Thought it might be a caching issue.

            Thanks for sharing the solution Jonas.

Leave a Reply