how to create numeric pagination in your wordpress theme

In this article we are explaining how do we add numeric pagination on the WordPress Theme post and archive pages. Default WordPress themes and many other themes display pagination links by adding Older posts and Newer Posts links at the bottom of your WordPress post and archive pages. However, there are many WordPress sites that uses numeric pagination, like PHPKIDA.
The numeric pagination is more user friendly, attractive, and SEO friendly. Most advanced WordPress theme frameworks like Genesis comes with a built-in functionality for adding numeric pagination.

Here we are simply create a function, you just copy this code and past into your function.php file.

Create pagination

// Numeric Page Navi (built into the theme by default)
function pk_page_navi() {
  global $wp_query, $paged;
  $bignum = 999999999;
  if ( $wp_query->max_num_pages <= 1 )
    return;
  echo '<nav class="pagination">';
  echo paginate_links( array(
    'base'         => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
    'format'       => '',
    'current'      => max( 1, get_query_var('paged') ),
    'total'        => $wp_query->max_num_pages,
    'prev_text'    => '<i class="fa fa-chevron-left"></i>',
    'next_text'    => '<i class="fa fa-chevron-right"></i>',
    'type'         => 'list',
    'end_size'     => 3,
    'mid_size'     => 3
  ) );
  echo '</nav>';
} /* end page navi */

How to get or call pagination function

<?php pk_page_navi(); ?>

CSS code for pagination

/************************ Pagination **************************/

.pagination ul{}
.pagination ul li{display:inline;}

.pagination li a,.comment_navigation .page-numbers{
    padding:3px 8px; display:inline-block;
}

.pagination li a:hover,.pagination li a:focus,.comment_navigation a.page-numbers:hover,.comment_navigation a.page-numbers:focus{
  background-color: #d083cf; font-size: 20px; color:#FFFFFF; padding:3px 8px;
}

.pagination li a, .comment_navigation a.page-numbers, .page-links a {
   color: #d083cf; font-size: 20px;
}
.current{background-color: #d083cf; font-size: 20px; color:#FFFFFF; padding:3px 8px;}

.pagination li a:focus, .comment_navigation a.page-numbers:hover, .comment_navigation a.page-numbers:focus {
    background-color: #d083cf;
}

Leave a Reply

Related Posts: You may like

How to track contact form 7 form in salesforce without plugin

Contact Form 7 Redirect to Thank You Page

How to Validation Business Email in Contact Form 7 WordPress

How to Create and get WordPress Custom Field

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Download Instagram Videos & Photos.

Download Now

CURRENCY CONVERTER

Real Time Currency Converter

Convert Now

ROBOST.TXT GEN.

Robots.txt File Creater

Create Now

HTML MINIFIER

Compress yout HTML Code

Minify Now

CSS MINIFIER

Compress yout CSS Code

Minify Now

JAVASCRIPT MINIFIER

Compress yout JavaScript Code

Minify Now

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.