Customize “the_posts_pagination” and put list instead div



I need help with my custom "the_posts_pagination"

I’m looking to get this :

enter image description here

voila what I did :

in the functions.php, I’ve add this code :

function wp_custom_pagination($args = [], $class = 'pagination') {
    if ($GLOBALS['wp_query']->max_num_pages <= 1) return;

    $args = wp_parse_args( $args, [
            'mid_size'                   => 2,
            'prev_next'                  => false,
            'prev_text'                  => __('Older posts', 'textdomain'),
            'next_text'                  => __('Newer posts', 'textdomain'),
            'screen_reader_text' => __('Posts navigation', 'textdomain'),

    $links       = paginate_links($args);
    $next_link = get_previous_posts_link($args['next_text']);
    $prev_link = get_next_posts_link($args['prev_text']);
    $template    = apply_filters( 'navigation_markup_template', '
    <div class="col-auto">
        <a href="" class="btn btn-outline-white text-dark">%3$s</a>
    <div class="col-auto">
        <nav class="navigation %1$s" role="navigation">
                <h2 class="screen-reader-text">%2$s</h2>
                <ul class="nav-links pagination mb-0 text-dark">
                    <li class="page-item">%4$s</li>
    <div class="col-auto">
        <a href="" class="btn btn-outline-white text-dark">%5$s</a>
    </div>', $args, $class);

    echo sprintf($template, $class, $args['screen_reader_text'], $prev_link, $links, $next_link);}

After, I’ve add this code in my home.php

<?php the_posts_pagination( wp_custom_pagination () ); ?>

But, the result is really not what I want!

Here is the html structure code that I would need for this wp_custom_pagination :

            <div class="row justify-content-between align-items-center">
              <div class="col-auto">
                <a href="#" class="btn btn-outline-white text-dark">Previous</a>
              <div class="col-auto">
                  <ul class="pagination mb-0 text-dark">
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
              <div class="col-auto">
                <a href="#" class="btn btn-outline-white text-dark">Next</a>

If anyone could help me and tell me and show me my mistakes and how to get what I want please.
Thanks a lot

GilbertOOl 2 months 0 Answers 8 views 0

Leave an answer