ControlledChaos of Controlled Chaos Design
8/9/2016 - 6:48 PM

Use numeric pagination in WordPress archive pages.

Use numeric pagination in WordPress archive pages.

<?php
	
function ccd_numeric_pagination() {

	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;
	}
	
	if ( is_home() ) {
		$pages_title = __( 'Post Archive Page:', '$theme_slug' );
	} elseif ( is_category() ) {
		$pages_title = single_cat_title( '', false ) . __( ' Archive Page:', '$theme_slug' );
	} elseif ( is_tag() ) {
		$pages_title = '"' . single_tag_title( '', false ) . __( ' Archive Page:', '$theme_slug' );
	} elseif ( is_tax() ) {
		$pages_title = '"' . single_term_title( '', false ) . __( ' Archive Page:', '$theme_slug' );
	} else {
		$pages_title = __( 'Archive Page:', '$theme_slug' );
	}

	echo '<nav class="numeric-pagination">
		<p>' . $pages_title . '</p>
		<ul>' . "\n";

	/*	Previous Post Link */
	if ( get_previous_posts_link() )
		printf( '<li class="pagination-arrow">%s</li>' . "\n", get_previous_posts_link( '< Prev' ) );

	/*	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>&hellip;</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>&hellip;</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-arrow">%s</li>' . "\n", get_next_posts_link( 'Next >' ) );

	echo '</ul></nav>' . "\n";

}

?>

Numeric Pagination

WordPress Snippet

Use numeric pagination in WordPress archive pages.

Example: < Prev 1 2 3 ... Next >

Call function in theme files (index, home, archive etc.).

<?php ccd_numeric_pagination(); ?>