
Author: Dawid Adach
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.
- Create a new folder called
inc
, and add a new filepagination.inc.php
inside of it. Paste the following code into the file: - Open the
functions.php
file and add the following lines at the beginning (after<?php
) - Within the
index.php
file, remove the pagination snippet: - With this short function:
- update
footer.php
file and add the following lines after</body>
:
<?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">«</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">»</span>
<span class="sr-only">Next</span>') );
echo '</ul>' . "\n";
echo '</nav>' . "\n";
echo '<!--/.Pagination-->' . "\n";
}
?>
/**
* Include external files
*/
require_once('inc/pagination.inc.php');
<!--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">«</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">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<!--Last-->
<li class="page-item">
<a class="page-link">Last</a>
</li>
</ul>
</nav>
<?php mdb_pagination(); ?>
<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.
Previous lesson Download Live preview Next lesson
Spread the word:
