Numeric Pagination in WordPress

How to Add Numeric Pagination in Your WordPress Theme instead of Older Post

One of my friends asked me how do I add numeric pagination in my personal blog, actually, he liked my blog’s numeric pagination style.

WordPress default themes not come with numeric pagination and many other themes display pagination links by adding Older posts and Newer Posts links at the bottom of your WP post or archive page. However, there are so many WordPress sites that used numeric pagination, like mhferdous, RawCoder etc. From our experience, numeric pagination is more user-friendly, attractive, and SEO friendly. Now a days, most of the theme using numeric pagination. If you want to create custom WP Theme or your theme don’t have numeric pagination, this article is perfect for you. I will show you how to add numeric pagination in your WordPress theme. The codes replaces default Older posts and Newer Posts to numeric pagination.

There are too many methods to adding numeric pagination in your WordPress sites/themes. You can manually add numeric pagination without relying on a third party plugin or use third party plugin. First I’ll show the manual method. The second method is to use an existing third party plugin to add numeric pagination.

Manually Adding Numeric Pagination in Your WordPress Sites/Themes

This will benefit our advanced users and users who are learning Theme Development or want to do this without relying on a third party plugin. Let’s get started by adding the following code in your theme’s functions.php file.

function rc_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="rc-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";

}

Now, 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 rc_numeric_posts_nav(); ?>

You’re done. 🙂

Now just need beautification. Add the following CSS in your theme’s style.css file.

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

.rc-navigation li {
	display: inline;
}

.rc-navigation li a,
.rc-navigation li a:hover,
.rc-navigation li.active a,
.rc-navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

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

Everything complete, just change the color in CSS based on your theme color and have fun. 🙂

If you don’t want to write code or new in WordPress, then you should read our second method “Adding Numeric Pagination in WordPress using Plugin (WP-PageNavi)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.