'How to display next and previous pagination wordpress

i want to add next and previous button on my wordpress custom pagination when click next then the previous button does not appear, as well as the previous button and how to give limit page number if the page number is 8 then before ".." same as the screenshoot .

i want display like this have button next and previous

enter image description here

this is my custom function pagination.php

<?php
function pagination($pages = '', $range = 2)
{  
     $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='page-navigation red spaced'>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

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

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

and this template pagination

<div class="page-navigation red spaced">
    <!-- CONTROL PREVIOUS -->
    <div class="slider-control big control-previous">
      <!-- ARROW ICON -->
      <svg class="arrow-icon medium">
        <use xlink:href="#svg-arrow-medium"></use>
      </svg>
      <!-- /ARROW ICON -->
    </div>
    <!-- /CONTROL PREVIOUS -->
    <a href="#" class="page-navigation-item">1</a>
    <a href="#" class="page-navigation-item active">2</a>
    <a href="#" class="page-navigation-item">3</a>
    <a href="#" class="page-navigation-item">...</a>
    <a href="#" class="page-navigation-item">8</a>
    <!-- CONTROL PREVIOUS -->
    <div class="slider-control big control-next">
      <!-- ARROW ICON -->
      <svg class="arrow-icon medium">
        <use xlink:href="#svg-arrow-medium"></use>
      </svg>
      <!-- /ARROW ICON -->
    </div>
    <!-- /CONTROL PREVIOUS -->
  </div>
phpwordpress


Solution 1:[1]

This code works in archive page. Just change total and current args for another usage

<div class="pageinate">
                <?php 
                    global $wp_query;
                    
                    echo paginate_links( array(
                        'base'         => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
                        'total'        => $wp_query->max_num_pages,
                        'current'      => max( 1, get_query_var( 'paged' ) ),
                        'format'       => '?paged=%#%',
                        'show_all'     => false,
                        'type'         => 'plain',
                        'end_size'     => 2,
                        'mid_size'     => 1,
                        'prev_next'    => true,
                        'prev_text'    => sprintf( '<', __( 'Newer Posts', 'text-domain' ) ),
                        'next_text'    => sprintf( '>', __( 'Older Posts', 'text-domain' ) ),
                        'add_args'     => true,
                        'add_fragment' => '',
                    ) );
                ?>
            </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohammad Yousefi

Related Questions