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' => __( '← Previous', 'ct' ), 'next_text' => __( 'Next →', '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
Not working for me.
Any error warning?