How to Add Numeric or Numbered Pagination in WordPress

You can add numeric or numbered pagination in any kind of page template (custom page template) in WordPress. In this tutorial, I will show you how to add WordPress numeric pagination using WP_Query and also we will give a nice style using CSS.

Add Pagination in Index Page

Most of the WordPress Themes use the_posts_pagination function to display a paginated navigation to next/previous set of posts, when applicable. But this function only works in Index page (index.php, archive.php or category.php and search.php).

Note: Some Themes may use the_posts_navigation() function to display next/previous set of posts. But it only shows “Previous posts” and “Older posts” links. If want to display page numbers with links in these pages then remove that function and use the following code instead.

<?php
the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => __( '&laquo; Prev', 'textdomain' ),
    'next_text' => __( 'Next &raquo;', 'textdomain' ),
) );
?>
  • mid_size (int) – How many page numbers to display to either side of the current or active page. Default is 1.
  • prev_text (string) – Text of the link to the next set of posts. Default is “Previous”.
  • next_text (string) – Text of the link to the next set of posts. Default is “Next”.

Set How Many Posts to Show Per Page

To set how many posts to show per page, go to Settings > Reading then set the number in Blog pages show at most field.

Add Pagination in Custom Page Template

If you make a custom page template and create custom query with new WP_Query to display blog posts, then you have to use paginate_links function to show pagination.

Example Code of a Custom Query

<?php
// Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;

$args = array(
    'post_type' => 'post',
    'post_status'=>'publish',
    'posts_per_page' => 12,
    'paged' => $paged,
);

$the_query = new WP_Query($args);
?>
  • post_type (string / array) ─ Use post types. Default value is ‘post‘. You can change it to your custom Post Types (e.g. movies).
  • posts_per_page (int) ─ Number of post to show per page.
  • paged (int) ─ Number of page. Show the posts that would normally show up just on page X when using the “Older Entries” link.

Example Code of Pagination

<?php
echo paginate_links( array(
    'format'  => 'page/%#%',
    'current' => $paged,
    'total'   => $the_query->max_num_pages,
    'mid_size'        => 2,
    'prev_text'       => __('&laquo; Prev Page'),
    'next_text'       => __('Next Page &raquo;')
) );
?>
  • ‘format’ (string) ─ Format for the pagination structure.
  • ‘current’ (int) ─ The current page number. Default is ‘paged’ query var or 1.
  • ‘total’ (int) ─ The total amount of pages.

Full Code of WordPress Pagination

Use the following codes in your custom page template where to display posts with pagination.

<?php
// Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;

$args = array(
    'post_type' => 'post',
    'post_status'=>'publish',
    'posts_per_page' => 10,
    'paged' => $paged,
);

$the_query = new WP_Query($args);
?>

<?php if ( $the_query->have_posts() ) : ?>
    
    <?php while ( $the_query->have_posts() ) : $the_query->the_post();
        // Post content goes here...
    endwhile; ?>

    <div class="pagination">
        <?php
        echo paginate_links( array(
            'format'  => 'page/%#%',
            'current' => $paged,
            'total'   => $the_query->max_num_pages,
            'mid_size'        => 2,
            'prev_text'       => __('&laquo; Prev Page'),
            'next_text'       => __('Next Page &raquo;')
        ) );
        ?>
    </div>
    
<?php endif; ?>

Styling Pagination using CSS

Copy the following CSS and paste in style.css file.

.pagination .page-numbers {
   background: #db605d;
   color: #fff;
   display: block;
   width: auto;
   float: left;
   margin: 4px 4px 4px 0;
   padding: 15px 18px 14px 18px;
   text-decoration: none;
}

.pagination .page-numbers:hover {
   background: #24221D;
   color: #fff;
   text-decoration: none;
}

.pagination .current {
   background: #24221D;
   color: #fff;
   padding: 15px 18px 14px 18px;
}

Result:Add Numeric or Numbered Pagination in WordPress - Result