Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

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. Create new file, paste following content and save it as /inc/mdb_pagination.php:


<?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";
}
?>
            

Add an extra import statement to our functions.php file:


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

Inside index.php file, find closing </div> of <div class="col-md-8"> , and call <?php mdb_pagination(); ?> just before it.


                } // end while
            } // end if
            ?>
        <?php mdb_pagination(); ?>    
        </div>
        <!--Sidebar-->
        <div class="col-md-4">
        

Now you can refresh our page and notice new element on the bottom.

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). Inside footer.php add following code after <?php wp_footer(); ?>:


<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 domain. Currently, Dawid's main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Comments 6

  • tonymu

    I get an error message when tryingto add featured image now: Warning: Cannot modify header information - headers already sent by (output started at /home/dzinesco/public_html/2017/wp-content/themes/mdb/inc/mdb_pagination.php:2) in /public_html/2017/wp-includes/pluggable.php on line 1210 any idea why / how to rectify?

  • Dawid Adach

    Dear Banovi, could yo please provide us with more details? I checked lesson and it works like a charm with 30+ posts. Please share your code or try to download files from following lesson. Furthermore, please make sure that you are using correct version of MDB.

  • Banovi

    Not even that! The pagination adds more numbers unexpectedly! This pagination function has lot of issues! Please fix it as soon as possible our client is awaiting!!!

  • Pixlforge

    There's a little issue with the ellipses as it is displayed on here. Here the code reads "...". Use "..." instead so it displays correctly.

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more