jmccole83
1/15/2018 - 4:44 PM

Custom pagination

Add pagination.php to the bottom of index.php to include custom links. Remember to remove/comment out the existing pagination.

Edit the arguements in the array to customise the output.

@php global $wp_query @endphp
  @if ($wp_query->max_num_pages > 1)
    <nav class="post-nav">
      <div class="pager">
      @php

        $big = 999999999; // need an unlikely integer

        echo paginate_links( array(
          'base'        => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
          'format'      => '?paged=%#%',
          'current'     => max( 1, get_query_var('paged') ),
          'total'       => $wp_query->max_num_pages,
          'show_all'    => FALSE, //this will make paginate not to show all links.
          'end_size'    => 2, //will show 2 numbers on either the start and the end list edges.
          'mid_size'    => 1, //so that you won't have 1,2...,3,...,7,8
          'prev_text'   => '<span>Prev</span>',  //supports text and html
          'next_text'   => '<span>Next</span>'  //supports text and html
        ) );
      @endphp
      </div>
    </nav>
  @endif
<?php// the_posts_navigation(); ?>
    
<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?>
  <nav class="post-nav">
    <div class="pager">
        <?php

       $big = 999999999; // need an unlikely integer

       echo paginate_links( array(
            'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
            'format' => '?paged=%#%',
            'current' => max( 1, get_query_var('paged') ),
            'total' => $wp_query->max_num_pages,
            'show_all' => FALSE, //this will make paginate not to show all links.
            'end_size' => 2, //will show 2 numbers on either the start and the end list edges.
            'mid_size' => 1, //so that you won't have 1,2...,3,...,7,8
            'prev_text' => '<i class="mr-2 fas fa-chevron-left"></i>',  //supports text and html
	          'next_text' => '<i class="ml-2 fas fa-chevron-right"></i>'  //supports text and html
       ) );
       ?>
    </div>
  </nav>
<?php endif; ?>