WordPress Pagination

WordPress Pagination

WordPress has the ability to to split lists of posts into multiple pages for “paged” navigation. By default WordPress will show the pagination only when you have more then 10 posts. You can change this number on the Reading screen (wp-admin => Settings => Reading). The “Blog pages show at most” value in Reading Settings will be used by WordPress unless your theme have manually setup different values. When you use multiple loop in a theme template file then you only one loop (the main loop) can be paginated.

WordPress Theme Pagination

Themes that you will see in WordPress.org or themes which follows the strict guideline of WordPress, just uses simple pagination as “Older posts” and “Newer posts” to navigate to older and newer posts. The default WordPress theme “Twenty Thirteen” uses a simple pagination. If you want to use same pagination in your theme then first add the following code in functions.php

if ( ! function_exists( 'textdomain_paging_nav' ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 */
function textdomain_paging_nav() {
	global $wp_query;

	// Don't print empty markup if there's only one page.
	if ( $wp_query->max_num_pages < 2 )
		return;
	?>
	<nav class="navigation paging-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'textdomain' ); ?></h1>
		<div class="nav-links">

			<?php if ( get_next_posts_link() ) : ?>
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'textdomain' ) ); ?></div>
			<?php endif; ?>

			<?php if ( get_previous_posts_link() ) : ?>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'textdomain' ) ); ?></div>
			<?php endif; ?>

		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}
endif;

To add this in your templates, you will have to add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template.

<?php textdomain_paging_nav(); ?>

But you can also add full numeric pagination directly in your theme which you can see in advance theme framework “Genesis”. If you want to use same numeric pagination in your theme then first add the following code in functions.php

if ( ! function_exists( 'textdomain_content_query_nav' ) ) :
/**
 * Display numberic pagination when applicable
 */
function textdomain_content_query_nav( $nav_id ) {

	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 class="pagination-previous">%s</li>' . "\n", get_next_posts_link( '&#x000AB;' . __( 'Previous Page', 'textdomain' ) ) );
																										

	//* 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 class="pagination-omission">&#x02026;</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 class="pagination-omission">&#x02026;</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 class="pagination-next">%s</li>' . "\n", get_next_posts_link( __( 'Next Page', 'textdomain' ) . '&#x000BB;' ) );

	echo '</ul></div>' . "\n";
}
endif; // textdomain_content_query_nav

To add this in your templates, you will have to add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template.

<?php textdomain_content_query_nav(); ?>

WordPress Pagination Plugin

But if you are building custom theme or site then you don’t need to work on these complex coding. You can just replace these simple theme pagination to beautiful and easy to navigate numeric pagination with the help of plugins. You can take a look at the plugins WP-PageNavi and WP Page Numbers which add nice pagination to your WordPress site. Now a day, we also like infinite scroll pagination, for that you can add plugins like Jetpack by WordPress.com and Infinite-Scroll.

1 thought on “WordPress Pagination

Leave a Reply

Your email address will not be published. Required fields are marked *