How to Show Next, Previous, and Page Numbers with wp_link_pages

Question

I want to modify the output of wp_link_pages.

Basically what I need is to show Previous and Next buttons and current page/total number of pages. I created the Previous and Next button. Now in between them I want to add a current page and the total pages number.

Here is my code

wp_link_pages( array(
    'before' => '<div class="page-links">' . __(''),
    'after' => '</div>',
    'next_or_number' => 'next',
    'nextpagelink' => __('Next'),
    'previouspagelink' => __('Previous'),
    'pagelink' => '%',
    'echo' => 1,
) );

I am not sure what to do. The effect I want to get is just like below image.

Answer 1

You are using the wrong function, please check this link https://codex.wordpress.org/Function_Reference/paginate_links

As you can see your code should be

global $wp_query;

$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,
  'next_text' => '<i class="fa fa-angle-right"></i>',
  'prev_text' => '<i class="fa fa-angle-left"></i>'
) );

if you are using a custom query with WP_Query() your code should be similar to:

$query_post = new WP_Query(array(
...
'paged' => get_query_var('paged'),
...
));


$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' => $query_post->max_num_pages,
  'next_text' => '<i class="fa fa-angle-right"></i>',
  'prev_text' => '<i class="fa fa-angle-left"></i>'
) );

Answer 2

+1 for Arturo's answer (I don't have enough rep to vote). I just used his solution on a project.

Here are some style rules to pretty it up a bit. This was with Elementor on Twenty-Twenty, so YMMV. Note that I added a div with the class name of custom-pagination-container around the pagination div.

<style>
.custom-pagination-container {
  display: flex;
}

.pagination {
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  order: 1;
  font-size: 15px;
}

.pagination a,
.pagination .current {
  margin: 0;
}

.pagination a:hover {
  background: none;
}

.pagination .next,
.pagination a,
.pagination .prev,
.pagination span {
  display: inline-block;
  float: none;
}

.pagination .dots {
  vertical-align: sub;
  margin-bottom: 0;
}