How to Add Custom Pagination in WordPress

How to Add Custom Pagination in WordPress
How to Add Custom Pagination in WordPress

Pagination for the post-show in homepage, category page, or author page. Pagination plays an important role in your WordPress website. Pagination helps you in page load time, better user experience. Custom Pagination helps you to divide 100 posts or pages into multiple pages.

What is Pagination?

Pagination is a technique where online posts or blogs are divided into several web pages. Pagination is also known as paging. Pagination can be handled from the client end or server end
In easy words: Pagination is a process of dividing the content into multiple pages.

Advantages of Pagination

  • Better User Engagement.
  • Increase page performance
  • Easy to Manage Website Content

How to Add Custom Pagination in WordPress Step by Step.

Custom Pagination in WordPress

Add the following code to your theme file like index.php, category.php, author.php, or template-blog.php

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
  <?php
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    $custom_args = $args = array( 'post_type' => 'post' ,'order' => 'DESC', 'posts_per_page'=> '8','paged' => $paged);
    $custom_query = new WP_Query( $custom_args ); ?>
    
        <?php if ( $custom_query->have_posts() ) : ?>
        <!-- the loop -->
        <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
<li>
      <a href="<?php echo get_permalink(); ?>"><h2><?php the_title(); ?></h2> </a>
     <div class="blog-content">
       <p><?php the_excerpt(__('(more…)')); ?></p>
     </div>
   </li>
<?php endwhile; ?>
    <!-- end of the loop -->
 
    <!-- pagination here -->
    <div class="col-md-12">
    <?php
      if (function_exists(custom_pagination)) {
        custom_pagination($custom_query->max_num_pages,"",$paged);
      }
    ?>
</div>
  <?php wp_reset_postdata(); ?>
  <?php else:  ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <?php endif; ?>

STEP 2: Adding the code in functions.php

PHP
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
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
 
  if (empty($pagerange)) {
    $pagerange = 2;
  }
  global $paged;
  if (empty($paged)) {
    $paged = 1;
  }
  if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages;
    if(!$numpages) {
        $numpages = 1;
    }
  }
  $pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => '/page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('Previous'),
    'next_text'       => __('Next'),
    'type'            => 'plain',
    'add_args'        => False,
    'add_fragment'    => ''
  );
 
  $paginate_links = paginate_links($pagination_args);
 
  if ($paginate_links) {
    echo "<nav class='custom-pagination'>";
    
      echo $paginate_links;
    echo "</nav>";
  }
 
}

Add the CSS to style pagination

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.custom-pagination span{
        background-color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #eee;
    padding: 8px 15px 8px 15px;
    }
    .custom-pagination a{
        background-color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #eee;
    padding: 8px 15px 8px 15px;
    }
    .page-numbers.current{
         background-color: #db1e29;
         color: #fff;
    }

For using these code in the category.php file then you need to change a little bit in the existing code

Add the below code at the top of the category.php

PHP
1
2
3
4
<?php if (is_category()) {
$category = get_category(get_query_var('cat'));
$category_slug = $category->slug;
} ?>

For category pagination in WordPress use code

We change only the array : ‘category_name’ => $category_slug,

PHP
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
  <?php
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    $custom_args = $args = array( 'category_name' =>  $category_slug,'order' => 'DESC', 'posts_per_page'=> '8','paged' => $paged);
    $custom_query = new WP_Query( $custom_args ); ?>
    
        <?php if ( $custom_query->have_posts() ) : ?>
        <!-- the loop -->
        <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
<li>
      <a href="<?php echo get_permalink(); ?>"><h2><?php the_title(); ?></h2> </a>
     <div class="blog-content">
       <p><?php the_excerpt(__('(more…)')); ?></p>
     </div>
   </li>
<?php endwhile; ?>
    <!-- end of the loop -->
 
    <!-- pagination here -->
    <div class="col-md-12">
    <?php
      if (function_exists(custom_pagination)) {
        custom_pagination($custom_query->max_num_pages,"",$paged);
      }
    ?>
</div>
  <?php wp_reset_postdata(); ?>
  <?php else:  ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <?php endif; ?>

Recent post

SEO Tools The Ultimate Guide to Optimization
SEO Tools: The Ultimate Guide to Optimization

2023-09-14

Best SEO Tools for Website to Rank
Best SEO Tools for Website to Rank (Free and Paid)

2023-09-13

How Does SEO Tools Work
How Does SEO Tools Work?

2023-09-13

Can we use SEO tools for content writing
Can we use SEO tools for content writing?

2023-09-13

Blog Category