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.