Hi everyone I hope your doing well I have a issue on how to display the First/Next Page I manage to work the Previous/Next page but unfortunately I have no luck on how to display the First/Next Page. I'm hoping that anyone could help me out with this Thank you
This is how it should look like:
The code that I'm working on:
<div class="archive-post-outer">
<?php
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$args = array(
'post_type' => 'post',
'post_status'=>'publish',
'posts_per_page' => 5,
'paged' => $paged,
);
$the_query = new WP_Query($args);
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <div id="post-<?php //the_ID();?>" <?php //post_class();?> > -->
<a class="title" href="<?php echo get_permalink(); ?>"><h1><?php the_title();?></h1></a>
<p class="date"><?php echo get_the_date('Y.m.d'); ?></p>
<?php the_excerpt(); ?>
<div class="border"></div>
<?php endwhile; ?>
<div class="pagination">
<?php
echo paginate_links( array(
'format' => 'page/%#%',
'current' => $paged,
'prev_next' => true,
'end_size' => 1,
'mid_size' => 2,
'total' => $the_query->max_num_pages,
'mid_size' => 5,
'prev_text' => __('<svg xmlns="http://www.w3.org/2000/svg" width="10.376" height="14.681" viewBox="0 0 10.376 14.681">
<path id="prev" d="M6244.277,5437.944l-8.152,6.517,8.152,6.605" transform="translate(-6234.53 -5437.163)" fill="none" stroke="#707070" stroke-width="2"/>
</svg> Prev'),
'next_text' => __('Next <svg xmlns="http://www.w3.org/2000/svg" width="10.376" height="14.681" viewBox="0 0 10.376 14.681">
<path id="next" d="M6236.125,5437.944l8.152,6.517-8.152,6.605" transform="translate(-6235.496 -5437.163)" fill="none" stroke="#707070" stroke-width="2"/>
</svg>')
) );
?>
</div>
<?php endif; ?>
</div>
Thank You
Related
I have a custom post type in WordPress and on the archive page, I want to add pagination.
I have the following code, but when I click on page 2 or 'next', it reloads page 1.
My first thought was it should be added before wp_reset_postdata(). But that displayed the links alongside every post.
What am I missing, please?
<!-- custom query for village life posts -->
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 6,
'post_type' => 'villagelife',
'orderby' => 'post_date',
'order' => 'ASC',
'paged' => $paged,
);
$villagelifeArchive = new WP_Query( $args );
while ( $villagelifeArchive->have_posts() ) {
$villagelifeArchive->the_post();
?>
<div class="grid-item">
<div class="grid-item-wrapper">
<div class="grid-item-container">
<?php if ( has_post_thumbnail() ) : ?>
<div class="grid-image-top">
<span class="centered project-image-bg"><a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'archive-village-life-image' ); ?></a>
</span>
</div>
<?php endif; ?>
<div class="grid-item-content">
<span class="item-title"><?php the_title(); ?></span>
<span class="item-category"><?php echo get_the_term_list( $post->ID, 'village-life-category', '', ', ', ' ' ); ?></span>
<span class="item-excerpt"><?php echo wp_trim_words( get_the_content(), 18 ); ?></span>
<?php echo '<a class="button ast-button more-info" href=' . get_the_permalink() . '>Read More..</a>'; ?>
</div>
</div>
</div>
</div>
<?php
}
wp_reset_postdata();
$total_pages = $villagelifeArchive->max_num_pages;
print_r( $total_pages );// give me 2 ..the correct answer.
if ( $total_pages > 1 ) {
$current_page = max( 1, get_query_var( 'paged' ) );
?>
<div>
<?php
echo paginate_links(
array(
'base' => get_pagenum_link( 1 ) . '%_%',
'format' => '/page/%#%',
'current' => $current_page,
'total' => $total_pages,
)
);
?>
</div>
<?php
}
?>
I am currently unable to help with your issue, but I have got the php I use for pagination.
Add the below to your functions.php file
<?php
function og_pagination() {
global $wp_query;
$big = 999999999;
$links = paginate_links(
array(
'base' => str_replace( $big, '%#%', html_entity_decode( get_pagenum_link( $big ) ) ),
'current' => max( 1, get_query_var( 'paged' ) ),
'total' => $wp_query->max_num_pages,
'mid_size' => 5,
'prev_next' => true,
'prev_text' => '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="14px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M9.7,18.3L9.7,18.3c0.39-0.39,0.39-1.02,0-1.41L5.83,13H21c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H5.83l3.88-3.88 c0.39-0.39,0.39-1.02,0-1.41l0,0c-0.39-0.39-1.02-0.39-1.41,0L2.7,11.3c-0.39,0.39-0.39,1.02,0,1.41l5.59,5.59 C8.68,18.68,9.32,18.68,9.7,18.3z"/></svg>',
'next_text' => '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="14px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M14.29,5.71L14.29,5.71c-0.39,0.39-0.39,1.02,0,1.41L18.17,11H3c-0.55,0-1,0.45-1,1v0c0,0.55,0.45,1,1,1h15.18l-3.88,3.88 c-0.39,0.39-0.39,1.02,0,1.41l0,0c0.39,0.39,1.02,0.39,1.41,0l5.59-5.59c0.39-0.39,0.39-1.02,0-1.41L15.7,5.71 C15.32,5.32,14.68,5.32,14.29,5.71z"/></svg>',
'type' => 'array',
)
);
if ( $links ) {
echo '<div class="pagination">';
echo '<ul>';
foreach ( $links as $link ) {
printf( '<li>%s</li>', str_replace( '/page/1', '', $link ) );
}
echo '</ul>';
echo '</div>';
}
}
I have this code down below, showing 16 posts and on the next page the next 16 but right now it's not getting new posts on the second + page. It is showing the same first 16 that it shows on the first page. I don't know where I went wrong and why its not communicating with the while loop?
$cat = get_the_category();
$cat_name = esc_html($cat[0]->name);
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => $cat_name,
'posts_per_page' => 16,
'paged' => $paged,
'orderby' => 'date',
'order' => 'DESC',
'offset' => 5
);
$all_catPosts = null;
$all_catPosts = new WP_Query($args);
if ($all_catPosts->have_posts()) {
?>
<!-- 16 category container with the next page pagination button -->
<div class="min-h-screen flex items-center justify-center">
<div class="grid grid-cols-4">
<?php
while ($all_catPosts->have_posts()): $all_catPosts->the_post();?>
<div class="p-5 rounded big_cat_container">
<!-- // all content, title, meta fields-->
<section><a class="thumbnail_img" href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></section>
<h4 class="post_title"><?php the_title();?></h4>
</div>
<?php endwhile;?>
</div><!--/ end of grid-->
<!-- //pagination buttons -->
<?php
$previousLink = get_previous_posts_link();
$nextLink = get_next_posts_link();
$hasNextPage = $previousLink || $nextLink;
if ($hasNextPage):?>
<nav class="pagination" role="navigation">
<?php if($previousLink || $paged > 1 ) { ?>
<div class="page-btn nav-next">
<button class="previous-btn"><?php previous_posts_link( 'Previous Page', ); ?></button>
</div>
<?php }
if($nextLink) { ?>
<div class="page-btn nav-previous">
<button class="next-btn">
<?php next_posts_link( 'Next Page ', $the_query->max_num_pages );?>
</button>
</div>
<?php } ?>
</nav>
<?php endif;?>
<!-- end pagination -->
</div><!--/ end of container-->
<?php } ?>
<?php
// clean up after the query and pagination
wp_reset_postdata();
?>
<?php
$cat = get_the_category();
$cat_name = esc_html($cat[0]->name);
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => $cat_name,
'posts_per_page' => 16,
'paged' => $paged,
'orderby' => 'date',
'order' => 'DESC',
'offset' => 5
);
$all_catPosts = null;
$all_catPosts = new WP_Query($args);
if ($all_catPosts->have_posts()) {
?>
<!-- 16 category container with the next page pagination button -->
<div class="min-h-screen flex items-center justify-center">
<div class="grid grid-cols-4">
<?php
while ($all_catPosts->have_posts()): $all_catPosts->the_post();?>
<div class="p-5 rounded big_cat_container">
<!-- // all content, title, meta fields-->
<section><a class="thumbnail_img" href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></section>
<h4 class="post_title"><?php the_title();?></h4>
</div>
<?php endwhile;?>
</div><!--/ end of grid-->
<!-- //pagination buttons -->
<?php
$previousLink = get_previous_posts_link();
$nextLink = get_next_posts_link();
$hasNextPage = $previousLink || $nextLink;
if ($hasNextPage):?>
<nav class="pagination" role="navigation">
<?php if($previousLink || $paged > 1 ) { ?>
<div class="page-btn nav-next">
<button class="previous-btn"><?php previous_posts_link( 'Previous Page', ); ?></button>
</div>
<?php }
if($nextLink) { ?>
<div class="page-btn nav-previous">
<button class="next-btn">
<?php next_posts_link( 'Next Page ', $all_catPosts->max_num_pages );?>
</button>
</div>
<?php } ?>
</nav>
<?php endif;?>
<!-- end pagination -->
</div><!--/ end of container-->
<?php } ?>
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
// the query
$the_query = new WP_Query( array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 16,
'paged' => $paged
);
if ( $the_query->have_posts() ) :
// the loop
while ( $the_query->have_posts() ) : $the_query->the_post();
the_title();
endwhile;
// next_posts_link() usage with max_num_pages.
next_posts_link( __( 'Older Entries', 'textdomain' ), $the_query->max_num_pages );
previous_posts_link( __( 'Newer Entries', 'textdomain' ) );
// Clean up after the query and pagination.
wp_reset_postdata();
else:
?>
<p><?php _e( 'Sorry, no posts matched your criteria.', 'textdomain' ) ); ?></p>
<?php
endif;
I created a custom post type 'Team' which contains all our team members and some information for each person. I added a shortcode that renders a block with our Spotify-list and a picture of someone with headphones.
The picture is taken from the field 'team_foto_met_koptelefoon', but not everyone has this pictures set. I now want to loop only through the people (posts) that have a picture set in that field and ignore the others so everytime the page is reloaded, the Spotify-block is rendered but every time with a different picture.
I almost got it to work, but sometimes the block disappears, I think because he doesn't show the block if there is no picture set.
function dfib_team_spotify_shortcode( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'team',
'posts_per_page' => 1,
'order' => 'ASC',
'meta_key' => 'team_foto_met_koptelefoon',
'meta_value' => ' ',
'meta_compare' => '!=',
'orderby' => 'rand',
) );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<?php if( get_field('team_foto_met_koptelefoon') ): ?>
<div class="block__spotify">
<div class="block__spotify__inner" <?php if( get_field('team_foto_met_koptelefoon') ): ?> style="background-image: url(<?php the_field('team_foto_met_koptelefoon'); ?>);"<?php endif; ?>>
<h3 class="block__spotify--title">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
<g id="Group_1223" data-name="Group 1223" transform="translate(-1147 -1547.002)">
<g id="Group_1159" data-name="Group 1159" transform="translate(1147 1547.002)">
<path id="Path_779" data-name="Path 779" d="M59.555,188.083a30,30,0,1,0,30,30A30,30,0,0,0,59.555,188.083Zm13.758,43.27a1.869,1.869,0,0,1-2.571.622C63.7,227.67,54.83,226.7,44.388,229.083a1.869,1.869,0,0,1-.833-3.645c11.428-2.613,21.23-1.489,29.138,3.344A1.87,1.87,0,0,1,73.313,231.353Zm3.671-8.169a2.34,2.34,0,0,1-3.217.77c-8.062-4.956-20.356-6.391-29.894-3.5a2.338,2.338,0,1,1-1.36-4.475c10.9-3.306,24.441-1.705,33.7,3.986A2.339,2.339,0,0,1,76.984,223.184Zm.317-8.506c-9.67-5.743-25.621-6.271-34.853-3.469a2.806,2.806,0,1,1-1.629-5.37c10.6-3.217,28.213-2.6,39.346,4.013a2.806,2.806,0,0,1-2.864,4.826Z" transform="translate(-29.555 -188.083)" fill="#fff"/>
</g>
</g>
</svg>
luister naar</br> onze favoriete songs
</h3>
<div class="spotify--player">
<h2>#favoritetunes</h2>
<p>geniet van onze karaktervolle muzieklijst</p>
<iframe src="https://open.spotify.com/embed/playlist/6AZ1LZ8PKbkXkoBopPWDqM" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="spotify--img">
<?php if( get_field('team_foto_met_koptelefoon') ): ?>
<img src="<?php the_field('team_foto_met_koptelefoon'); ?>">
<?php endif; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php endwhile;
wp_reset_postdata(); ?>
<?php
$myvariable = ob_get_clean();
return $myvariable;
}
?>
<?php }
$args = array(
'post_type' => 'team',
'post_status' => 'publish',
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page' => -1,
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'team_foto_met_koptelefoon',
'compare' => 'EXISTS'
)
),
);
$team_foto_met_koptelefoon = get_posts($args);
_e("<pre>");
print_r($team_foto_met_koptelefoon); //Your posts
_e("</pre>");
My pagination function shows in my index page , but when call function in a custom Template page (page-news.php) it don't show !!
functions.php
function numbering_pagination() {
global $wp_query;
$all_pages = $wp_query->max_num_pages;
$current_page = max(1,get_query_var('paged'));
if ($all_pages >1) {
return paginate_links(array(
'base' => get_pagenum_link() . '%_%',
'format' => 'page/%#%',
'current' => $current_page,
'mid_size' => 3,
'end_size' => 3,
'prev_text' => 'السابق',
'next_text' =>'التالي'
));
}
}
page-news.php
<?php /* Template Name: news */
get_header(); ?>
<div id="fh5co-blog-section" class="fh5co-section-gray">
<div class="container">
<div>
<div class="text-center heading-section animate-box">
<h3>news</h3>
</div>
</div>
</div>
<div class="container">
<div class="row row-bottom-padded-md">
<?php
$args = array(
'post_type' => 'post',
'category_name'=> 'news'
);
$posts = new WP_Query( $args );
while( $posts->have_posts() ):
$posts->the_post();
?>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="fh5co-blog animate-box">
<img src="<?php the_post_thumbnail_url('full')?>" alt="" />
<div class="blog-text">
<div class="prod-title">
<h3><?php the_title()?></h3>
<span class="posted_by"><?php the_time('F jS, Y'); ?></span>
<p><?php the_content('<span class="read-more"> ... more</span>'); ?></p>
</div>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_query();
?>
</div>
</div>
<!-- ------ pagination ------ -->
<div class="pagination-numbers text-center">
<?php echo numbering_pagination() ?>
</div>
<!-- ------ END News ------ -->
How can I solve this?
From the WordPress codex:
<?php
//Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$args = array(
'posts_per_page' => 5,
'category_name' => 'gallery',
'paged' => $paged,
);
$the_query = new WP_Query( $args );
?>
<!-- the loop etc.. -->
AND:
<?php
$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
) );
?>
Mind the:
'total' => $the_query->max_num_pages
Also see: https://codex.wordpress.org/Function_Reference/paginate_links
I'm setting up a blog listings template for a site with multiple parent pages, and I need this page template to be used across the site, various pages will require there own blog listings page. Calling relevant posts depending on the Parent category.
i.e:
Food (Site Homepage)
Food Blog (Listings page for all Food related posts)
Fruit (Parent page)
Fruit Blog (Listings page for all Fruit related posts)
Veg (Parent page)
Veg Blog (Listings page for all Veg related posts)
My problem is that the posts per correct parent category aren't being called. I'm getting all posts.
I've set my code up like this: Many thanks in advance.
<div id="bloglistings">
<?php wp_reset_query(); ?>
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$current_cat = intval( get_query_var('cat') );
$args = array(
'post_type' => 'post',
'paged' => $paged,
'posts_per_page' => 6,
'order' => 'DESC',
'orderby' => 'ID',
);
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) : ?>
<div class="row">
<?php $count=0; ?>
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="span6">
<div class="media feature one">
<a class="pull-left" href="<?php the_permalink(); ?>">
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail', array('class' => 'img-circle')); ?>
<img class="hoverimage" src="<?php echo get_template_directory_uri(); ?>/img/icon-read-bloglistings.png" alt="">
</a>
<div class="media-body">
<h2><?php the_title(); ?></h2>
<p class="date"><?php the_time('F j, Y'); ?></p>
<p><?php
$my_excerpt = get_the_excerpt();
if ( $my_excerpt != '' ) {
// Some string manipulation performed
}
echo $my_excerpt; // Outputs the processed value to the page
?>
</p>
</div>
</div>
</div>
<?php $count++; ?>
<?php if ($count==2 ||$wp_query->found_posts==0) :
echo '</div><div class="row">';
?>
<?php $count=0; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<h2>Sorry but there are no posts.</h3>
<?php endif; ?>
<!-- PAGINATION -->
<div class="pagination">
<ul>
<li>
<?php
$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' => $wp_query->max_num_pages,
) );
?>
</li>
</ul>
</div>
<?php wp_reset_query(); ?>
</div><!-- /.row -->
</div><!--/bloglistings-->
Try adding the category to the query.
Replace this:
$args = array(
'post_type' => 'post',
'paged' => $paged,
'posts_per_page' => 6,
'order' => 'DESC',
'orderby' => 'ID',
);
with
$args = array(
'post_type' => 'post',
'category__in' => array( $current_cat ),// category was missing here
'paged' => $paged,
'posts_per_page' => 6,
'order' => 'DESC',
'orderby' => 'ID',
);