I am displaying posts and posts are limited to 10. And for rest, I have created pagination.
I have used a the_posts_pagination function. I used with and without arguments but my pagination is not working. It's always displaying the same set of posts
Please help me out.
Here is my code with pagination function I used.
<div class="row">
<?php
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('cat=-1,-4,-12');
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="col-md-12">
<div class="single-blog-post">
<div class="blog-post-cat"><?php the_category(', '); // Separated by commas ?></div>
<h3><?php the_title(); ?></h3>
<div class="blog-meta"><?php the_time('F j, Y'); ?><?php the_author_posts_link(); ?></div>
<div class="blog-details">
<div class="row">
<div class="col-md-6">
<div class="blog-thumbnail">
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<!-- /post thumbnail -->
</div>
</div>
<div class="col-md-6">
<div class="blog-content">
<?php the_content(); ?>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php the_posts_pagination(); ?>
<?php wp_reset_postdata(); ?>
</div>
You need to add the paged parameter to your query based on the current page you are on. From what I can see in the above code, you're looping through the posts but don't have an offset so the posts are always starting from 0.
Check out the WP Query documentation.
<div class="row">
<?php
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query( 'cat' => '-1,-4,-12', 'paged' => get_query_var( 'paged' ) );
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="col-md-12">
<div class="single-blog-post">
<div class="blog-post-cat"><?php the_category(', '); // Separated by commas ?></div>
<h3><?php the_title(); ?></h3>
<div class="blog-meta"><?php the_time('F j, Y'); ?><?php the_author_posts_link(); ?></div>
<div class="blog-details">
<div class="row">
<div class="col-md-6">
<div class="blog-thumbnail">
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<!-- /post thumbnail -->
</div>
</div>
<div class="col-md-6">
<div class="blog-content">
<?php the_content(); ?>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php the_posts_pagination(); ?>
<?php wp_reset_postdata(); ?>
</div>
I've added the following to your query:
'paged' => get_query_var( 'paged' )
Try that out and it should display posts depending on the page you're currently on taking into account your actual query and arguments.
Related
to learn wordpress development, I'm building a wordpress theme from scratch .
Now i want to add pagination on my category page but the problem is:
when i click on older-post-link the url change from "http://localhost/wordpress4/category/bloc1/" to "http://localhost/wordpress4/category/bloc1/page/2/" but it take me to a blank page instead of showing the other posts.
this is the code on the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-6 text-left">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-6 text-right">
<?php previous_posts_link('Newer post >>'); ?>
</div>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
I noticed that if i add the code below to my index.php the pagination work also on the category page.
but the second category page("http://localhost/wordpress4/category/bloc1/page/2/") will take the markup of index.php so the posts will not be in a grid format like the first category page.
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
also on the category page the older post-link show up between rows instead of showing at the bottom of the pages.
finally this is the code on my index.php
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<h3><?php the_title(); ?></h3>
<small><?php the_category(); ?></small>
</a>
<p><?php the_content(); ?></p>
<hr/>
<?php endwhile;
endif;
?>
</div>
<div class="col-xs-12 col-sm-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Thank You.
Use this code, may be it will solve your problem
<?php
// the query to set the posts per page to 3
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3, 'paged' => $paged );
query_posts($args); ?>
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!-- rest of the loop -->
<!-- the title, the content etc.. -->
<?php endwhile; ?>
<!-- pagination -->
<div class="row">
<div class="col-xs-12>"
<div class="col-xs-6 text-left"><?php next_posts_link(); ?></div>
<div class="col-xs-6 text-right"><?php previous_posts_link(); ?></div>
</div>
</div>
<?php else : ?>
<!-- No posts found -->
<?php endif; wp_reset_postdata(); ?>
for more details, check this link https://codex.wordpress.org/Pagination
After a lot of searching i was able to find a solution .
The problem was that the The "Blog pages show at most" in the wordpress reading settings was interfering with the "posts_per_page=4" that i declared through the query_posts().
The solution :
I deleted the "query_posts()" because it is best to use the WP_Query() or the pre_get_posts filter.
for me even with using wp_query i couldnt get the pagination to work so i tried using the pre_get_posts filter and it worked .
so in the category.php i deleted the query_posts and used just the normal loop.
this is my new code in the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
if(have_posts()) :
while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-12 text-left ">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-12 text-right ">
<?php previous_posts_link('Newer post >>'); ?>
</div>
</div>
<?php
endif;
?>
</div>
<?php get_footer(); ?>
Then I added the pre_get_posts action on my function.php
this is the code:
add_action( 'pre_get_posts', function ( $q )
{
if ( !is_admin() // Very important, otherwise back end queries will be affected as well
&& $q->is_main_query() // Very important, we just need to modify the main query
&& $q->is_category() // Only target category pages
) {
$q->set( 'posts_per_page', 2 );
}
});
I hope my answer will help someone who have the same problem i had even if my answer is not so well explained.
for more info search for something like this:
using pagination with the wp_query
using pre_get_posts to set pagination for a custom page.
It will be so nice if a developer could explain my solution in more details and give us more information about using pre_get_posts to set pagination for a custom page.
I created my own template in WordPress, but the loop entries does not work. I would like to entries work on one of the subpages. I also added entries.
This is my code of my subpage. Please help me. I don't know what is wrong. I added a picture under the code.
<?php include 'header.php'; ?>
<main class="subpage-blog">
<div class="subpage-banner">
<div class="container">
<h3>BLOG SIDEBAR</h3>
<div class="breadcrumbs">
</div>
</div>
</div>
<aside class="side-menu col-md-4">
<div class="search">
<h4>Search blog</h4>
<input type="text" value="Search">
</div>
<!-- .search -->
<div class="categories">
<h4>Blog Categories</h4>
<ul class="categories-blog-ul">
<li>Inspirtation</li>
<li>Work</li>
<li>Tech</li>
<li>Creative</li>
</ul>
</div>
<!--.categories-->
<div class="recent-posts">
<h4>Recents posts</h4>
<ul>
</ul>
</div>
<!-- .recent-posts-->
<div class="tags-spot">
<h4>Tags</h4>
<div class="tag"></div>
</div>
<!-- .tags-spot-->
</aside>
<!-- .side-menu-->
<article class="content">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<a href="">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</a>
</div>
<!-- .news-list-content-->
<div class="image-box-news">
<img src="<?=get_template_directory_uri(); ?>/images/ikona-wpisu.png" alt="" />
</div>
</div>
<!-- .news-box-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<!-- .container-->
</article>
<!-- .content-->
</main>
<?php include 'footer.php'; ?>
The problem is that:
if (have_posts()) : while (have_posts()) : the_post();
is using the current page's have_posts query.. That means that it probably will just show whatever that current page template's content would be.
Instead, you'll want to create an entirely new query object and call these functions on it like so:
<?php
$the_query = new WP_Query( array('posts_per_page' => 10 ) ); //Create our new custom query
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</div>
<!-- all your other markup goes here.... -->
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_postdata(); //Restore the original postdata for this page, if needed later ?>
I have a custom post type set up called TESTIMONIALS and two CPT categories set up which are CLIENT TESTIMONALS & CLINIC TESTIMONIALS
I am trying to display only the posts from the CLIENT TESTIMONALS CPT category.
What would I need to add to the below to achieve this?
<div role="tabpanel" class="tab-pane fade" id="profile">
<?php query_posts('post_type=testimonials'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
You can use something like this.
<?php
$type = 'testimonials';
$args=array(
'post_type' => $type,
'category'=>'CPT',
'post_status' => 'publish'
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php
endwhile;
}
?>
So I managed to query my posts however they break/not aligned properly underneath after the first 2 columns. So I want to insert 2 posts per row, sorry if my explanation is really bad.
$loop = new WP_Query( array( 'post_type' => 'team') ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<!-- <div class="large-6 columns"> -->
<div class="row">
<div class="large-3 columns">
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<?php echo get_the_post_thumbnail($page->ID, 'medium'); ?>
<?php else: // use this image to fill the thumbnail ?>
<img src="http://placehold.it/350x150">
<?php endif; ?>
</div>
<div class="large-9 columns">
<div class="panel radius">
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</div>
</div>
<!-- </div> -->
<?php endwhile; ?>
Not a zurb user, but i expect you need to start a new row every 2 posts:
$loop = new WP_Query( array( 'post_type' => 'team') );
$counter=0;
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); $counter++;?>
<div class="row">
<div class="large-3 columns">
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<?php echo get_the_post_thumbnail($page->ID, 'medium'); ?>
<?php else: // use this image to fill the thumbnail ?>
<img src="http://placehold.it/350x150">
<?php endif; ?>
</div>
<div class="large-9 columns">
<div class="panel radius">
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</div>
</div>
<?php
//close row div and start another every 2 posts
if ($counter%2==0):?>
</div><div class="row">
<?php endif;?>
<?php endwhile; ?>
For some reason, when you click "Previous Posts" on my wordpress blog, the page URL changes, but the first ten posts are displayed again.
You can see the issue here: http://onedirectionconnection.com/ and then page two http://onedirectionconnection.com/page/2/#sthash.0SQiq9AP.dpbs (that's another thing - I'm not sure why that code is being added at the end of the following page's URL)...
Anyway, here is the code I'm using for my front page template saved in a file called front-page.php
<?php
/*
Template Name: Splash Page
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="section-container">
<h1 class="section-title">Latest News</h1>
</div>
<?php $my_query = new WP_Query('showposts=1'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<h1 class="entry-title bottommargin big">
<?php the_title(); ?>
</h1>
<div class="entry-content">
<?php the_content(); ?>
</div>
<div class="row">
<div class="col-md-12">
<footer class="row no-margin">
<div class="col-md-3 meta-entry">
Author: <br>
<?php the_author_link(); ?>
</div>
<div class="col-md-3 meta-entry">
Posted On:<br>
<?php the_time('F j, Y'); ?>
</div>
<div class="col-md-3 meta-entry">
Categorized:<br>
<?php echo get_the_category_list(', '); ?>
</div>
<div class="col-md-3 meta-entry-right">
Discussion:<br>
<?php comments_number(); ?>
</div>
</footer>
</div>
</div>
<?php endwhile; ?>
<div class="section-container">
<h1 class="section-title">More News</h1>
</div>
<?php
$custom_query = new WP_Query(array(
'posts_per_page' => 10,
'offset' => 1,
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<?php while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
<div class="row topmargin">
<div class="col-md-3 no-padding center">
<?php the_post_thumbnail('thumbnail', array('class' => 'img-thumbnail img-responsive')); ?>
</div>
<div class="col-md-9">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_excerpt(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'professional1d' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() )
comments_template();
?>
</div>
</div>
<footer class="row no-margin">
<div class="col-md-3 meta-entry">
Author: <br>
<?php the_author_link(); ?>
</div>
<div class="col-md-3 meta-entry">
Posted On:<br>
<?php the_time('F j, Y'); ?>
</div>
<div class="col-md-3 meta-entry">
Categorized:<br>
<?php echo get_the_category_list(', '); ?>
</div>
<div class="col-md-3 meta-entry-right">
Discussion:<br>
<?php comments_number(); ?>
</div>
</footer>
<?php endwhile; // end of the loop. ?>
<div class="center">
<?php posts_nav_link(); ?>
</div>
</main><!-- #main -->
</div><!-- #primary -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Everything seems pretty standard so I really have no clue what the issue is. If anyone could help me out with this issue, it would be greatly appreciated!
After comparing two - three post/pages of your blog. i think, it add the # tag at the end of url. this happen only after loading the entire page. which means it is added by one of your plugin. the plugin may be for "load fresh content from the server instead of the local browser cache"
so first deactivate the plugin you installed for this kind of features