How To Add Numeric WordPress Pagination Without Plugin

Default WordPress only comes with the “next page” and “previous page” links to navigate between different blog overview pages. If you happen to have a blog with a lot of posts or simply want to offer a better user experience I would recommend to remove those links and replace them with a pagination like most people are using in their templates. The goal is to replace the default Older and Newer pagination links at the bottom of archive pages with easy to navigate page numbers.

Default Navigation & Numeric Pagination

Default Navigation & Numeric Pagination

Many of the newer WordPress themes already come with the paginated navigation. But if your theme does not support this, you can easily get this functionality by installing a plugin. One of the most popular plugins for this purpose which is around for quite some time is WP-PageNavi.

However, you can get the same functionality by inserting just a few lines of codes in the theme file itself. It is recommended to avoid more plugins as it can slow down your wordpress site. At the same time, you don’t have to update the plugins when the updated version is available.

How to add Numeric Pagination Manually

The following example is taken from WordPress Codex to display the paginated links.

<?php
global $wp_query;
$big = 999999999; // 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
) );
?>

However, inserting such a long php code everywhere does not look nice. Instead, we will create a custom function and put this in our function.php file inside the theme directory and call it wherever required. To get the full display control of returned values, we will define the type argument as array. We will also add some PHP codes so that the links can be customized from our stylesheet.

Here is the code you need to add in the function.php file of your theme.

function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = 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,
    'type'  => 'array'
) );
if( is_array($page_format) ) {
            $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
            echo '<div><ul>';
            echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
            foreach ( $page_format as $page ) {
                    echo "<li>$page</li>";
            }
           echo '</ul></div>';
}
}

With this code, we have additionally defined the class of the paginated navigation. With this class, we can easily set the style of the pagination. Insert the following CSS codes in the style.css file of your theme.

.pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
border-radius: 5px;
}
.pagination ul>li {
display: inline;
}
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span {
border-rigth-width: 1px;
border-radius: 0 5px 5px 0;
}
.pagination ul>li>a, .pagination ul>li>span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}

Of course, you are free to change the above CSS codes to suite your theme style.

That’s all my friends! You have just created a function to display the paginated links. Now edit the PHP files of your Home page and archive page (and all other pages where you want pagination) and put this single line of PHP code:

<?php wp_pagination(); ?>

You need to find out the code responsible for adding older posts & newer posts links which will be something like the following and replace it with the above code.

Numeric WordPress Pagination

Numeric WordPress Pagination

You may like to look into archive.php, index.php, search.php, category.php, tags.php, etc. to find out the code for default navigation style.

Caution

Although the above codes are tried and tested, it is always a good idea to keep the backup of your functions.php, style.css, archives.php and other files where you wish to make changes. Also you must have the access to the control panel so that you can immediately replace the files if anything goes wrong. Make sure you can replace the files back to the server before making any changes in functions.php file. Don’t rely on the WordPress dashboard, you may not be able to access it if something goes wrong accidentally!

Although you can edit all these files from the WordPress built-in editor, it is recommended to use an external editors like Notepad++ or Sublime Text. With external editor, you can undo the changes made any number of times.

If you are ready to get your hands dirty with some PHP codes, go ahead and implement the numeric paginated navigation in your WordPress without a plugin.

4
Leave a Reply

avatar
4 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Php On WebAmanpoorvi gandhiSteff Recent comment authors
  Subscribe  
Notify of
Steff
Guest
Steff

Thanks a lot, this is great! Just one little correction in order for css to work – the class of “.pagination” needs to be given to div:
echo ”;

poorvi gandhi
Guest
poorvi gandhi

very useful. thanks.

Aman
Guest
Aman

Hi Ricky,
Thanks for the solution, but it does not work on search page, second page and rest of pages goes on 404 page, what’s the solution?

Please help!

Php On Web
Guest

Hi dude, i have also find out one good example
Numeric Pagination WordPress