Genesis Tip — Add Next-previous Links On Single Post Page

Have you ever wanted to add next and previous links on individual post page? If yes, then you are at the right place. Whenever a visitor opens up a post to read it further, the single post page displays the post along with the comments on that particular post. But, it does not display the next and previous links to other posts.

To engage the visitors and readers of your blog site, adding next and previous post links is a good idea. So to add next and previous links on your website place the following code in functions.php:

function custom_post_navigation()
{
?>
    <div class="prev_next">
        <div class="nav_left">
            <span class="prev">Previous Post</span> <?php previous_post_link('%link', '%title'); ?>
         </div class="nav_right">
        <div>
            <span class="next">Next Post</span> <?php next_post_link('%link', '%title'); ?>
        </div>
    </div>
<?php
}

add_action('genesis_after_comments', 'custom_post_navigation');

This would actually look weird without some style to it. To make it more readable and stylish you can use any of these 3 styling techniques and paste them in style.css. Also, feel free to add your own custom style if you want.

  • Style 1

    Here’s the code for this style:

    .prev_next
    {
        text-transform: capitalize;
        letter-spacing: 2px; 
        color: #666; 
        border-bottom: 1px solid #B6B157;
        border-top: 1px solid #B6B157;
        clear: both;
        margin:10px 0; padding:5px; 
    }
    .prev_next .next
    {
        text-align: right; 
    }
    .prev_next .nav_left 
    {
        float: left; 
    }
    .prev_next .nav_right
    {
        text-align: right; 
    }
    .prev_next a 
    {
        text-decoration: underline; 
    }
    .post_nav a 
    {
        text-transform: none; 
        letter-spacing: normal; 
    }
    
  • Style 2

    Go ahead if you like this box style:

    .prev_next 
    {
        text-transform: capitalize;
        letter-spacing: 2px;
        color: #666; 
        border-style: solid; 
        border-color: #ddd; 
        clear: both; 
        margin:10px 0; 
        padding:5px; 
    }
    .prev_next .next 
    {
        text-align: right; 
    }
    .prev_next .nav_left
    {
        float: left; 
    }
    .prev_next .nav_right
    {
        text-align: right; 
    }
    .prev_next a
    {    
        text-decoration: none; 
    }
    .prev_next a:hover 
    {
        text-decoration: underline; 
    }
    .post_nav a
    {
        text-transform: none; 
        letter-spacing: normal; 
    }
    
  • Style 3

    Here comes the next and previous links styled in two lines:

    .prev_next 
    {
        overflow: auto;
        margin: 10px 0;
        padding: 5px 0;
    }
    .prev_next span.next 
    {
        border-bottom: 1px solid #E6E6E6;
        display: block;
        margin-bottom: 5px;
    }
    .prev_next span.prev 
    {
        border-bottom: 1px solid #E6E6E6;
        display: block;
        margin-bottom: 5px;
    }
    .prev_next a 
    {
        text-decoration: none;
    }
    .prev_next a:hover 
    {
        text-decoration: underline;
    }
    .nav_left 
    {
        width: 50%;
        float: left;
    }
    .nav_right 
    {
        width: 50%;
        float: right;
        text-align: right;
    }

Choose whatever you like from the above 3 styles. Go ahead with modifying the style and see which one works for you.

Posted In:

UX & Frontend Design, Code Snippets, Genesis WordPress Theme Framework Child-Theme

8 Comments

  1. Thanks for the tip; I just added it to my site. Have a question though: how do you make the ‘Previous Post’ or ‘Next Post’ text not appear when there aren’t any, instead of having a blank space next to or under them?

    Thanks

    Reply
  2. Thanks for this bit of code. It does the trick! However, I wonder if you could tell me how to make it so the “Next Post” text is aligned to the right. If you’ll notice, it looks a bit crowded to the left right now:

    http://www.finkweb.org/dear-old-friend/

    Any suggestions? Thanks again.

    Reply
  3. Hi,
    Great tutorial. I am having the same problem as the other commenter, though. I can’t align the text to the right! Also, when there is only one line for the previous post, and two lines for the next post, the next post carries down under the previous post.
    http://www.simplyfrugalmom.com/2012/06/30/get-fit-health-awareness-giveaway-event/
    Thanks!

    Reply
  4. @Elaine and @RF
    The class for the right nab should not be in the but in the next div.
    So, replace the

    by

    Cheers

    Reply
  5. LOL, the HTML is removed.
    Ok, remove the class from the end div element en add it to the next div.

    Reply
  6. looking for this one, It will be much better if you have an option to add thumbnail to this feature..

    Reply
  7. Great helpful tip. I couldn’t find this on the StudioPress website. Good to have “serving suggestions” also!

    Reply

Comment on Genesis Tip — Add Next-previous Links On Single Post Page

Your email address will not be published. Required fields are marked *