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";
}
Related
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.
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/
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.
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
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