Hello everybody, I need help with my custom wordpress pagination.
I’m looking to get this :
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 :
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”
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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:
Method 2
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/
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0