Sign in


Sign up


Pagination

by Dawid Adach,

Final result preview
Live preview

    It seems that we are ready to start blogging using our brand new theme. However, probably after adding few posts, you would notice that we have a small bug. By default, WP displays ten posts in the main loop. Once we create 11th one, a 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 two. Now you can see issue yourself.

    In order to fix it we will add pagination to our theme.

  1. Create new file, paste following content and save it as /inc/mdb_pagination.php:
  2. 
    <?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="text-center">' . "\n";
      echo '<ul class="pagination">' . "\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";
    }
    ?>
                
  3. Add an extra import statement to our functions.php file:
  4. 
    /**
     * Include external files
     */
    require_once('inc/mdb_bootstrap_navwalker.php');
    require_once('inc/mdb_pagination.php');                       
                  
  5. Inside index.php file, find closing </div> of <div class="col-md-8"> , and call <?php mdb_pagination(); ?> just before it.
  6. 
                    } // end while
                } // end if
                ?>
            <?php mdb_pagination(); ?>    
            </div>
            <!--Sidebar-->
            <div class="col-md-4">
            
  7. Now you can refresh our page and notice new element on the bottom.
  8. Website pagination with bad layout

    You will see that pagination appeared at the bottom of the page, just after the last post. It works but it doesn't look OK, let's quickly fix it by adding some CSS classes via java script (jQuery).

  9. Inside footer.php add following code after <?php wp_footer(); ?>:
  10. 
    <script>
    $("#mdb-navigation > ul > li").addClass("page-item")
    $("#mdb-navigation > ul > li > a").addClass("page-link")
    </script>
                 

    Now it looks just great!

    Website pagination with a correct, MDB enhanced layout

    It also works perfectly fine. Automatically create numerous pages depends on a number of posts and configuration (you can play with it by adding more posts and decreasing number of displayed posts per page). It also highlights current page which 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 default pagination mechanism, but it also allows to overwrite it with the 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 calling them within your theme.


If something doesn’t work as expected, you can download a final code for this lesson here:

Previous lesson Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Comments 10

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us