How to setup pagination in wordpress with number?
So, You have wordpress website and you want to set pagination with page number in homepage or category page or tags page anywhere between the loop. follow these step below to display the page number:
So let's Start...
Step-01: Add below code to your wp theme functions.php file
//Pagination ====================================================================
function my_post_queries( $query ) {
if (!is_admin() && $query->is_main_query()){
// alter the query for the home and category pages
if(is_home()){
$query->set('posts_per_page', 16);
}
if(is_category()){
$query->set('posts_per_page', 20);
}
}
}
add_action( 'pre_get_posts', 'my_post_queries' );
Step-02: Add below code to your theme where you want to display pagination
<div class="pagination">
<?php the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '<' ),
'next_text' => __( '>' ),
) ); ?>
</div>
Step-03: Add below code to your theme css file
/*=Start Pagination Css==*/
.pagination {
width: 100%;
}
.screen-reader-text {
display: none;
}
.nav-links {
text-align: center;
margin-top: 20px;
}
.nav-links a, .nav-links span.current {
border: 1px solid #fbfbfb;
padding: 10px;
display: inline-block;
color: #ffffff;
background: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
color: #F6881F;
box-shadow: 0px 3px 7px #eaeaea;
}
.nav-links span.current {
box-shadow: none;
background: #FE8800;
color: #ffffff;
padding: 9px;
vertical-align: bottom;
}
You are done.
Now you can see the pagination and also you can customize the css as your requirement.
Please leave a comment for any issue using this code.
0 Comments