Adding Next & Previous Post Nav Links In Genesis

I’ve already shown you how to add next and previous post links in themes which include a single.php file.

Update: You’ll find more solutions with this more recent post titled Different Ways To Add Post Navigation (Pagination) In Genesis

Genesis child themes don’t include single.php files which you can use for this purpose so you need to write a custom function.

You’ll also need to hook it into the location you want to display the post navigation links.

To do this we’ll use one of the Genesis action hooks. Can’t use the Genesis Simple Hooks plugin for this because the links would then display on the archives pages which isn’t a good look. Unless you add a conditional tag to display the links on single posts only.

add_action( 'genesis_entry_content', 'custom_single_post_nav', 12 );
function custom_single_post_nav() {

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

	echo '<div class="pagination-previous alignleft">';
	previous_post_link('%link', 'Previous Post', FALSE);
	echo '</div>';

	echo '<div class="pagination-next alignright">';
	next_post_link('%link', 'Next Post', FALSE);
	echo '</div>';

}

Linking Specific Custom Post Type

What if you use a custom post type for a portfolio or something like that? How do you add links only for the posts assigned to that type? Here’s a tutorial about how to add next and previous links only for posts assigned to one specific custom post type.

Related Tutorials


Comments

22 responses to “Adding Next & Previous Post Nav Links In Genesis”

  1. Ahh. Nvm, I’ve figured it out. Your website is a life saver bud.

  2. Hey Brad! Quick Question! In the code, you say that if we want to add post titles, we need to change the “no” to “yes” . I can’t find where that No is located in the hook! Any suggestions?

    1. Brad Dalton Avatar
      Brad Dalton

      In Genesis, you only need to use one line of PHP code to do that which i provided a link to above.

  3. Chess Edwards Avatar
    Chess Edwards

    Using the code below worked perfectly! thanks!!

    How do I call out the font being used so that I can style it?

    1. Brad Dalton Avatar
      Brad Dalton

      The above code includes different class for each link however you can wrap both in a div or use this tutorial

      [code]
      .nav-previous,
      .nav-next {
      font-family: Georgia;
      font-size: 24px;
      }
      [/code]

  4. angela Avatar

    Where exactly do I paste this? Genesis is a bit of mystery to me.

    1. Brad Dalton Avatar
      Brad Dalton

      Use this code instead which you can add to the end of your child themes functions.php file.

      [code]
      add_action( ‘genesis_entry_content’, ‘genesis_prev_next_post_nav’, 12 );
      [/code]

      Works on HTML 5 themes only.

  5. Hi

    Great post, and the category code is excellent.

    Please can you suggest how to add the post title display to the category links.

    Also, what’s the best way to make the post title link an html link to the post it represents or is this automatic if you display post title

    thanks

  6. MarieDenee Avatar
    MarieDenee

    What would the call out be to style this? Right now I have them in, but the styling is a bit off… If you could point me in the right direction, it would be awesome.

    1. MarieDenee Avatar
      MarieDenee

      Just wanted to check on this one again… how can I make this float out evenly? or what would the call out be on this for me to style in CSS? right now it is jumbled to the left

      1. Brad Dalton Avatar
        Brad Dalton

        You would need to add a class the PHP code to style it with CSS. That code doesn’t include a class as i have written another post which does.

      2. Brad Dalton Avatar
        Brad Dalton

        Here’s the CSS code i use on my own site with different PHP code for linking posts within categories:
        [code]
        .previous-post-link {
        float: left;
        }

        .next-post-link {
        float: right;
        text-align: right;
        }
        [/code]

        This CSS won’t work with the PHP code you are using. You will need to use the same PHP code as i use:
        [code]
        // Add category post navigation (requires HTML5 theme support)
        add_action(‘genesis_entry_footer’, ‘wpsites_nav_links’, 25 );
        function wpsites_nav_links() {
        if( !is_single() )
        return;

        previous_post_link(‘%link‘, ‘<< Previous Post in Category’, TRUE);
        next_post_link(‘%link‘, ‘Next Post in Category >>’, TRUE);
        }
        [/code]

  7. In HTML5 the hook is ‘genesis_after_entry_content’ – took me a little too long to work that one out!

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks for sharing Sarah

  8. Mark Besh Avatar

    Brad,
    Can’t ‘pin’ these anymore—doesn’t have a “pinnable image.”

    1. Hi Mark

      I pinned this to Pinterest just now. Checked to make sure it has a featured image. Worked fine.

      1. Mark Besh Avatar

        Brain,
        Hmmm. Doesn’t ‘pin’ for me (the only image I see on this post is your pic, and evidently it not being picked up). What do you mean be making sure “it” has a “Featured image”?

        1. All posts include a featured image which are attached to any social sharing. If i didn’t have a featured image attached, Jetpack would pull the first image which was uploaded to the post. If no images uploaded then no image can be pinned. Sometimes the system might pull an image from the sidebar if there’s no other image to pull however i’ve found its working really well with Jetpack.

          Did you have any problem on other posts or only this one?

          1. Mark Besh Avatar

            Brad,
            This just started today (a few of them that didn’t have an image ‘in-line’ the content). Maybe you could always have an image in the ‘header’.

          2. Yeah i really need a logo or something. Working on a ripper Infographic at the moment as well. I’ll add an image to the sidebar now Mark. Thanks for letting me know about the problem.

  9. Hi, will this one checks whether there’s no next post (for the very first post) and previous post (for the very last article)

    1. I think so because if you look after the post content on the latest post there’s NO next post, only a previous. Did that answer your question Sach?

Leave a Reply

Join 5000+ Followers

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