WordPress – Numbered Page Navigation Without Any Plugins

Numbered page navigation is not available in WordPress features. WordPress, instead uses (Previuse Page/Post – Next Page/Post) navigation style. however; there number of plugins for this solution and some are listed below.

• Zamango Page Navigation
  • Zamango Page Navigation creates pagebar on lists (for ex. on category or search results) and Next Post & Previous Post links on each post.
• WP-PageNavi
  • Replace the old ← Older posts | Newer posts → links to numbered link page navigation.
• WP Paging
  • This plugins is based on a core page number function called paginate_links.

The easiest way to create numbered page navigation is to use paginate_links WordPress function which requires an array of parameters and returns array or string of links.

Usage:

<?php echo paginate_links( $args ) ?>

Default Arguments:

<?php 
    $args = array(
    'base' => '%_%',
    'format' => '?page=%#%',
    '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' => ''
); 
?>

Visit This page to learn more about arguments.

Example:

Following script returns numbered page navigation in list (li) format.

<!-- Paging Start -->
<div class="paging">
<ul>
    <?PHP
        global $wp_query;
        $big = 999999999; // need an unlikely integer
        $args = array(
            'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
            'format' => '?page=%#%',
            'total' => $wp_query->max_num_pages,
            'current' => max( 1, get_query_var( 'paged') ),
            'show_all' => false,
            'end_size' => 3,
            'mid_size' => 2,
            'prev_next' => True,
            'prev_text' => __('&laquo; Previous'),
            'next_text' => __('Next &raquo;'),
            'type' => 'list',
            );
        echo paginate_links($args);
    ?>
    </ul>
</div>
<!-- // Paging End -->

You can add this script in files (index.php, archives, tag.php, category.php, *****-loop.php, etc..) at the end of the page or after loop finishes or search for posts_nav_link at the page which will look similar to code below. Put the script after the code line below or replace the code line below with above script.

<div style="text-align:center;">
<?php posts_nav_link(' &#183; ', 'previous page', 'next page'); ?>
</div>

 

Adding CSS style:

Use CSS below to add style into numbered page navigation or customize the CSS to your theme color and schema.

.paging ul {
	float:right;
}
.paging ul li {
	float:left;
	margin:0px 0px 2px 0px;
}
.paging ul li a{
	background-color:#000;
	color:#FFF;
	padding:7px 11px 7px 11px;
	font-size:12px;
	border:solid 2px #000;
	margin-left:1px;
}
.paging ul li .current, .paging ul li .dots  {
	background-color:#FFF;
	color:#000;
	padding:7px 11px 7px 11px;
	font-size:12px;
	border:solid 2px #000;
	margin-left:1px;
}
.paging ul li a:hover {
	background-color:#333;
}

References:

• paginate_links

Also, this post provides some very good CSS styles for numbered page navigation.

Conclusion:

Finally, By using paginate_links funciton, you should have numbered page navigation without any plugins in your theme.