Custom pagination design on wordpress

Question

now i'm doing wordpress project. i have my own template build with css and html format. the implementation is ok but i'm struggling to integrate WP pagination design to my template.

here's my template pagination code

<div class="page_wrap">
  <ul class="page_list">
    <li class="page_item_prev">
      <a href="column.html">
        <img src="static/images/common/icon_arrow_prev.svg" alt="<">
      </a>
    </li>
    <li class="page_item active">
      <a href="column.html">
        1
      </a>
    </li>
    <li class="page_item">
      <a href="column.html">
        2
      </a>
    </li>
    <li class="page_item">
      <a href="column.html">
        3
      </a>
    </li>
    <li class="dot">
      …
    </li>
    <li class="page_item">
      <a href="column.html">
        10
      </a>
    </li>
    <li class="page_item_next">
      <a href="column.html">
        <img src="static/images/common/icon_arrow_next.svg" alt="＞">
      </a>
    </li>
  </ul>
</div>

my template design pagination display like this

and this is how i'm implementing WP pagination. i also build a functions.php.

code on the template

<div class="page_wrap"> 
  <ul class="page_list"> 
    <?php list_pagination($loop); ?> 
  </ul>
</div>

code on functions.php

function list_pagination($loop)
{
    global $wp_query;
    $big = 99999999;
    $paged = paginate_links(array(
        'base'      => str_replace($big, '%#%', get_pagenum_link($big)),
        'format'    => '?paged=%#%',
        'currenct'  => max(1, get_query_var('paged')),
        'prev_next' => true,
        'prev_text' => __('<img src="'.get_template_directory_uri().'/static/images/common/icon_arrow_prev.svg" alt="＞">'),
        'next_text' => __('<img src="'.get_template_directory_uri().'/static/images/common/icon_arrow_next.svg" alt="＞">'),
        'type'      => 'list',
        'total'     => $loop->max_num_pages
    ));
    echo $paged;
}

result like this

and this is wrong.

can i adjust the WP pagination code to follow same as my design?

please help

Answer 1

Adjust your CSS to match the HTML code produced by the paginate_links() function.

• Previous Link: <a class="prev page-numbers"></a>
• Page Link: <a class="page-numbers"></a>
• Next Link: <a class="next page-numbers"></a>
• Current Page: <span class="page-numbers current"></span>

Add display: flex; to <ul class="page_list"></ul>

A more complex solution can be found in the Gist here.