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.

 

Join 37,807 others and get free tutorials & tips on design & development using Wordpress on Thesis & Genesis!

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

  1. says

    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

  2. RF says

    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.

  3. Rian says

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

    by

    Cheers

  4. Rian says

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

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

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>