Number Pagination for WordPress Posts

Admin

2 years ago

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).

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>&lsaquo; <?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'); ?> &rsaquo;</span></a>
<?php } ?>

</div>
<?php }

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;

}

<?php

if ($paged != 1) {

<a href="<?php echo get_pagenum_link(1); ?>" class="numbered page-number-first"><span>&lsaquo; <?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'); ?> &rsaquo;</span></a>

<?php } ?>

</div>

<?php }

STEP 2:

use ‘<?php numeric_pagination(); ?>‘ in the template where you want to use pagination.

<?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( '&larr; Older posts', $wp_query ->max_num_pages); ?>
					<?php //previous_posts_link( 'Newer posts &rarr;' ); ?>
					<div class="pagination-bar"><?php numeric_pagination();  ?></div>

<?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>

</a>

<p>Posted on: <?php $post_date = get_the_date( 'l F j, Y' ); echo $post_date; ?></p>

<a href="<?php the_permalink(); ?>" class="btn btn-black">Read More</a><br>

</div>

<?php endwhile; ?>

<?php //next_posts_link( '← Older posts', $wp_query ->max_num_pages); ?>

<?php //previous_posts_link( 'Newer posts →' ); ?>

In Some case, Pagination in category link gives 404 error, to resolve this error you can add given code below in function.php file.

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');

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.

<?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>

<?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>

</a>

</div>

<p class="m-0 text-info">Posted on: <?php $post_date = get_the_date( 'l F j, Y' ); echo $post_date; ?></p>

<a href="<?php the_permalink(); ?>" class="btn btn-success">Read More</a><br>

</div>

<?php endwhile; ?>