Post Pagination in WordPress

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.
  • ‘screen_reader_text’
    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.

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

3 Comments

  1. The HTML code looks encoded.

  2. Great guide, just what I was looking for.
    Thank you.

This post currently has 3 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply to Web developer Cancel reply

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