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; ?>