Post Pagination in WordPress

July 20, 2015

Setting up post pagination in older versions of WordPress was a little tricky and more often than not required the use of a plugin. Thankfully since WordPress 4.1 a new function is available for displaying pagination with ease.

To output post pagination in your theme just using the following function:


<?php the_posts_pagination(); ?>

The above function also can take 3 arguments if you would like to customise things a little more.


<?php the_posts_pagination( array(
	'prev_text' => __( 'Back', 'your_text_domain' ),
	'next_text' => __( 'More Posts', 'your_text_domain' ),
	'screen_reader_text' => __( 'Post navigation', 'your_text_domain' ),
) ); ?>
  • ‘prev_text’ Anchor text to display in the previous post link.
  • ‘next_text’ Anchor text to display in the next post link.
  • ‘screenreadertext’ Screen reader text for nav element.

The above function outputs this HTML:


<nav class="navigation pagination" role="navigation">
  <h2 class="screen-reader-text">Posts navigation</h2>
  <div class="nav-links">
    <span class="page-numbers current">1</span>
    <a class="page-numbers" href="https://s12621.p20.sites.pressdns.com/archive/page/2/">2</a> 
    <a class="page-numbers" href="https://s12621.p20.sites.pressdns.com/archive/page/3/">3</a> 
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="https://s12621.p20.sites.pressdns.com/archive/page/33/">33</a> 
    <a class="next page-numbers" href="https://s12621.p20.sites.pressdns.com/archive/page/2/">Next</a>
  </div> 
</nav>

With the above output we can now use some simple CSS styles to create a nice looking pagination navigation:


.pagination {
    display: table;
    margin: 0 auto;
}

.page-numbers {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px 0 0;
    color: #F04530;
    font-weight: bold;
    border: 1px solid #eee;
    line-height: 1;
    text-decoration: none;
    border-radius: 2px;
}
.page-numbers.current,
a.page-numbers:hover {
    color: #fff;
    background: #F04530;
}

This is just the bare bones to get started with WordPress post pagination but hopefully it has given you a little insight and potentially the ability to uninstall a WordPress pagination plugin that is no longer needed.