If you are using Bootstrap as a base on your theme designs, using existing CSS classes will speed up your development drastically. In this post, we are sharing a Gist that implements Bootstrap Pager links to WordPress’ previous and next links on single.php template.


You can include this file in your single.php file, or you can copy and paste it inside your template.

<?php
 // This template can be included in your single.php template to display <Previous-Next> links below your post.
 // It uses aligned pager template stated here > http://getbootstrap.com/components/#aligned-links
?>

<nav>
  <ul class="pager">
<?php 
	$post_permalink = get_permalink(); 
	$previous_post = get_permalink(get_adjacent_post(false,'',false));
	$next_post = get_permalink(get_adjacent_post(false,'',true));
	
	if( $post_permalink != $previous_post ):
?>
<li class="previous"><a href="<?php echo $previous_post; ?>"><span aria-hidden="true">&larr;</span> Previous</a></li>
<?php endif; ?>
<?php if( $post_permalink != $next_post ): ?>
<li class="next"><a href="<?php echo $next_post; ?>">Next <span aria-hidden="true">&rarr;</span></a></li>
<?php endif; ?>
	</ul>
</nav>

<?php /* EOF */ ?>

Don’t forget to bookmark the template for future use.