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="">2</a> 
    <a class="page-numbers" href="">3</a> 
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="">33</a> 
    <a class="next page-numbers" href="">Next</a>

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, {
    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.


  1. The HTML code looks encoded.

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

  3. Thank you Jake,
    This article very helpful… 🙂

  4. Awesome Post. I have gained much knowledge from your post

  5. If you want your wordpress blog to look even better check out

This post currently has 6 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

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