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:

&ltg;nav class="navigation pagination" role="navigation">
  &ltg;h2 class="screen-reader-text">Posts navigation&ltg;/h2>
  &ltg;div class="nav-links">
    &ltg;span class="page-numbers current">1&ltg;/span>
    &ltg;a class="page-numbers" href="http://ift.tt/1Swkskl">2&ltg;/a> 
    &ltg;a class="page-numbers" href="http://ift.tt/1CQYzuh">3&ltg;/a> 
    &ltg;span class="page-numbers dots">…&ltg;/span>
    &ltg;a class="page-numbers" href="http://ift.tt/1SwkuJ3">33&ltg;/a> 
    &ltg;a class="next page-numbers" href="http://ift.tt/1Swkskl">Next&ltg;/a>
  &ltg;/div> 
&ltg;/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.

The post Post Pagination in WordPress appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly