2

Hello everybody, I need help with my custom wordpress pagination.

I'm looking to get this :

enter image description here

This is 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>
    <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>
                </ul>
        </nav>
    </div>
    <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 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>
              <div class="col-auto">
                <nav>
                  <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>
                  </ul>
                </nav>
              </div>
              <div class="col-auto">
                <a href="#" class="btn btn-outline-white text-dark">Next</a>
              </div>
            </div>

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

Thanks a lot


At this time, this is the result that I obtain :

enter image description here

This is the generated code of my custom pagination page :

<div class="row justify-content-between align-items-center">
    <div class="col-auto">
        <a href="" class="btn btn-outline-white text-dark"></a>
        <a href="http://192.168.1.87/wordpress/blog/page/2">Older posts</a>
    </div>
    <div class="col-auto">
        <nav class="navigation pagination" role="navigation">
            <h2 class="screen-reader-text">Posts navigation</h2>
            <ul class="nav-links pagination mb-0 text-dark">
                <li class="page-item">
                    <span aria-current="page" class="page-numbers current">1</span>
                    <a class="page-numbers" href="http://192.168.1.87/wordpress/blog/page/2">2</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-auto">
        <a href="" class="btn btn-outline-white text-dark"></a>
    </div>
</div>

So, if you give a look at the result :

1 - You will see that the first link (Older post = %3$s) need to be enclosed with the good css class!

2 - And you'll see that the "1, 2, 3" links need to be inside each one "li" not inside one "li"

3
  • Actually, my first issue is to be able to obtain the link of "prev" and "next" to be able to place them in my <a href=""> tags
    – GilbertOOl
    Commented Dec 24, 2020 at 14:04
  • Is pagination code logic not working or is the look and feel of pagination design not coming up the way you want?
    – Awais
    Commented Dec 28, 2020 at 19:42
  • HI @Awais , no, actually, the look and feel of pagination design not coming up the way that I want ! I just have edited my post and I've add the result code and result image so you can see the real result of my custom pagination code!
    – GilbertOOl
    Commented Dec 29, 2020 at 0:20

2 Answers 2

3
+50

Making your Custom Pagination design In Demo According Your Need .

below function Replace Your Function:

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'                  => __('Previous', 'textdomain'),
        'next_text'                  => __('Next', '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']);
$check_prev = (!empty($prev_link))?$prev_link:'Previous';
$check_next = (!empty($next_link))?$next_link:'Next';
$template    = apply_filters( 'navigation_markup_template', '
<div class="container"><div class= "row"><div style="display: flex;justify-content: space-around; align-items: center;" class="paginatin d-flex justify-content-between align-items-center"><div class="col-auto">
    <button type="button" class="btn btn-outline-info" >%3$s</button>
</div>
<div class="col-auto">
    <nav class="navigation %1$s" role="navigation">
            <h2 class="screen-reader-text">%2$s</h2>
            <ul class="pagination mb-0 text-dark">
                <li class="page-item">%4$s</li>
            </ul>
    </nav>
</div>
<div class="col-auto">
   <button type="button" class="btn btn-outline-info">%5$s</button>
</div></div></div><div>', $args, $class);

echo sprintf($template, $class, $args['screen_reader_text'], $check_next, $links, $check_prev);

}

Add Some Css In Your Header :

function add_css_pagination(){
?>  
    <style type="text/css">
        span.page-numbers.current {
            background: #a8307c;
            color: white;
        }
        button.btn a {
            color: #f4f4f4;
            text-decoration: none;
        }
        button.btn.btn-outline-info a {
            color: darkslategrey;
            font-weight: 600;
        }
        button.btn.btn-outline-info {
            background: unset;
            border: 1px solid turquoise;
            color: darkslategrey;
            font-weight: 600;
        }
    </style>

 <?php
 }
 add_action('wp_head','add_css_pagination');

Screenshot:enter image description here

3
  • Can you explain what you've changed please?
    – Rup
    Commented Dec 30, 2020 at 15:21
  • Add some bootstrap class & css and new condition for next prev pagination in custom function
    – HK89
    Commented Dec 30, 2020 at 15:38
  • Thanks! It took me a bit of work because I had to modify my css but I admit that it works pretty well! The only negative point that I don't like too much is the "span + link" enclosed in a single "li" item, I would prefer to enclose it in two separate "li" but hey ... You have been my only solution for about a month so I give you the +50 bounty
    – GilbertOOl
    Commented Dec 30, 2020 at 23:23
1

Instead of the_posts_pagination( wp_custom_pagination () );, just use this function paginate_links and add args as per your requirements.

Sample:

$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' => $the_query->max_num_pages,
    'prev_text' => __( 'Previous' ),
    'next_text' => __( 'Next' ),
) );

Ref: https://developer.wordpress.org/reference/functions/paginate_links/

1
  • Sorry, but your answer does not answer my questions! In addition, what you offer is very simple and it's very basic! The structure of my pagniation is very complex and my example code above shows what I want to do! My question was " please tell me and show me my mistakes and how to get what I want please "
    – GilbertOOl
    Commented Dec 24, 2020 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.