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 Create and get WordPress Custom Field

How to add post from frontend in wordpress without plugin

WordPress Websites Are SEO Friendly Or Not

How to get last insert id in WordPress

Tools:

Crypto Currency

PHPKIDA provides free online the best real-time crypto market price, news, predictions, index with graphs & historical data for 2000+ coins including bitcoin, ethereum, & altcoins from major cryptocurrency exchanges.

Visite Tool

Icon Generator

PHPKIDA provides free online icon generator. Our icon generator help you to edit, modify, resize and customize icon for your website and applications. Convert to a shap you like add icon border, you can change icon border color, border size, background color, icon shadow, icons color, icon size in your own way and save it as a png image.

Visite Tool

Youtube Video Downloader

PHPKIDA provides Free online YouTube video downloader to download YouTube videos quickly in MP4, 3GP, and more. Search your video and free fast download youtube videos.

Visite Tool

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.