Wordpress add class to pagination link - wordpress

I have a pagination in my wordpress and I want to add a custom pagination here I want to add a custom class to generated link.
I am using this code to generate custom pagination:
function wpbeginner_numeric_posts_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 '<ul class="pagination">' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link("") );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s>%s</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>%s</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>%s</li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link("") );
echo '</ul>' . "\n";
}
Here in this code I want to add a class to generated link for that I am doing this:
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link("") );
In this code I want to generate a link like this:
<li></li>
I don't know what do I need to pass in this case.

What you'll want to do is use the filter next_posts_link_attributes. This will allow you to add attributes to the links themselves as they are generated
add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');
function posts_link_attributes() {
return 'class="add-your-class-here"';
}
source: https://developer.wordpress.org/reference/hooks/next_posts_link_attributes/

Related

How to apply custom style for pagination in WordPress?

Can you help me to apply custom style for pagination in my WordPress website? Here's the code of html, I use bootstrap 4
https://jsfiddle.net/h51Lyt9c/
I tried this function which I got from wpbeginner, but it doesn't working!
function b8ak_numeric_posts_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 class="col-12 d-flex justify-content-between align-items-center mb-5"><ul class="list-unstyled d-inline m-0">' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="blog-page__pagination list-inline-item border rounded-circle"' : '';
printf( '<li%s>%s</li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
if ( ! in_array( 2, $links ) )
echo '<li class="blog-page__pagination list-inline-item border rounded-circle">…</li>';
}
/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="blog-page__pagination list-inline-item border rounded-circle"' : '';
printf( '<li%s class="blog-page__pagination list-inline-item border rounded-circle"><a class="text-dark d-block px-3 py-2 text-decoration-none" 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="blog-page__pagination list-inline-item border rounded-circle"' : '';
printf( '<li%s class="blog-page__pagination list-inline-item border rounded-circle"><a class="text-dark d-block px-3 py-2 text-decoration-none" href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li class="blog-page__pagination list-inline-item border rounded-circle">%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}
Then I echoed the function in the archive.php page to show the pagination
<?php b8ak_numeric_posts_nav(); ?>
Actually I don't know where's the problem of applying my custom css style to WordPress pagination, can anyone help me to apply the custom style to pagination? Thank you for your help.

Add "1,2,3.." Pagination to WordPress on homepage

I have "Newer and Older" links but I want pagination like 1, 2, 3...
I added a link, ul to code and it looks like good, but it is just link to "page1", "page2".. without any functionality
Image
Thank for any advice :) Peter
Try the below code to add pagination like 1,2,3..etc
function my_numeric_posts_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 class="navigation"><ul>' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s>%s</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>%s</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>%s</li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}

Page-Nav not working after set exclude tag query for CPT

I created a Custom Post Type to set a library of fictions + documents on my site.
And then I want to hide the document genre from the post list by a little query to exclude slug "document" from my CPT archive page.
<?php
/*exclude slug "document" from CPT*/
$args = array(
'post_type' => array( 'stfic' ),
'tax_query' => array(
array(
'taxonomy' => 'stfic-genre',
'field' => 'slug',
'terms' => 'document',
'operator' => 'NOT IN'
)
)
);
$extquery = new WP_Query( $args );
/*exclude slug "document" from CPT*/
while( $extquery->have_posts() ): $extquery->the_post(); ?>
//Do The stuff
<?php endwhile; ?>
<?php umica_pagi() ?>
but after that, my pagination below not working (added in functions.php):
/*------------------Them Pagination-----------------*/
function umica_pagi() {
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 class="st3-pagi"><ul>' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link('<i class="fa fa-arrow-left"></i> Trang trước') );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s>%s</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>%s</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>%s</li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link('Trang Sau <i class="fa fa-arrow-right"></i>') );
echo '</ul></div>' . "\n";
}
What did I do wrong?
In your pagination function you use global $wp_query object to grab max_num_pages for pagination, but if you want to paginate your custom query, maybe this number is wrong?
I suggest you to modify your pagination function, if you want to paginate your custom query, to get one max parameter:
function umica_pagi( $max = false ) {
...
if ( ! $max ) {
$max = intval( $wp_query->max_num_pages );
}
...
}
And then you can call your function like this:
<?php umica_pagi( $extquery->max_num_pages ); ?>
I had similar issue and this helps me then.
But if you want to paginate here not your custom query, but main query, you must call wp_reset_postdata() before calling pagination function, to restore global objects.

How to paginate the user result page in Wordpress

This is my code anyone can please help me how to add pagination in user results page?
if (!empty($users)){
foreach($users as $user){
$user = get_userdata($user->ID);
<div class="wg_rec_dashboard_img">
<?php $wg_front_dp = get_user_meta($user->ID, 'wg_dp', true);?>
<img src="<?php echo $wg_front_dp; ?>">
</div>
<div class="wg_rec_username">
<?php echo $user->first_name; ?>
</div>
I have tried Wordpress' built-in pagination but its not working here.
You can use following;
<?php
$number = 50; // Update this according to your needs. Users perpage
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset = ($paged - 1) * $number;
$users = get_users();
$query = get_users('&offset='.$offset.'&number='.$number);
$total_users = count($users);
$total_query = count($query);
$total_pages = intval($total_users / $number) + 1;
// Iterate perpage users
foreach($query as $q){
$user = get_userdata($q->ID);
?>
<div class="wg_rec_dashboard_img">
<?php $wg_front_dp = get_user_meta($user->ID, 'wg_dp', true);?>
<img src="<?php echo $wg_front_dp; ?>">
</div>
<div class="wg_rec_username">
<?php echo $user->first_name; ?>
</div>
<?php } ?>
// Pagination part
<?php
if ($total_users > $total_query) {
?>
<div id="pagination" class="clearfix">
<span class="pages">Pages:</span>
<?php
$current_page = max(1, get_query_var('paged'));
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%/',
'current' => $current_page,
'total' => $total_pages,
'prev_next' => false,
'type' => 'list',
));
?>
</div>
Place this code in your theme's function.php (you can style the page navigation with CSS as you prefer):
The PHP:
if (!function_exists('_numeric_posts_nav')) {
function _numeric_posts_nav() {
global $wp_query;
/** Stop execution if there's if it is single past/page or only 1 page */
if( is_singular() ) return;
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 class="navigation"><ul>' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s>%s</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>%s</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>%s</li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}
}
The CSS:
div.navigation ul li{list-style:none;list-style-type:none;display:inline;padding:4px 4px;margin:4px 4px;border:1px solid #ccc;background-color:#eaeaea}
div.navigation ul li.active{background-color:#FC0;border:1px solid #C60}
Now, use the function in your template file like this:
if (function_exists('_numeric_posts_nav')) { _numeric_posts_nav(); }
It will display pagination if number of posts are greater that 10

Wordpress: How to add pagination to page

I have 6 posts in Wordpress. I'm trying to display last 5 posts on page. Here is my code:
<?php
/*
Template Name: Posts Template
*/
?>
//header...
<?php $the_query = new WP_Query( array('showposts' => 5, 'post_type' => 'post')); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<h1><?php echo the_title(); ?></h1>
<?php endwhile; ?>
<?php posts_nav_link(); ?>
//footer
Pagination shows me that there is 4 pages, but like I said I have only 6 posts, so how it is possible? Also Pagination seems to not work correctly, doesn't matter on what page I am, it shows always last 5 posts.
Any idea what am I doing wrong?
Try adding a paged parameter to your query. You can also have a read of the documentation on the topic, there are some examples. Oh, and it's probably more forward-looking to use posts_per_page instead of showposts.
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query( array(
'posts_per_page' => 5,
'post_type' => 'post',
'paged' => $paged
));
Add this code to functions.php
function posts_nav_link( $query_object, $show_previous_posts_link = false, $show_next_posts_link = false ) {
if( is_singular() )
return;
/** Stop execution if there's only 1 page */
if( $query_object->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $query_object->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 class="navigation"><ul>' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() && $show_previous_posts_link)
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s>%s</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>%s</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>%s</li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() && $show_next_posts_link )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}
And use posts_nav_link($the_query):
<?php
/*
Template Name: Posts Template
*/
?>
//header...
<?php $the_query = new WP_Query( array('showposts' => 5, 'post_type' => 'post')); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<h1><?php echo the_title(); ?></h1>
<?php endwhile; ?>
<?php posts_nav_link($the_query); ?>
//footer

Resources