Are you tied of the default “prev/next” post navigation for your wordpress blog? Then you may be using a third plugin to add numeric pagination. And here I am going to tell you how to manually add this feature to your wordpress theme.

Code Snippet for numeric pagination

This is the main function code. Put it in your theme-directory/functions.php or a child-theme/functions.php. (We recommend the child theme)

/**
 * Add Numeric Pagination to your wordpress theme
 *
 * http://clonetemplates.com/codex/add-numeric-pagination-wordpress.html/
 */
function ct_paging_nav() {
	// Don't print empty markup if there's only one page.
	if ( $GLOBALS['wp_query']->max_num_pages < 2 ) {
		return;
	}

	$paged        = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
	$pagenum_link = html_entity_decode( get_pagenum_link() );
	$query_args   = array();
	$url_parts    = explode( '?', $pagenum_link );

	if ( isset( $url_parts[1] ) ) {
		wp_parse_str( $url_parts[1], $query_args );
	}

	$pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
	$pagenum_link = trailingslashit( $pagenum_link ) . '%_%';

	$format  = $GLOBALS['wp_rewrite']->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
	$format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit( 'page/%#%', 'paged' ) : '?paged=%#%';

	// Set up paginated links.
	$links = paginate_links( array(
		'base'     => $pagenum_link,
		'format'   => $format,
		'total'    => $GLOBALS['wp_query']->max_num_pages,
		'current'  => $paged,
		'mid_size' => 1,
		'add_args' => array_map( 'urlencode', $query_args ),
		'prev_text' => __( '&larr; Previous', 'ct' ),
		'next_text' => __( 'Next &rarr;', 'ct' ),
	) );

	if ( $links ) :

	?>
	<nav class="navigation paging-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'ct' ); ?></h1>
		<div class="pagination loop-pagination">
			<?php echo $links; ?>
		</div><!-- .pagination -->
	</nav><!-- .navigation -->
	<?php
	endif;
}

And you may want to add some beautiful styles to our pagination. Put it in your styling file like style.css.

/* Assistive text */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	left: 5px;
	top: 5px;
	text-decoration: none;
	text-transform: none;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}
/* Paging Navigation */

.paging-navigation {
	border-top: 5px solid #000;
	margin: 48px 0;
}

.paging-navigation .loop-pagination {
	margin-top: -5px;
	text-align: center;
}

.paging-navigation .page-numbers {
	border-top: 5px solid transparent;
	display: inline-block;
	font-size: 14px;
	font-weight: 900;
	margin-right: 1px;
	padding: 7px 16px;
	text-transform: uppercase;
}

.paging-navigation a {
	color: #2b2b2b;
}

.paging-navigation .page-numbers.current {
	border-top: 5px solid #24890d;
}

.paging-navigation a:hover {
	border-top: 5px solid #41a62a;
	color: #2b2b2b;
}

Usage:

Put following piece of code to where you want to display the post navigation.

<?php ct_paging_nav();?>

 

Credit: This function is ripped off the default TwentyFourteen theme