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; ?>
Related
I need to display all posts on the main page that will vary. That is, they will not repeat on the same page. I display them using WP_Query, but for each column of posts I need to have another 'posts_per_page'. How to do it?
I trying this:
<?php $my_query = new WP_Query($args); ?>
and
this <?php $my_query->set('posts_per_page', 3);
$my_query->query($my_query->query_vars); ?>
Here is my code example one:
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-12 featured-posts">
<?php $my_query->set('posts_per_page', 3); $my_query->query($my_query->query_vars); ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<article class="post post-id-<?php echo the_ID(); ?>">
<a class="post-thumbnail" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
<div class="post-content">
<h3 class="post-title"><?php the_title(); ?></h3>
<?php healthybroom_posted_on(); ?>
<?php healthybroom_entry_footer(); ?>
<p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
</div>
</article>
<?php endwhile; ?>
</div>
<div class="col-xl-3 col-lg-3 col-md-12 front-random-posts">
<?php $my_query->set('posts_per_page', 5); $my_query->query($my_query->query_vars); ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<article class="post post-id-<?php echo the_ID(); ?>">
<a class="post-thumbnail" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
<div class="post-content">
<?php healthybroom_entry_footer(); ?>
<h3 class="post-title"><?php the_title(); ?></h3>
<?php healthybroom_posted_on(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
</div>
I want the posts to not be repeated simply.
If you have 2 loops with random posts and you want to avoid to have same posts in the 2 loops, you can use the following code :
<!-- We create an array for saving the IDs of the post displaying in the first loop -->
<?php $store_posts_ids = array(); ?>
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-12 featured-posts">
<?php
$my_query->set('posts_per_page', 3);
$my_query->query($my_query->query_vars);
?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<!-- We store the post id for the second loop -->
<?php array_push( $store_posts_ids, get_the_ID() ); ?>
<!-- Your code here -->
<?php endwhile; ?>
</div>
<div class="col-xl-3 col-lg-3 col-md-12 front-random-posts">
<?php
/*
If you want to display 5 posts, you need to have a loop
of 7 posts because you have 3 posts in your first loop
*/
$number_post = 0;
$my_query->set('posts_per_page', 5);
$my_query->query($my_query->query_vars);
?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php array( $store_posts_ids, get_the_ID() ); ?>
<!-- If we have our 5 posts, no need to display more posts -->
<?php if( $number_post < 5 ): ?>
<!-- If the post is not in the first loop -->
<?php if( !in_array( $store_posts_ids, get_the_ID() ) ): ?>
<?php $number_post = $number_post + 1; ?>
<!-- Your code here -->
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
</div>
</div>
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.
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 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;
}
?>
Good morning, I have found myself in a bit of a dilemma! I am creating a Wordpress theme using Twitter Bootstrap and I am generating the members for the "Meet the Team" page via Wordpress "Posts" I can only fit 3 entries in 1 row... I.E
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
But anymore than 3 entries per a row will break the row, so I need to generate a new row for every 3 entries. How can I do this?
Here is my PHP code for outputting the entries.
<?php query_posts('category_name=members&orderby=date'); ?>
<div class="row-fluid">
<ul class="thumbnails">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li class="span4">
<div class="thumbnail">
<?php // check if the post has a Post Thumbnail assigned to it.the_post_thumbnail();
?>
<div class="pad">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
Try this
<?php query_posts('category_name=members&orderby=date'); ?>
<div class="row-fluid">
<ul class="thumbnails">
<?php
$cnt =0;
if ( have_posts() ) : while ( have_posts() ) : the_post();
if($cnt%3==0){
echo "</ul></div><div class='row-fluid'><ul clsas='thumbnails'>";
}
?>
<li class="span4">
<div class="thumbnail">
<?php // check if the post has a Post Thumbnail assigned to it.the_post_thumbnail();
?>
<div class="pad">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</li>
<?php
$cnt++;
endwhile; ?>
</ul>
</div>
<?php endif; ?>