2 Ways To Add Next & Previous Navigation Links To Single Custom Post Types

Single post navigation links are valuable because they link all your posts together. This increases page views and acts a bit like a sitemap which the search engines can follow.

Its pretty easy to add next and previous nav links at the end of all your single posts. But what about adding them to all posts using one specific post type?

As an example, you may have a portfolio where you want all single posts assigned to that specific portfolio post type linked together. And you may not want to link other post types to the posts assigned to this custom post type.

Simply copy the code below from the view raw link & paste it in your child themes functions.php file using a text editor.

Here’s 2 different code snippets which enable you to link all posts assigned to any custom post type.

add_action( 'genesis_entry_footer', 'wpsites_single_cpt_navigation' );
function wpsites_single_cpt_navigation() {
if ( is_singular( 'portfolio' ) ) {
    echo'<div class="alignleft">';
    previous_post_link();
    echo'</div>';
    echo'<div class="alignright">';
    next_post_link();
    echo'</div>';
} }

You can also code it like this which checks if your child theme is using XHTML or HTML 5 markup and hooks:

add_action( 'genesis_entry_footer', 'wpsites_single_cpt_navigation' );
function wpsites_single_cpt_navigation() {

	if ( ! is_singular( 'portfolio' ) )
		return;

	genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div class="navigation">',
		'context' => 'adjacent-entry-pagination',
	) );

	echo '<div class="pagination-previous alignleft">';
	previous_post_link();
	echo '</div>';

	echo '<div class="pagination-next alignright">';
	next_post_link();
	echo '</div>';

	echo '</div>';

}

Related Tutorials


Comments

29 responses to “2 Ways To Add Next & Previous Navigation Links To Single Custom Post Types”

  1. Hi Brad,
    is there a way to set next and previous links for CPT to order alphabetically instead of chronologically?

  2. Will Partridge Avatar
    Will Partridge

    The code for the pre-HTML 5 version didn’t work for me on the Minimum 2.x theme. I submitted it to Genesis support and a wonderfully helpful lady named Amelia debugged it for us. All you need to do is remove the “TRUE” argument in each of the two functions. I did this and it worked perfectly.

    1. Brad Dalton Avatar
      Brad Dalton

      Great. Thanks for the feedback Will.

      The last snippet on this page does include the 3rd parameter set to true and it works.

      I did remove it entirely from the 1st 2 snippets and now they work so much appreciated as i did have this post saved and have been trying to work it out for some time.

      I’ll update the Codex because that’s not mentioned for the in_same_term parameter.

      [code]
      in_same_term
      (boolean) (optional) Indicates whether previous post must be within the same taxonomy term as the current post. If set to ‘true’, only posts from the current taxonomy term will be displayed. If the post is in both the parent and subcategory, or more than one term, the previous post link will lead to the previous post in any of those terms.
      [/code]

  3. thanks so much for this!

    is it possible to have the title of the next post appear, instead of the word “next” or “previous”? if so, how would i go about that?

    1. Brad Dalton Avatar
      Brad Dalton

      Yes replace the text with %title for both previous and next post links

      1. i thought i was going to get this with some trial and error but i think i’m missing something with the placement of the %title. i tried replacing the words ‘next’ and ‘previous’, and i also replaced everything in the braces (amongst some other tries).

        what i’m getting is some garbled text instead of simply the title.

        what did you mean by ‘replace the text’?

        and thanks again for your suggestions.
        emily

        https://gist.github.com/cf174707748f0aa5f429.git

        1. Brad Dalton Avatar
          Brad Dalton

          Is this for a custom post type or single posts?

          Try this http://wpsites.net/web-design/different-ways-to-add-post-navigation-pagination-in-genesis/

          The parameters are different for different functions.

          The old functions use title whereas the new ones use %title

          1. oh gosh, it looks like neither of my links came over in that last post, sorry. i’m working with single posts within a custom post type.

            my placements of %title on that page:

          2. one more try on this gist (im unclear on how to make them look good like yours):

            https://gist.github.com/anonymous/7cf07aa620d800d09588#file-gistfile1-txt

  4. Hi Brad,
    Did you work out this code to include classes?
    What I’d like to do is have “Previous” float:left and “Next” float:right in my portfolio page, ideally using images. I’m using the Minimum Pro theme.
    Thanks for this tutorial.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Danica

      Post updated: Its simply a matter of wrapping each link in a class.

  5. Lang Elliott Avatar
    Lang Elliott

    I’m trying to use your code to apply previous/next to my “vignette” CPT, but it brings my site down:

    [code]
    /* ADD PREVIOUS/NEXT SINGLE POST NAVIGATION TO CUSTOM POST TYPE 
    * @author Brad Dalton
    * @learn more http://wp.me/p1lTu0-9YH
    */
    function wpsites_npp_navigation_links() {
    if( ‘vignette’ == get_post_type() && is_single() ) {?>

    |
    <?php
    } }
    add_action('genesis_entry_footer', 'wpsites_npp_navigation_links', 5 );
    [/code]

    Do you see anything obviously wrong?

    Lang

    1. Lang Elliott Avatar
      Lang Elliott

      Oh my; I see that the middle section of the code (the part with all the “php”s) was mostly removed from my message. Is there an easy way to avoid that from happening?

      1. Brad Dalton Avatar
        Brad Dalton

        You can paste the code into a Gist and embed it or wrap the code in code shortcodes.

        1. Lang Elliott Avatar
          Lang Elliott

          I’m trying to use your code to add previous/next links to my “vignette” CPT. But it brings my site down. See anything wrong?

          [code]

          /* ADD PREVIOUS/NEXT SINGLE POST NAVIGATION TO CUSTOM POST TYPE 
          * @author Brad Dalton
          * @learn more http://wp.me/p1lTu0-9YH
          —————————————-*/
           
          function wpsites_npp_navigation_links() {
          if( ‘vignette’ == get_post_type() && is_single() ) {?>

          |
          <?php
          } }
          add_action('genesis_entry_footer', 'wpsites_npp_navigation_links', 5 );

          [/code]

        2. Lang Elliott Avatar
          Lang Elliott

          Got it to work! There was something wrong with my label at the beginning, where you are mentioned. The following works just fine; all that’s left is styling the links to my liking:

          1. Lang Elliott Avatar
            Lang Elliott

            I see that the code still isn’t displayed properly. Oh well, I got it work! And thanks muchly for the code!

          2. Brad Dalton Avatar
            Brad Dalton

            Hello Lang

            The code doesn’t include a class so therefore cannot be styled.

            Its something i need to update or find another solution which includes a class. Now Updated.

        3. Lang Elliott Avatar
          Lang Elliott

          Brad:

          I just created a github account and this is my first try at posting a gist.

          The first instance of code shows how I got very nice previous-next buttons at the end of my blog posts, which actually uses the names of previous and next posts as the links. The second piece of code is what I’ve just used to enable previous-next links for my “vignette” cot. However, these links only say “previous” and “next” … they are not the actual post names. Is there an easy way to get previous-ext for my “vignette” cpt to display just like in my blog posts, with the names of the previous and next posts displayed as links?

          1. Brad Dalton Avatar
            Brad Dalton

            Here’s an example of a Gist

            You would need to modify the code which is something i need to work out so it uses the same classes for styling as the theme.

          2. Lang Elliott Avatar
            Lang Elliott

            Brad:

            I’ve added your code to my vignette CPT and it works great, but the links appear just below my Jetpack Sharing buttons. Is there an easy way to have the previous-next links appear above the sharing buttons? See example here:

            http://miracleofnature.org/vignette/sample-vignette-wide-1014px

            Lang

          3. Brad Dalton Avatar
            Brad Dalton

            You can either:

            1. Change the hook position for either the sharing buttons or pagination.
            2. Add a 3rd parameter for priority positioning to either the sharing buttons function or the function for pagination

          4. Lang Elliott Avatar
            Lang Elliott

            Don’t you ever sleep? If you’re in Victoria, it’s now sunday morning at 5am.

            I actually tried prioritizing your code to “1”, but that didn’t move it up. So the Sharing buttons must somehow be holding on tight to the upper spot.

            Yes, I can move the sharing buttons down to before_entry_comments, but that puts the buttons below the authorbox, which is no good (the buttons need to be above the authorbox).

            Hmmm?

          5. Brad Dalton Avatar
            Brad Dalton

            Yes because they use a WordPress hook for the content so there’s no way to output above them unless you reposition the buttons with the next hook.

            I do need to write a better snippet for this as its not very flexible.

          6. Lang Elliott Avatar
            Lang Elliott

            OK, so I’ll move the authorbox down to “genesis_entry_footer” and give it a low number priority. Then I’ll try moving the share buttons down to the same hook, giving them a higher number priority.

            Will try this later this afternoon.

  6. Zach Russell Avatar
    Zach Russell

    Wow! I wish I found this a month ago when I was building a site that needed this. I spent too many hours between figuring this and adding a custom sidebar on CPTs that displayed custom fields; I ended up just using get_template_part().

    1. Brad Dalton Avatar
      Brad Dalton

      Yeah me too Zach.

      Really needed this last year for a series of posts but couldn’t find it.

      You are welcome to republish this code as long as you link back to my site!! haha

      P.S. Like your post on Conditional tags.

  7. AnitaC Avatar

    Where’s the “LOVE” button on this! I have seen a lot of people asking for this, most recently on the SP forum. I will make sure I share this one. Thanks Brad!

    1. Brad Dalton Avatar
      Brad Dalton

      Yeah its a really cute little solution. Hope its popular.

      Took me a while to work this out because the conditional tag isn’t really one after all.

      Wanted to add this myself for a long time so i know it will be useful on the forums.

      Anytime Anita.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.