Wordpress paginate_links - how to customise its html?

Question

With this WP code below:

echo paginate_links(array(
    'base' => get_pagenum_link(1) . '%_%',
    'format' => '/page/%#%',
    'current' => $current_page,
    'total' => $total_pages,
    'prev_text'    => __('«'),
    'next_text'    => __('»'),
));

I will get this HTML:

<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://xxx/page/2'>2</a>
<a class='page-numbers' href='http://xxxx/page/3'>3</a>
<a class="next page-numbers" href="http://xxx/page/2">»</a>

But how can I customise it so I can get:

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Any ideas?

Answer 1

I'm using the new Bootstrap V5 and I'm using this function to render the pagination section:

/**
 *
 * Shows the pagination numbers of the blog posts
 *
 */

function mb_render_posts_pagination($pages = '', $range = 2)
{
  global $wp_query;
  global $paged;

  $showitems = ($range * 2) + 1;
  if (empty($paged)) {
    $paged = 1;
  }

  $pages = $wp_query->max_num_pages;
  if ($pages == '' || !$pages) {
    $pages = 1;
  }

  // Show the pagination section if we have more than one page
  if (1 != $pages) {
    echo '<nav aria-label="..."><ul class="pagination">';

    if ($paged > 2 && $paged > $range + 1 && $showitems < $pages) {
      echo "<li><a href='" . get_pagenum_link(1) . "'>&laquo;</a></li>";
    }

    if ($paged > 1 && $showitems < $pages) {
      echo "<li><a href='" . get_pagenum_link($paged - 1) . "'>&lsaquo;</a></li>";
    }

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

    if ($paged < $pages && $showitems < $pages) {
      echo "<li><a href='" . get_pagenum_link($paged + 1) . "'>&rsaquo;</a></li>";
    }

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

    echo "</ul></nav>";
  }
}

Answer 2

Although this method doesn't work just by passing the arguments but can be tweaked to match your requirement.

On your functions.php

function yourtheme_paging_nav() {

if( is_singular() )
    return;

global $wp_query;

/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages <= 1 )
    return;

$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max   = intval( $wp_query->max_num_pages );

/** Add current page to the array */
if ( $paged >= 1 )
    $links[] = $paged;

/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
    $links[] = $paged - 1;
    $links[] = $paged - 2;
}

if ( ( $paged + 2 ) <= $max ) {
    $links[] = $paged + 2;
    $links[] = $paged + 1;
}

echo '<div><ul class="your-class">' . "\n";

/** Previous Post Link */
if ( get_previous_posts_link() )
    printf( '<li><a href="%s"><spanclass"prev-class"></span></a></li>' . "\n", get_previous_posts_page_link() );

/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
    $class = 1 == $paged ? ' class="active"' : '';

    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

    if ( ! in_array( 2, $links ) )
        echo '<li>…</li>';
}

/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
    $class = $paged == $link ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}

/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
    if ( ! in_array( $max - 1, $links ) )
        echo '<li>…</li>' . "\n";

    $class = $paged == $max ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}

/** Next Post Link */
if ( get_next_posts_link() )
    printf( '<li><a href="%s"><span class="next-class"></span></a></li>' . "\n", get_next_posts_page_link() );

echo '</ul></div>' . "\n";
}

Now you can simply call news_paging_nav() where you want to display pagination links.

Answer 3

If you want Simple Unordered List(ul) tag wrap with navigation(nav) without same classes on tags, you can use the below code :

$pagination = paginate_links(array(
                    'base' => get_pagenum_link(1) . '%_%',
                    'format' => '/page/%#%',
                    'current' => $current_page,
                    'total' => $total_pages,
                    'prev_text'    => __('«'),
                    'next_text'    => __('»'),
                    'type' => 'list'
                ));
echo "<nav>".$pagination."</nav>";

By this you will get this HTML:

<nav>
        <ul class="page-numbers">
                <li><span class="page-numbers current">1</span></li>
                <li><a class="page-numbers" href="http://xxx/page/2">2</a></li>
                <li><a class="page-numbers" href="http://xxx/page/3">3</a></li>
                <li><a class="next page-numbers" href="http://xxx/page/2">»</a></li>
        </ul>
</nav>

OR you can refer this link.