Jayesh Patel
Filed under - Development, Web Designer Help, WordPress, WordPress Plugins
No Comments so far. Add yours now

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:

Selec All Code:
<?php echo paginate_links( $args ) ?>

Default Arguments:

Selec All Code:
<?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.

Selec All Code:
<!-- 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' => __('« Previous'),
            'next_text' => __('Next »'),
            'type' => 'list',
            );
        echo paginate_links($args);
    ?>
    </ul>
</div>
<!-- // Paging End -->

You can add this script in files (index.php, archives, tag.phpcategory.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.

Selec All Code:
<div style="text-align:center;">
<?php posts_nav_link(' · ', 'previous page', 'next page'); ?>

Adding CSS style:

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

Selec All Code:
.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:

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.

Leave your comment

You must be logged in to post a comment.

Share IT © 2017. All rights reserved.