WordPress – Numbered Page Navigation Without Any Plugins

Numbered page navigation is not available in WordPress features. WordPress, instead uses (Previous Page/Post – Next Page/Post) navigation style. However; there are a number of plug-ins for this solution and some are listed below.

• Zamango Page Navigation
  • Zamango Page Navigation creates pagebar on lists (for example, 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 plugin is based on a core page number function called paginate_links.

The easiest way to create numbered page navigation is to use the paginate_links WordPress function which requires an array of parameters and returns an 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

The 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 the 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 function, you should have numbered page navigation without any plugins in your theme.

The post WordPress – Numbered Page Navigation Without Any Plugins appeared first on Noor Ahmad Feroozi.