What's that, you say? You're building a custom WordPress theme and you need to know how to add pagination? First off, good on ya for going the custom route. You'll end up with a much faster loading and less bloated website that way. Second, you're in luck. I'm going to show you how to add pagination to your WordPress website in just three easy steps. That's it. Just three. Three shall be the counting of the steps and the counting of the steps shall be three. Four shalt thou not count, neither shalt thou count two, excepting that thou then proceedeth to three. Five is right out.
Wait, what? Sorry. Monty Python moment there. Where was I? Oh yes. Three steps.
Step 1
Open up your theme's functions.php and add the following code:
/* Enabling Pagination */
function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div class="pagination"><ul>';
echo '<li><span>Page '. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}
As long as you're not putting it smack dab in the middle of another function, it doesn't matter where in your functions.php file you place it. Just for sh*ts and giggles though, put it at the end of the file, right before the closing ?> tag.
Step 2
Open up your category.php file and add the following code AFTER your post loop:
<?php wp_pagination(); ?>
This calls the pagination function you added in Step 1 and renders it on your category pages.
IMPORTANT: Be sure that you add the code AFTER the <?php endif ?> in your post loop.
Step 3
At this point, you'll probably see something like this at the bottom of your category pages:
1
2
3
4
Not very attractive, is it? So the final step is to style your pagination list items to make them look nicer and match the look and feel of the rest of your WordPress theme.
This is the CSS I used to style the pagination in the header image of this post:
/* Pagination */
.pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
border-radius: 5px;
}
.pagination ul>li {
display: inline;
}
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span {
border-rigth-width: 1px;
border-radius: 0 5px 5px 0;
}
.pagination ul>li>a, .pagination ul>li>span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}
Conclusion
So there you have it. Give it a try and comment below with your results. I'd love to see what you come up with. If you run into any problems, let me know.
