Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

MDB Pagination

Pagination


Written 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?


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 4

  • 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.

  • User avatar

    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!!!

  • User avatar

    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.

  • User avatar

    un tal klever

    justo lo k necesitaba.

Leave a reply

Anonymous User

Wordpress tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free