How to Add Pagination on Your WordPress

Today I am going discuss about WordPress pagination. Do you may know that pagination is an important factor to show your WordPress blog post. In this article an trying to describe two type of pagination, normal pagination and numbering pagination.

Normal Pagination

Normal pagination show that pagination which show only “Previous post” and “Next post”.

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older
posts') ); ?></div><div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span
class="meta-nav">&rarr;</span>') ); ?></div>

For normal pagination use this code after your post query. Then your post-loop.php look like this:

<?php if(have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>        
 
                        <div class="single_post">
   
                          <h2><a href="<?php
the_permalink(); ?>"><?php the_title();
?></a></h2>
                            <div class="post_info">
   
                              Posted In: <?php the_category(', ');
?> | Posted on: <?php the_time('M d, Y') ?> <?php
comments_popup_link('No Comment', '1 Comment', '% Comments'); ?>
                            </div>
 
                            <div class="post_content">
   
                              <a href="<?php the_permalink();
?>"><?php the_post_thumbnail('post-image', array('class' =>
'post-thumb')); ?></a>
                                <?php the_content(); ?>
                            </div>
                        </div>
 
                    <?php endwhile; ?>    
                    <?php endif; ?>
//This is pagination code
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older
posts') ); ?></div><div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span
class="meta-nav">&rarr;</span>') ); ?></div>

Now show pagination in your site without style. You can give style easily using class .left_full_column and .right_full_column or taking this code in your style.css

.left_full_column {width:45%;float:left;margin-right:5%}
.right_full_column {width:45%;float:right;margin-left:5%}

Take this code in your style.css then you can see normal pagination. You can customize this easily.

Numbering Pagination

Numbering pagination is that pagination which show number including “previous post ” and “next post” or only show number. From this visitor get idea how many post have their.  Let’s go for use this pagination.
Taking this code in your theme functions.php

</pre>
function rrf_numeric_posts_nav() {

if( is_singular() )
return;

global $wp_query;

/** Stop execution if there’s only 1 page */
if( $wp_query->max_num_pages <= 1 )
return;

$paged = get_query_var( ‘paged’ ) ? absint( get_query_var( ‘paged’ ) ) : 1;
$max = intval( $wp_query->max_num_pages );

/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;

/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged – 1;
$links[] = $paged – 2;
}

if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}

echo ‘<div class=”navigation”><ul>’ . “n”;

/** Previous Post Link */
if ( get_previous_posts_link() )
printf( ‘<li>%s</li>’ . “n”, get_previous_posts_link() );

/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ‘ class=”active”‘ : ”;

printf( ‘<li%s><a href=”%s”>%s</a></li>’ . “n”, $class, esc_url( get_pagenum_link( 1 ) ), ’1′ );

if ( ! in_array( 2, $links ) )
echo ‘<li>…</li>’;
}

/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ‘ class=”active”‘ : ”;
printf( ‘<li%s><a href=”%s”>%s</a></li>’ . “n”, $class, esc_url( get_pagenum_link( $link ) ), $link );
}

/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max – 1, $links ) )
echo ‘<li>…</li>’ . “n”;

$class = $paged == $max ? ‘ class=”active”‘ : ”;
printf( ‘<li%s><a href=”%s”>%s</a></li>’ . “n”, $class, esc_url( get_pagenum_link( $max ) ), $max );
}

/** Next Post Link */
if ( get_next_posts_link() )
printf( ‘<li>%s</li>’ . “n”, get_next_posts_link() );

echo ‘</ul></div>’ . “n”;

}

&nbsp;
<pre>

Taking this code in your style.css for styling you numbering pagination. You can also style this pagination by customizing this css .

 .navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
color: ‪#‎fff‬;
text-decoration:none;
}

.navigation li {
display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: ‪#0000cd‬;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
background-color: ‪#‎3C8DC5‬;
}

Now add this code where you want to show pagination.

<?php rrf_numeric_posts_nav(); ?>

If you want show in post, you can use this after post-loop or post query. Like if you want show in page you can use this after page query.