How to Add Number Pagination in WordPress

How to Create Number Pagination in WordPress Without Using Plugin

Table of Contents

When you are creating a WordPress blog, one of the most common challenges is organizing your archive pages in the easiest way for visitors to browse.

There are three most common WordPress pagination options available in the most premium and free themes.

The three most common WordPress blog pagination options include numbered, scroll, and load more buttons.

WordPress Number Pagination

Today, I want us to focus on number pagination and learn how you can create a simple function that adds number pagination to your existing WordPress site.

There are plugins that can help you add this number pagination to your blog. If for some reason you don’t like to use those free plugins or want to try out something custom, this is the tutorial for you.

Tutorial Objective

I run into this problem when customizing a client’s website that was based on a theme that used the default WordPress pagination.

Since she did not want that pagination and she did not want us to change the theme, I had to create a simple number pagination function.

Number Pagination Function

When creating number pagination, we will make use of the paginate links WordPress function. This function has the following default parameters :

$args = array(
        'base'               => '%_%',
        'format'             => '?paged=%#%',
        'total'              => 1,
        'current'            => 0,
        'show_all'           => false,
        'end_size'           => 1,
        'mid_size'           => 2,
        'prev_next'          => true,
        'prev_text'          => __('« Previous'),
        'next_text'          => __('Next »'),
        'type'               => 'plain',
        'add_args'           => false,
        'add_fragment'       => '',
        'before_page_number' => '',
        'after_page_number'  => ''
);

Writing the Pagination Function

So we begin writing the number pagination function but we first declare the global $wp_query; the global variable then gives the function a unique name. Inside the function we need to echo the paginated links inside the array as follows:

// Number Pagination Function 

function njengah_number_pagination() {

global $wp_query;
$big = 9999999; // need an unlikely integer
  echo paginate_links( array(
   'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
   'format' => '?paged=%#%',
   'current' => max( 1, get_query_var('paged') ),
   'total' => $wp_query->max_num_pages) );
}

This code should be added to your function.php file.

When you add this code to the functions.php file, it is now time to call the njengah_number_pagination in the template files.
In most cases, the pagination will be located in the archive.php file and in some themes the index.php.

Open one of these files and locate the default pagination code and replace it with the call to the function above:

<?php njengah_number_pagination(); ?>

When you have replaced the default pagination code; save the changes and check on your blog archive if the numbered pagination is appearing.

Now you can go ahead and apply the appropriate CSS styles to the numbered pagination that matches the color and design of your theme.

CSS Styling

You can go ahead and add the following CSS styles to give your WordPress number pagination a good outlook.

/**
* WordPress Number Pagination CSS Styles
*/

.page-navi.meta {
    color: RGB(38, 166, 154);
    font-size: 20px;
    font-weight: normal;
    border: solid 1px rgb(221, 221, 221);
    padding: 10px 20px;
    padding-left: 0;
    border-radius:3px;
}

.page-numbers {
    border-right: solid 1px rgb(221, 221, 221);
    padding: 10px 20px;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: normal;
    margin-left:-6px;
}

.page-numbers.current {
   padding: 10px 20px;
   background: RGB(38, 166, 154);
   color: rgb(255, 255, 255);
   font-weight: 600;
}

.page-navi .prev {
   float: left;
   margin-right: 0;
   margin-top: -10px;
   border-right: solid 1px #eee;
   font-family: 'Open Sans', sans-serif !important;
   font-size: 18px;
   letter-spacing: 0;
   font-weight: normal;
}

.page-navi .next {
   float: right;
   margin-top: -10px;
   border-left: solid 1px #ddd;
   border-right: none;
   border-top: none;
   border-bottom: none;
   font-family: 'Open Sans', sans-serif !important;
   font-size: 18px;
   font-weight: normal;
   letter-spacing: 0;
}

The final design of the number pagination should appear as shown in the image below after you apply those CSS styles.

Number Pagination Code Snippet

<?php

/** 
 * Create numeric pagination in WordPress
 */
 
// Get total number of pages
global $wp_query;
$total = $wp_query->max_num_pages;
// Only paginate if we have more than one page
if ( $total > 1 )  {
     // Get the current page
     if ( !$current_page = get_query_var('paged') )
          $current_page = 1;
     // Structure of “format” depends on whether we’re using pretty permalinks
     $format = empty( get_option('permalink_structure') ) ? '&page=%#%' : 'page/%#%/';
     echo paginate_links(array(
          'base' => get_pagenum_link(1) . '%_%',
          'format' => $format,
          'current' => $current_page,
          'total' => $total,
          'mid_size' => 4,
          'type' => 'list'
     ));
}

Conclusion

This is a simple and straightforward way of adding number pagination to your WordPress theme without using any plugin.

You just need to copy that code to your function.php file and call the function in your archives.php template. If you are stuck and need help from a skilled WordPress developer, feel free to ask for help.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.