Simple way to create WordPress Pagination without plugin! Pagination with numbers and CSS style, easy way with example and live demo.

How to Create WordPress Pagination

Using the_posts_pagination() function, we will create pagination with numbers. Look to live demo in WP Time Blog.

Create WordPress Pagination

Firstly, we need this function to check if has posts navigation or not, copy the code and paste it in your “functions.php” file in your theme:

function is_posts_nav() {
    global $wp_query;
    return ($wp_query->max_num_pages > 1);
}

Now open your “index.php” file (or any file) in your theme and paste this code outside the WordPress loop:

<?php if ( is_posts_nav() ) : ?>
     <div class="wptime-pagination clear-fix">
         <?php
             // By Qassim Hassan | wp-time.com
             global $wp_query, $paged;
             if( $paged == 0 ){
                 $get_paged = 1;
             }else{
                 $get_paged = $paged;
             }
             $pagination_args = array("mid_size" => 3, "prev_text" => "&#171;", "next_text" => "&#187;" );
             the_posts_pagination($pagination_args);
         ?>
         <div class="total-pages">Page <?php echo $get_paged; ?> of <?php echo $wp_query->max_num_pages; ?></div>
     </div>
<?php endif; ?>

Pagination CSS Style

Copy this code and paste it in your “style.css” file:

/* Style by Qassim Hassan | wp-time.com */
.clear-fix:before, .clear-fix:after{
    content: "";
    display: table;
}

.clear-fix:after{
    clear: both;
}

.wptime-pagination{
    display:block;
    line-height:1.2;
}

.wptime-pagination h2{
    display:none;
}

.nav-links{
    font-size:0;
}

.nav-links span{
    display:inline-block;
    padding:3px 6px;
    background-color:#fff;
    color:#999;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:12px;
    margin-right:5px;
}

.nav-links span:last-child{
    margin-right:0;
}

.nav-links a{
    display:inline-block;
    padding:3px 6px;
    background-color:#e3802f;
    border:1px solid #e3802f;
    color:#fff;
    border-radius:4px;
    font-size:12px;
    margin-right:5px;
}

.nav-links a:last-child{
    margin-right:0;
}

.nav-links span.dots{
    border:0;
}

.nav-links{
    float:left;
}

.total-pages{
    float:right;
    font-size:12px;
    line-height:22px;
}

The result is:

wordpress pagination with numbers

Enjoy.