Pagination

Pagination

It seems that we are ready to start blogging using our brand new theme. However, probably after adding a few posts, you may notice that we have a small bug. By default, WP displays ten posts in the main loop. Once we create the 11th one, the very first post will disappear from the main page and won't be accessible anymore. If you haven't done that before, add at least five posts to your blog, and change number of displayed post. In order to do that go to Settings > Reading and set Blog pages to show at most to 3. Now you can see this issue yourself.

In some cases, it's fine to show only the three latest posts (i.e. when you build a landing page for a product). If that is the case you can simply remove a pagination code from your index.php file and your theme will always display only the three newest posts.

However, if you wish to let your user read the previous posts, follow these steps.

1. Create a new folder called inc, and add a new file pagination.inc.php inside of it. Paste the following code into the file:

<?php
//Custom pagination
function mdb_pagination() {
if( is_singular() )
return;
global $wp_query;
/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max   = intval( $wp_query->max_num_pages );
/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;
/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}
echo '<nav id="mdb-navigation" class="d-flex justify-content-center my-4 wow fadeIn">' . "\n";
  echo '<ul class="pagination pagination-circle pg-info mb-0">' . "\n";
    /** Previous Post Link */
    if ( get_previous_posts_link() )
    printf( ' <li>%s</li>
    ' . "\n", get_previous_posts_link('
    <span aria-hidden="true">&laquo;</span>
    <span class="sr-only">Previous</span>
    ') );
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
    $class = 1 == $paged ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
    if ( ! in_array( 2, $links ) )
    echo '<li>…</li>';
    }
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
    $class = $paged == $link ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
    if ( ! in_array( $max - 1, $links ) )
    echo '<li>…</li>' . "\n";
    $class = $paged == $max ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
    /** Next Post Link */
    if ( get_next_posts_link() )
    printf( '<li>%s</li>
    ' . "\n", get_next_posts_link('<span aria-hidden="true">&raquo;</span>
    <span class="sr-only">Next</span>') );
  echo '</ul>' . "\n";
echo '</nav>' . "\n";
echo '<!--/.Pagination-->' . "\n";
}
?>
    

2. Open the functions.php file and add the following lines at the beginning (after <?php)

/**
 * Include external files
 */
require_once('inc/pagination.inc.php');

3. Within the index.php file, remove the pagination snippet:

<!--Pagination -->
                <nav class="d-flex justify-content-center my-4 wow fadeIn">
                    <ul class="pagination pagination-circle pg-info mb-0">

                        <!--First-->
                        <li class="page-item disabled">
                            <a class="page-link">First</a>
                        </li>

                        <!--Arrow left-->
                        <li class="page-item disabled">
                            <a class="page-link" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>

                        <!--Numbers-->
                        <li class="page-item active">
                            <a class="page-link">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">5</a>
                        </li>

                        <!--Arrow right-->
                        <li class="page-item">
                            <a class="page-link" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>

                        <!--Last-->
                        <li class="page-item">
                            <a class="page-link">Last</a>
                        </li>

                    </ul>
                </nav>

4. With this short function:

<?php mdb_pagination(); ?>

5. update footer.php file and add the following lines after </body>:

<script>
$("#mdb-navigation > ul > li").addClass("page-item")
$("#mdb-navigation > ul > li > a").addClass("page-link")
</script>

Our pagination is ready now. It automatically creates numerous pages depending on the number of posts and configuration (you can play with it by adding more posts and decreasing the number of displayed posts per page). It also highlights the current page that we are browsing.

Our pagination function is quite complex, and we will not explain it in detail. What you should remember is that WP comes with a default pagination mechanism, but it also allows you to overwrite it with a custom one in order to give it a personalized design. By now you should also know that you are free to create custom functions and call them within your theme.