Pagination is very important for a blog specially when you are dealing with many posts. Pagination can be done through many plugins out there in the wordpress.org but today we will take a look at how we can show pagination in any WordPress theme. By default, WordPress shows navigation that re “Next” and “Previous” which are not good for showing hundreds of posts. Users will be tired to navigate the posts. But with help of WordPress navigation, we can get a very nice looking pagination on our site.
<?php
if ( ! function_exists( 'kt_pagination_numbers' ) ) {
function kt_pagination_numbers( $custom_query = false ) {
global $wp_query;
if ( !$custom_query ) $custom_query = $wp_query;
$paged_get = 'paged';
if( is_front_page() && ! is_home() ):
$paged_get = 'page';
endif;
$big = 999999999;
$pagination = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var( $paged_get ) ),
'total' => $custom_query->max_num_pages,
'type' => 'list',
'prev_text' => '<i class="fa fa-angle-left"></i>',
'next_text' => '<i class="fa fa-angle-right"></i>',
) );
if ( $pagination ) {
return '<div class="kt-pagination">'. $pagination . '</div>';
}
}
}
?>
The above function will make the numbered pagination. In the last line, you can change the div class as per your css. Copy and paste the above PHP in funstions.php .
Now you need to design the pagination with css, so it will look good and match your site. I’m giving the normal design for this pagination, you can tweak the css easily. Copy/paste the below css to style.css .
.kt-pagination {
margin-top:50px;
margin-bottom:50px;
overflow: hidden;
clear: both;
text-align: center;
}
.kt-pagination.align-center {
text-align: center;
}
.kt-pagination.align-right {
text-align: right;
}
.kt-pagination a,
.kt-pagination .disable-url {
display: inline-block;
color: #999999;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
.kt-pagination .disable-url span {
opacity: 0.5;
}
.kt-pagination a i,
.kt-pagination .disable-url i {
font-size: 14px;
margin-left: 8px;
}
.kt-pagination .newer a i,
.kt-pagination .newer .disable-url i {
margin: 0 8px 0 0;
}
.kt-pagination a:hover {
text-decoration: none;
color: #6eb48c;
}
.kt-pagination .newer,
.kt-pagination .older {
display: inline-block;
}
.kt-pagination .newer:after {
content: "/";
display: inline-block;
margin: 0 16px 0 20px;
font-size: 12px;
color: #999;
}
.kt-pagination ul.page-numbers {
list-style: none;
display: inline-block;
vertical-align: top;
margin:0;
padding:0;
}
.kt-pagination ul.page-numbers li {
display: inline-block;
float: left;
margin-right:20px;
margin-bottom:0;
list-style: none;
}
.kt-pagination ul.page-numbers li:last-child {
margin-right: 0;
}
.kt-pagination ul.page-numbers li span,
.kt-pagination ul.page-numbers li a {
display:inline-block;
padding:0;
color:#999;
background:#fff;
font-size:18px;
text-decoration:none;
min-width:40px;
height:40px;
text-align:center;
line-height:38px;
margin-bottom:15px;
-webkit-box-shadow:0 6px 6px -6px #ccc;
box-shadow:0 6px 6px -6px #ccc;
}
.kt-pagination ul.page-numbers li a {
padding: 0 5px;
}
.kt-pagination ul.page-numbers li a:hover {
color:#000;
text-decoration: none;
}
.kt-pagination ul.page-numbers li span.current {
color: #000;
background: #fff;
text-decoration: none;
}
.kt-pagination ul.page-numbers li a i {
font-size: 25px;
line-height: 38px;
margin-left: 2px;
}
Now save the file and check your site. Aren’t they nice? You are done with creating a eye-catching pagination to your site.