If you want number pagination for the WP post loop you have to write the given code in the function.php file and use ‘<?php numeric_pagination(); ?>‘ in the template where you want to use pagination.
Find the complete code below:
STEP 1:
Write in function.php or the ‘Code Snippets’ plugin (if you are using it).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | function numeric_pagination ($pageCount = 9, $query = null) { if ($query == null) { global $wp_query; $query = $wp_query; } if ($query->max_num_pages <= 1) { return; } $pageStart = 1; $paged = $query->query_vars['paged']; // set current page if on the first page if ($paged == null) { $paged = 1; } // work out if page start is halfway through the current visible pages and if so move it accordingly if ($paged > floor($pageCount / 2)) { $pageStart = $paged - floor($pageCount / 2); } if ($pageStart < 1) { $pageStart = 1; } // make sure page start is if ($pageStart + $pageCount > $query->max_num_pages) { $pageCount = $query->max_num_pages - $pageStart; } ?> <div id="archive_pagination"> <?php if ($paged != 1) { ?> <a href="<?php echo get_pagenum_link(1); ?>" class="numbered page-number-first"><span>‹ <?php _e('<< First', 'global'); ?></span></a> <?php } // first page is not visible... if ($pageStart > 1) { //echo 'previous'; } for ($p = $pageStart; $p <= $pageStart + $pageCount; $p ++) { if ($p == $paged) { ?> <span class="numbered page-number-<?php echo $p; ?> current-numeric-page"><?php echo $p; ?></span> <?php } else { ?> <a href="<?php echo get_pagenum_link($p); ?>" class="numbered page-number-<?php echo $p; ?>"><span><?php echo $p; ?></span></a> <?php } } // last page is not visible if ($pageStart + $pageCount < $query->max_num_pages) { //echo "last"; } if ($paged != $query->max_num_pages) { ?> <a href="<?php echo get_pagenum_link($query->max_num_pages); ?>" class="numbered page-number-last"><span><?php _e('>> Last', 'global'); ?> ›</span></a> <?php } ?> </div> <?php } |
STEP 2:
use ‘<?php numeric_pagination(); ?>‘ in the template where you want to use pagination.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'post_type' => 'post', 'posts_per_page' => 6, 'paged' => $paged ); $wp_query = new WP_Query($args); while ( have_posts() ) : the_post(); $excerpt = get_the_excerpt(); $excerpt = substr($excerpt, 0, 145); $exc_result = substr($excerpt, 0, strrpos($excerpt, ' ')); $post_thumb = get_the_post_thumbnail_url( get_the_ID(), 'medium' ); if($post_thumb) { $post_thumb2 = $post_thumb; }else{ $post_thumb2 = get_template_directory_uri().'/assets/images/default-post.jpg'; } ?> <div class="col-12 col-sm-6"> <a href="<?php the_permalink(); ?>" > <div class="post-thumb"> <img src="<?php echo $post_thumb2; ?>"> </div> </a> <h2><a href="<?php the_permalink(); ?>" ><?php the_title() ?></a></h2> <p>Posted on: <?php $post_date = get_the_date( 'l F j, Y' ); echo $post_date; ?></p> <p><?php echo $exc_result; ?> [...]</p> <a href="<?php the_permalink(); ?>" class="btn btn-black">Read More</a><br> </div> <?php endwhile; ?> <!-- then the pagination links --> <?php //next_posts_link( '← Older posts', $wp_query ->max_num_pages); ?> <?php //previous_posts_link( 'Newer posts →' ); ?> <div class="pagination-bar"><?php numeric_pagination(); ?></div> |
In Some case, Pagination in category link gives 404 error, to resolve this error you can add given code below in function.php file.
1 2 3 4 5 6 7 8 9 | function custom_pre_get_posts($query) { if ($query->is_main_query() && !$query->is_feed() && !is_admin() && is_category()) { $query->set('page_val', get_query_var('paged')); $query->set('paged', 0); } } add_action('pre_get_posts', 'custom_pre_get_posts'); |
If you are using post loop on ‘Home Page’ there might be some issue with your loop or pagination.
Solution:
Use ‘page’ instead of ‘paged’ in loop. Please find complete code below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <?php $paged = (get_query_var('page')) ? get_query_var('page') : 1; $args = array( 'post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged ); $wp_query = new WP_Query($args); while ( have_posts() ) : the_post(); $excerpt = get_the_excerpt(); $excerpt = substr($excerpt, 0, 200); $exc_result = substr($excerpt, 0, strrpos($excerpt, ' ')); $post_thumb = get_the_post_thumbnail_url( get_the_ID(), 'medium' ); if($post_thumb) { $post_thumb2 = $post_thumb; }else{ $post_thumb2 = get_template_directory_uri().'/assets/images/default-post.jpg'; } ?> <div class="post-wrap"> <div class="row"> <div class="col-sm-3"> <a href="<?php the_permalink(); ?>" > <div class="post-thumb"> <img src="<?php echo $post_thumb2; ?>"> </div> </a> </div> <div class="col-sm-9"> <h2 class="m-0"><a href="<?php the_permalink(); ?>" ><?php the_title() ?></a></h2> <p class="m-0 text-info">Posted on: <?php $post_date = get_the_date( 'l F j, Y' ); echo $post_date; ?></p> <p><?php echo $exc_result; ?> [...]</p> <a href="<?php the_permalink(); ?>" class="btn btn-success">Read More</a><br> </div> </div> </div> <?php endwhile; ?> <div class="pagination-bar"><?php numeric_pagination(); ?></div> |