I'm using the code below to display in a custom page, a list with posts from a certain category. I would like to add pagenation at the bottom, but until now, I fail.
Any way to add it somehow?
<?php $cat_id = 22;
$cat_link = get_category_link( $cat_id );
$cat_name = get_cat_name($cat_id); ?>
<div class="catrecent">
<?php $query = new wp_query();
$query->query('showposts=1&cat=' . $cat_id);
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
<div class="recenttitle">
<h2 class="catidtxt"> <?php echo ($cat_name); ?></h2>
<h2 class="recentposttitle"><?php the_title(); ?></h3>
</div>
<div class="recentpostwrap">
<?php the_post_thumbnail( 'catlarge' ); ?>
<?php the_content_limit(600,""); ?>
</div>
<?php endwhile; else: ?><?php endif; ?><?php wp_reset_query(); ?>
</div>
<ul class="posts_list">
<?php $query = new wp_query();
$query->query('offset=1&showposts=4&cat=22&paged=' . $cat_id);
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
<li>
<?php the_post_thumbnail( 'catmed' ); ?>
<?php the_title(); ?>
</li>
<?php endwhile; else: ?><?php endif; ?><?php wp_reset_query(); ?>
</ul>
Useful links: http://codex.wordpress.org/Function_Reference/paginate_links, http://codex.wordpress.org/Making_Custom_Queries_using_Offset_and_Pagination
Try something like this
<ul class="posts_list">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$ppp = 4;
$offset = 1;
//Manually determine page query offset (offset + current page (minus one) x posts per page)
$page_offset = $offset + ( ($paged - 1) * $ppp );
$query = new wp_query(array(
'offset' => $page_offset,
'posts_per_page' => $ppp,
'cat' => $cat_id,
'paged' => $paged
));
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
<li>
<?php the_post_thumbnail( 'catmed' ); ?>
<?php the_title(); ?>
</li>
<?php endwhile; else: ?><?php endif; ?>
</ul>
<?php
// pagination
$big = 999999999; // need an unlikely integer
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'total' => ceil(($query->found_posts - $offset) / $ppp),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
));
wp_reset_query();
?>
Related
I'm new to Wp and I'm trying to developing my first theme. After I add the paginations to my archive page the category filter doesn't work anymore (probably because I override the WP Query).
What shoud I put in the query in order to see only the posts of the category that is clicked? (if I don't put anything wp do the magic) but without the query the pagination doesn't work.
This is the archive.php
<?php
get_header(); ?>
<?php
if ( have_posts() ) : ?>
<header class="page-header no-image">
<?php
the_archive_title( '<h1 class="page-title u-text-center">', '</h1>' );
?>
</header><!-- .page-header -->
<?php get_template_part( 'template-parts/filter-category' ); ?>
<?php
/*QUERY:
This is the problem if I move the query from there the category works but
If I leave the query the pagination doesn't have the post_per_page argument to take and doesn't work...
*/
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type'=>'post',
'post_status'=>'publish',
'posts_per_page' => 6,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
/*END QUERY*/
?>
<div id="blogpost-list" class="container">
<div class="row blogpost-wrapper">
<?php
/* Start the Loop */
$i = 1;
while ( $wp_query->have_posts() ) : $wp_query->the_post();?>
<?php if ($i % 3 == 0): ?>
<div class="blogpost-item-grid">
<!-- some stuff to display the post.. doesn't really matter-->
<?php get_template_part( 'template-parts/content-post-preview-large' ); ?>
</div>
<?php else: ?>
<div class="blogpost-item-grid">
<!-- some stuff to display the post doesn't really matter -->
<?php get_template_part( 'template-parts/content-post-preview' ); ?>
</div>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile;?>
</div>
</div>
<?php get_template_part( 'template-parts/pagination' ); ?>
<?php
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
<?php
get_footer();
Here the code that I use for the pagination:
<?php //Require a wp->query ?>
<div class="container-fluid">
<div class="pagination-wrapper">
<?php
$pag_args = array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $wp_query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => sprintf( '<img class="icn icn-small" src="' . get_template_directory_uri() .'/assets/images/icn-chevron-left.svg"/>'),
'next_text' => sprintf( '<img class="icn icn-small" src="' . get_template_directory_uri() .'/assets/images/icn-chevron-right.svg"/>'),
'add_args' => false,
'add_fragment' => '',
);
echo paginate_links($pag_args);
?>
</div>
</div>
SOLVED:
Add this to get the category
get_header();
$catID = get_queried_object_id();
Pass that to the query:
$args = array(
[...]
'cat' => $catID
);
$wp_query = new WP_Query( $args );
The problem is that you are not using your $wp_query variable after its instanciation.
Your while loop should look like this:
while ( $wp_query->have_posts() ) : $wp_query->the_post();?>
/*Your inner code here*/
<?php endwhile;?>
You can create the category.php file if it' not exists. Then Inside your file
<?php
get_header();
$catID = get_queried_object_id();
?>
<?php
if ( have_posts() ) : ?>
<header class="page-header no-image">
<?php
the_archive_title( '<h1 class="page-title u-text-center">', '</h1>' );
?>
</header><!-- .page-header -->
<?php get_template_part( 'template-parts/filter-category' ); ?>
<?php
/*QUERY:
This is the problem if I move the query from there the category works but
If I leave the query the pagination doesn't have the post_per_page argument to take and doesn't work...
*/
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type'=>'post',
'post_status'=>'publish',
'posts_per_page' => 6,
'cat' => $catID,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
/*END QUERY*/
?>
<div id="blogpost-list" class="container">
<div class="row blogpost-wrapper">
<?php
/* Start the Loop */
$i = 1;
while ( $wp_query->have_posts() ) : $wp_query->the_post();?>
<?php if ($i % 3 == 0): ?>
<div class="blogpost-item-grid">
<!-- some stuff to display the post.. doesn't really matter-->
<?php get_template_part( 'template-parts/content-post-preview-large' ); ?>
</div>
<?php else: ?>
<div class="blogpost-item-grid">
<!-- some stuff to display the post doesn't really matter -->
<?php get_template_part( 'template-parts/content-post-preview' ); ?>
</div>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile;?>
</div>
</div>
<?php get_template_part( 'template-parts/pagination' ); ?>
<?php
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
<?php
get_footer();
I'm trying to make a category template in which, first post is displayed with full text + big thumbnail (as featured) and then posts with titles only + a smaller thumbnail.
I've managed (with help) to do this with two queries, but first post remains the same on each page, won't change, as also, the loop won't adopt the offset of first page into other pages too.
Code is here:
<?php $cat_link = get_category_link( $cat_id );
$cat_name = get_cat_name($cat_id);
$cat_id = 22; ?>
<?php $latest_cat_post = new WP_Query( array('posts_per_page' => 1, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post(); ?>
<div class="catrecent">
<div class="recenttitle">
<h2 class="catidtxt"> <?php echo ($cat_name); ?></h2>
<h2 class="recentposttitle"><?php the_title(); ?></h3>
</div>
<?php if( has_post_thumbnail() ) { ?>
<div class="recentpostwrap">
<?php the_post_thumbnail( 'thumbcatbig' ); ?>
<?php the_content_limit(588,""); ?>
<div class="readrecent">
<?php _e("more", "mm"); ?>
</div>
</div>
<?php } else { ?>
<div class="holder no-thumb-big">
<?php the_content_limit(798,""); ?>
<div class="more">
<?php _e("more", "mm"); ?>
</div>
</div>
<?php } ?>
<?php endwhile; else: ?><?php endif; ?><?php wp_reset_query(); ?>
</div>
<ul class="catlist-recent">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$ppp = 7;
$offset = 1;
$cat_id = '22,27,29';
//Manually determine page query offset (offset + current page (minus one) x posts per page)
$page_offset = $offset + ( ($paged - 1) * $ppp );
$query = new wp_query(array(
'offset' => $page_offset,
'posts_per_page' => $ppp,
'cat' => $cat_id,
'paged' => $paged
));
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
<li class="catlist-recentpost">
<?php the_post_thumbnail( 'thumbcatsmall' ); ?>
<?php the_title(); ?>
<div class="catlist-recentposttxt"> <?php the_content_limit(300, ''); ?></div>
</li>
<?php endwhile; else: ?><?php endif; ?>
</ul>
<div class="cat-pagenate">
<?php
// pagination
$big = 999999999; // need an unlikely integer
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'total' => ceil(($query->found_posts - $offset) / $ppp),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
));
wp_reset_query();
?>
</div>
Any help appreciated!
Try
$query = new wp_query(array(
'offset' => $page_offset,
'number' => $ppp,
'cat' => $cat_id,
'page' => $paged
));
Note the change from "paged" to "page"
<?php query_posts('showposts=5&post_type=html5-blank'); ?>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" class="clearfix" <?php post_class(); ?>>
//Loop Here
<!-- /Article -->
<?php endwhile; ?>
<nav>
<?php previous_posts_link('« Newer') ?>
<?php next_posts_link('Older »') ?>
</nav>
<?php
$wp_query = null;
$wp_query = $temp; // Reset
?>
I get a Page doesn't exist error on my pagination link.
Result link is: www.mywebsite.com/blog/page/2/
This is a blog page. I have edited the loop code.
HELP.........
I encountered similar problem for my homepage (index.php) which list the posts. I keep getting a page not found. The instruction in https://codex.wordpress.org/Pagination got www.domain.com/page/2/ working for me.
First remove the query_posts part from the template files (index.php, category.php)
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3, 'paged' => $paged );
query_posts($args);
Then add the below in your functions.php
function my_post_queries( $query ) {
// do not alter the query on wp-admin pages and only alter it if it's the main query
if (!is_admin() && $query->is_main_query()){
// alter the query for the home and category pages
if(is_home()){
$query->set('posts_per_page', 3);
}
if(is_category()){
$query->set('posts_per_page', 3);
}
}
]
add_action( 'pre_get_posts', 'my_post_queries' );
Note: Both HTML5 Blank Theme and Underscore Theme gave me 404 errors for pagination. The above solution got pagination working for both themes.
I rather would use WP_Query and use the paged pagination parameter. Read more about this here: WP_Query#Pagination_Parameters
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$loop = new WP_Query(
array(
'post_type' => 'html5-blank',
'posts_per_page' => 5,
'paged'=>$paged
)
);
?>
<?php if ($loop->have_posts()): while ($loop->have_posts()) : $loop->the_post(); ?>
<article id="post-<?php the_ID(); ?>" class="clearfix" <?php post_class(); ?>>
//Loop Here
<!-- /Article -->
<?php endwhile; endif; ?>
<nav>
<?php previous_posts_link('« Newer') ?>
<?php next_posts_link('Older »') ?>
</nav>
Please let me know :)
Second example:
global $post;
global $paged, $wp_query;
$args = array( 'posts_per_page' => 5, 'post_type' => 'html5-blank', 'paged' => $paged );
$myposts = get_posts( $args );
foreach( $myposts as $post ) :
setup_postdata($post);
// loop
the_title(); // or what it is needed inside the loop
endforeach;
if ( $wp_query->max_num_pages > 1 ) :
previous_posts_link('« Newer');
next_posts_link('Older »');
endif;
<?php
global $wp_query;
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'html5-blank', //Post type
'posts_per_page' => 5, //How many post u want to display per page
'paged' => $paged
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
?>
<img src="<?=$url?>" width="350" height="350" class="thumbnail imageRight"/>
<h1><?php the_title(); ?></h1>
<p><?php the_excerpt(); ?></p>
<?php } } ?>
<div class="pagination">
<?php
global $wp_query;
$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
) );
?>
</div>
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; // setup pagination
$the_query = new WP_Query( array(
'post_type' => 'YOUR_POST_TYPE_NAME',
'paged' => $paged,
'posts_per_page' => 5)
);
while ( $the_query->have_posts() ) : $the_query->the_post();
// YOUR CODE
endwhile;
echo '<nav>';
echo '<div>'.get_next_posts_link('Older', $the_query->max_num_pages).'</div>'; //Older Link using max_num_pages
echo '<div>'.get_previous_posts_link('Newer', $the_query->max_num_pages).'</div>'; //Newer Link using max_num_pages
echo "</nav>";
wp_reset_postdata(); // Rest Data
Would you please try above code?
I have an events page which I would like to add pagination to. However, with it being a custom post type I am finding it rather difficult. I have managed to get pagination working for my news page, but I cannot get the same result for the events page. Here is my code for the events page
<?php
get_header();
get_sidebar('left');
?>
<article class="content-main events" role="main" id="post-<?php the_ID() ?>">
<?php include 'breadcrumbs.php'; ?>
<?php query_posts(array('posts_per_page'=>'2')); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="news-post">
<h1><?php the_title() ?></h1>
<?php the_excerpt() ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<!--Pagination-->
<?php echo paginate_links( $args ) ?>
<?php
global $wp_query;
$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
) );
?>
</article><!-- //.content-main -->
<?php
get_footer();
If I try to change this
<?php query_posts(array('posts_per_page'=>'2')); ?>
to this
<?php query_posts(array('category_name'=>'events','posts_per_page'=>'2')); ?>
This doesnt work either. However, if I remove the line altogether, it shows up the news post types. I am stumped!
Pagination for custom post types should work the same as normal posts.
If you take a look at the default theme TwentyEleven you can see how they do it.
Basically they use next_posts_link() and previous_posts_link() functions.
You can look at that in functions.php > twentytwelve_content_nav();
Cheers,
you need to add global $paged and then in your array that is being passed to WP_Query you need to add 'paged' => $paged
">
<?php
global $paged;
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query( array('post_type' => 'yourcustomepost','posts_per_page' => 2, 'paged' => $paged ) ); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="news-post">
<h1><?php the_title() ?></h1>
<?php the_excerpt() ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<!--Pagination-->
<?php echo paginate_links( $args ) ?>
<?php
global $wp_query;
$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
) );
?>
</article><!-- //.content-main -->
<?php
just replace below function in functions.php file
note: in backend setting->reading->post per page : set this value to one
function twentyeleven_content_nav( $html_id )
{
global $wpdb;
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo esc_attr( $html_id ); ?>">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
<div class="nav-previous">
<?php next_posts_link( __( ' Previous', 'twentyeleven' ) ); ?>
<?php
$count = $wpdb->get_var( "SELECT COUNT(*) FROM wp_posts where post_type='post' and post_content<>''" );
for($j=1;$j<=$count;$j++)
{
echo "<a href='?paged=$j'> $j < </a>";
}
?>
<?php previous_posts_link( __( 'Next', 'twentyeleven' ) ); ?>
</div>
</nav><!-- #nav-above -->
<?php endif;
}
I have created a custom page template (testimonials-page.php) and in that template I am
loading custom post type 'testimonials' using the following loop:
<?php query_posts(array(
'posts_per_page' => 5,
'post_type' => 'testimonials',
'orderby' => 'post_date',
'paged' => $paged
)
); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="quote">
<?php echo get_the_post_thumbnail($id, array($image_width,$image_height)); ?>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
How do I add pagination to that? I installed the WP Paging plugin, and while that plugin works
great when I call the pagination into category.php using:
<p><?php wp_paging(); ?></p>
Inserting the same thing into testimonial-page.php results in broken formatting and links that
404 on me.
Firstly, never EVER use query_posts unless your intention is to modify the default Wordpress Loop.
Instead, switch to WP Query.
Here's something I wrote for a theme I did for a client using all built-in Wordpress functions. It's been working pretty well for me so far, so I'll integrate it into your code as best as I can:
global $paged;
$curpage = $paged ? $paged : 1;
$args = array(
'post_type' => 'testimonials',
'orderby' => 'post_date',
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query($args);
if($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
?>
<div id="post-<?php the_ID(); ?>" class="quote">
<?php
echo get_the_post_thumbnail($post->ID, array($image_width,$image_height));
the_content();
?>
</div>
<?php
endwhile;
echo '
<div id="wp_pagination">
<a class="first page button" href="'.get_pagenum_link(1).'">«</a>
<a class="previous page button" href="'.get_pagenum_link(($curpage-1 > 0 ? $curpage-1 : 1)).'">‹</a>';
for($i=1;$i<=$query->max_num_pages;$i++)
echo '<a class="'.($i == $curpage ? 'active ' : '').'page button" href="'.get_pagenum_link($i).'">'.$i.'</a>';
echo '
<a class="next page button" href="'.get_pagenum_link(($curpage+1 <= $query->max_num_pages ? $curpage+1 : $query->max_num_pages)).'">›</a>
<a class="last page button" href="'.get_pagenum_link($query->max_num_pages).'">»</a>
</div>
';
wp_reset_postdata();
endif;
?>
Jan 2018 Edit:
Also consider using paginate_links, since it's also built into Wordpress, and has more robust options and capabilities.
Try this code for custom loop with pagination:
<?php
if ( get_query_var('paged') ) {
$paged = get_query_var('paged');
} elseif ( get_query_var('page') ) { // 'page' is used instead of 'paged' on Static Front Page
$paged = get_query_var('page');
} else {
$paged = 1;
}
$custom_query_args = array(
'post_type' => 'post',
'posts_per_page' => get_option('posts_per_page'),
'paged' => $paged,
'post_status' => 'publish',
'ignore_sticky_posts' => true,
//'category_name' => 'custom-cat',
'order' => 'DESC', // 'ASC'
'orderby' => 'date' // modified | title | name | ID | rand
);
$custom_query = new WP_Query( $custom_query_args );
if ( $custom_query->have_posts() ) :
while( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
<article <?php post_class(); ?>>
<h3><?php the_title(); ?></h3>
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<div><?php the_excerpt(); ?></div>
</article>
<?php
endwhile;
?>
<?php if ($custom_query->max_num_pages > 1) : // custom pagination ?>
<?php
$orig_query = $wp_query; // fix for pagination to work
$wp_query = $custom_query;
?>
<nav class="prev-next-posts">
<div class="prev-posts-link">
<?php echo get_next_posts_link( 'Older Entries', $custom_query->max_num_pages ); ?>
</div>
<div class="next-posts-link">
<?php echo get_previous_posts_link( 'Newer Entries' ); ?>
</div>
</nav>
<?php
$wp_query = $orig_query; // fix for pagination to work
?>
<?php endif; ?>
<?php
wp_reset_postdata(); // reset the query
else:
echo '<p>'.__('Sorry, no posts matched your criteria.').'</p>';
endif;
?>
Source:
WordPress custom loop with pagination