How to add custom pagination to WordPress

By default WordPress comes up with Older Entries and Newer Entries navigation button which is simpler. But if you want more attractive and functional pagination then you must design it by yourself or you can use a plugin. But if you are looking to minimize plugin use to speedup your site then we are going to show you how to add a custom pagination to WordPress.

custom wordpress pagination for post

First of all you need to add following CSS to your style.css file or you can save it to a complete different file and include it  to stylesheet:

[css]

div.pagination {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0px;
margin-top:10px;
margin-bottom:10px;
}

div.pagination a {
padding:3px 6px 3px 6px;
margin:2px;
border:1px solid #08B1D8;
text-decoration:none;
color: #000;

}
div.pagination a:hover, div.pagination a:active {
border: 1px solid #08B1D8;
background-color: #08B1D8;
color: #FFF;
}
div.pagination span.current {
margin: 2px;
padding:3px 6px 3px 6px;
border: 1px solid #08B1D8;
font-weight: bold;
background-color: #08B1D8;
color: #FFF;
}

[/css]

Then in a WordPress loop add the following code just before endif  tag:

[php] if ($query->max_num_pages > 1)
{
echo ‘
<div class="pagination">
<a class="first page button" href="’.get_pagenum_link(1).’">First</a>
<a class="previous page button" href="’.get_pagenum_link(($curpage-1 > 0 ? $curpage-1 : 1)).’">Previous</a>’;
for($i=1;$i<=$query->max_num_pages;$i++)
echo ‘<a class="’.($i == $curpage ? ‘active’ : ”).’" href="’.get_pagenum_link($i).’">’.$i.'</a>’;
echo ‘
<a class="next page button" href="’.get_pagenum_link(($curpage+1 <= $query->max_num_pages ? $curpage+1 : $query->max_num_pages)).’">Next</a>
<a class="last page button" href="’.get_pagenum_link($query->max_num_pages).’">Last</a>
</div>
‘;
}
wp_reset_postdata();
?> [/php]

And you have just created your own pagination. Out of the pagination is like this:

free wordpress pagination

If you want to change the color then change border and background-color in CSS. Now if you are wondering how we get

$query->max_num_pages > 1

then here is the WordPress query we have used:

[php] <?php
global $paged;
$curpage = $paged ? $paged : 1;
$args = array(
‘post_type’ => ‘post’,
‘orderby’ => ‘post_date’,
‘posts_per_page’ => 10,
‘paged’ => $paged
);
$query = new WP_Query($args);
if($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
?>[/php]

Author: mytutorialguru

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *