Custom pagination in wordpress

In this section we will learn custom pagination.
Just paste the PHP code where you want the pagination to appear and the CSS code inside your style.css (or wheren you want to write ) file (in your theme directory), and that’s it ! You can view the result on your custom page template where you want to use.

put this code inside your theme's functions.php file

<?php 

function pagination($pages = '', $range = 4)
{
    $showitems = ($range * 2)+1;

    global $paged;
    if(empty($paged)) $paged = 1;

    if($pages == '')
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages)
        {
            $pages = 1;
        }
    }

    if(1 != $pages)
    {
        echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
        if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
            }
        }

        if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
        echo "</div>\n";
    }
}
        ?>

call function where you want to display

     <?php    /**********call function where you want to display***********/
         if (function_exists("pagination")) {
          pagination($custom_query->max_num_pages); }
        ?> 

Here is loop of fetch post

<?php

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
  'posts_per_page' => 4,
  'paged' => $paged
);
$custom_query = new WP_Query( $args );
?>

<main id="main" class="site-main" role="main">

<?php
   while($custom_query->have_posts()) :
      $custom_query->the_post();
?>
       <div>
        <ul>
         <li>
           <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
        <div>
          <ul>
        <div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
          </ul>
          <ul>
        <p><?php echo the_content(); ?></p>
          </ul>
        </div>
        <div>
          </li>
        </ul>
          </div> <!-- end blog posts -->
       <?php endwhile; ?>
      <?php if (function_exists("pagination")) {
          pagination($custom_query->max_num_pages);
      } ?>
</main>

Paste this on your stylesheet 

 

<style>
    /* Pagination */
.pagination {
   clear:both;
   position:relative;
   font-size:11px; /* Pagination text size */
   line-height:13px;
   float:right; /* Pagination float direction */
}
.pagination span, .pagination a {
   display:block;
   float:left;
   margin: 2px 2px 2px 0;
   padding:6px 9px 5px 9px;
   text-decoration:none;
   width:auto;
   color:#fff; /* Pagination text color */
   background: #555; /* Pagination non-active background color */
   -webkit-transition: background .15s ease-in-out;
   -moz-transition: background .15s ease-in-out;
   -ms-transition: background .15s ease-in-out;
   -o-transition: background .15s ease-in-out;
   transition: background .15s ease-in-out;
}
.pagination a:hover{
   color:#fff;
   background: #6AAC70; /* Pagination background on hover */
}
.pagination .current{
   padding:6px 9px 5px 9px;
   background: #6AAC70; /* Current page background */
   color:#fff;
}
</style> 

Here is full code of page template:

  <?php
/**
* Template Name: Custom Page
*/
get_header(); ?>
<style>
    /* Pagination */
.pagination {
   clear:both;
   position:relative;
   font-size:11px; /* Pagination text size */
   line-height:13px;
   float:right; /* Pagination float direction */
}
.pagination span, .pagination a {
   display:block;
   float:left;
   margin: 2px 2px 2px 0;
   padding:6px 9px 5px 9px;
   text-decoration:none;
   width:auto;
   color:#fff; /* Pagination text color */
   background: #555; /* Pagination non-active background color */
   -webkit-transition: background .15s ease-in-out;
   -moz-transition: background .15s ease-in-out;
   -ms-transition: background .15s ease-in-out;
   -o-transition: background .15s ease-in-out;
   transition: background .15s ease-in-out;
}
.pagination a:hover{
   color:#fff;
   background: #6AAC70; /* Pagination background on hover */
}
.pagination .current{
   padding:6px 9px 5px 9px;
   background: #6AAC70; /* Current page background */
   color:#fff;
}
</style>



<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
  'posts_per_page' => 4,
  'paged' => $paged
);
$custom_query = new WP_Query( $args );
?>
          <!----start-------->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
   while($custom_query->have_posts()) :
      $custom_query->the_post();
?>
       <div>
        <ul>
         <li>
           <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
        <div>
          <ul>
        <div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
          </ul>
          <ul>
        <p><?php echo the_content(); ?></p>
          </ul>
        </div>
        <div>
          </li>
        </ul>
          </div> <!-- end blog posts -->
       <?php endwhile; ?>
      <?php if (function_exists("pagination")) {
          pagination($custom_query->max_num_pages);
      } ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
          <!----end-------->
        <?php get_footer();?>
        <?php 

        /***************************Put this function in functions.php ***********/
        function pagination($pages = '', $range = 4)
{
    $showitems = ($range * 2)+1;

    global $paged;
    if(empty($paged)) $paged = 1;

    if($pages == '')
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages)
        {
            $pages = 1;
        }
    }

    if(1 != $pages)
    {
        echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
        if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
            }
        }

        if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
        echo "</div>\n";
    }
}
        ?>