I am trying to make Wordpress loop with php modulus. The scenario is wrapping every 3 posts in a div. My script below is working perfectly, except I found an unused empty div at the last (from inspect element).
$loop_args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 6
);
$loop = new WP_Query( $loop_args );
<?php if( $loop->have_posts() ): ?>
<div class="row">
<?php $count = 0; ?>
<div class="col-md-6">
<?php while( $loop->have_posts() ) : $loop->the_post(); $count++; ?>
<?php if( $count % 3 == 0 ): ?>
<article class="post-content"><?php the_title();?></article>
</div> <!-- .col md 6 -->
<div class="col-md-6">
<?php else: ?>
<article class="post-content"><?php the_title();?></article>
<?php endif; // end modulus ?>
<?php endwhile; // end while loop ?>
</div> <!-- .col md 6 -->
</div> <!-- .row -->
<?php endif; wp_reset_postdata(); ?>
Please take a look at the last highlighted div in my attachement:
screenshot preview
How can I remove that unused empty div?
Thanks in advance.
Try this:
<div class="row">
<?php $count = 0; ?>
<div class="col-md-6">
<?php while( $loop->have_posts() ) : $loop->the_post(); $count++; ?>
<?php if( $count % 3 == 1 && $count > 1 ): ?>
</div> <!-- .col md 6 -->
<div class="col-md-6">
<article class="post-content"><?php the_title();?></article>
<?php else: ?>
<article class="post-content"><?php the_title();?></article>
<?php endif; // end modulus ?>
<?php endwhile; // end while loop ?>
</div> <!-- .col md 6 -->
</div> <!-- .row -->
Here I don't close div on the third article but I open it if I need on the fourth.
The problem I see is that you are allways opeining the <div class="col-md-6"> when the modulus 3 is 0 even if there are no more articles after you open the tag. In such case you would end up with an empty div.
Related
I'm having an ACF repeater inside a custom post type loop with a counter that makes a row around every two col-md-6's. This works great when I have an even number of col's but not when it's uneven. When a post has an uneven number of col's the counter somehow remembers that for the next post and only displays one col in the first row.
Down here you'll find the current code and a little picture of what is happening.
Somehow I need to reset the counter after each post loop but can't figure it out. wp_reset_postdata doesn't seem to work.
<?php $args = array( 'post_type' => 'posttypename', 'posts_per_page' => '-1' ); $the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
<?php if( have_rows('row') ): ?>
<div class="row">
<?php while( have_rows('row') ): the_row(); $text = get_sub_field('text'); ?>
<div class="col-md-6">
<?php echo $text; ?>
</div>
<?php $counter++; if($counter % 2 === 0) : echo '</div> <div class="row">'; endif; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
Just a small change. You need to make sure that your counter is reset to 0 before the loop for the acf starts.
<?php $counter = 0; //Initialize your Counter here before the Loop Starts for each Post ?>
<?php if( have_rows('row') ): ?>
<div class="row">
<?php while( have_rows('row') ): the_row(); $text = get_sub_field('text'); ?>
<div class="col-md-6">
<?php echo $text; ?>
</div>
<?php $counter++; if($counter % 2 === 0) : echo '</div> <div class="row">'; endif; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
I want to break the loop into half of the total loop count. If the total loop count is odd, I would like to remove the last array item in order to make the total loop count even and add the deleted item to the second half.
Here is the code structure to demonstrate the loop-
<?php
$faqs = new WP_Query( array (
'post_type' => 'faq'
));
?>
<div class="row">
<div class="col-lg-6">
<!-- The first half of the tootal loop count. -->
<?php
while ($faqs->have_posts()) : $faqs->the_post();
the_content();
endwhile();
?>
</div>
<div class="col-lg-6">
<!-- The second half of the tootal loop count. -->
<?php
while ($faqs->have_posts()) : $faqs->the_post();
the_content();
endwhile();
?>
</div>
</div>
I don't know how to control the loop based on my mentioned conditions. That's why I couldn't able to try loop controlling.
In a single loop. Hopefully, it'll work. Couldn't test so let me if you face any situation.
<?php
$faqs = new WP_Query([
'post_type' => 'faq',
'post_status' => 'publish',
]);
$half = intval($faqs->post_count / 2);
$counter = 0;
?>
<div class="row">
<div class="col-lg-6">
<?php while ($faqs->have_posts()) : $faqs->the_post(); ?>
<?php if ( $counter === $half ) : ?>
</div><div class="col-lg-6">
<?php endif; ?>
<?php the_content(); ?>
<?php ++$counter; endwhile; ?>
</div>
</div>
try it like this
<?php
$faqs = new WP_Query( array (
'post_type' => 'faq'
));
?>
<div class="row">
<div class="col-lg-6">
<!-- The first half of the total loop count. -->
<?php
$i=0;
while ($faqs->have_posts() && $i < $faqs->post_count / 2) : $faqs->the_post(); $i++
the_content();
endwhile();
?>
</div>
<div class="col-lg-6">
<!-- The second half of the tootal loop count. -->
<?php
while ($faqs->have_posts()) : $faqs->the_post();
the_content();
endwhile();
?>
</div>
</div>
https://wordpress.stackexchange.com/questions/27116/counting-the-posts-of-a-custom-wordpress-loop-wp-query
I've been researching ways to add a unique class to the last row of a bootstrap 4 grid layout. I found many examples of how to identify the last post in a wordpress query, but identifying the start of the last row so I could add a unique class was harder to locate.
In the end, I did some (in retrospect) basic math to calculate which loop in a while statement contained the first post of the last row, and inserted the desired 'last' class at that point.
This code is working ($project_columns is an integer between 1 and 12) but I was wondering if my solution has any performance issues or could have been done "better".
<!-- Project Thumbnails -->
<?php if ( $show_project_thumbnails === true ) : ?>
<?php
$args = array(
'post_type' => 'projects',
'orderby' => $project_orderby,
'order' => $project_order,
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts ()) :
$counter = 0;
$post_count = $the_query->post_count;
$total_rows = (ceil) ( $post_count / $project_columns );
$first_post_last_row = ( $total_rows - 1 ) * $project_columns;
?>
<div id="projects">
<div class="row content-area bg-light projects">
<div class="col projects-title">
<h1 class="text-center display-3">Recent Projects.</h1>
<hr class="separator"></span>
</div><!-- .col end -->
</div><!-- .row end -->
<?php
while ( $the_query->have_posts ()) : $the_query->the_post();
if ($counter % $project_columns == 0) :
echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
echo $counter == $first_post_last_row ? "<div class=\"row content-area bg-light last\">" : "<div class=\"row content-area bg-light\">";
endif;
?>
<div class="col-md projects-thumbnails">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"">
<?php
the_post_thumbnail();
echo $items;
?>
</a>
</div><!-- .col-md end -->
<?php $counter++;
endwhile;
endif;
wp_reset_postdata();
?>
</div><!-- .row end -->
</div><!-- #projects end -->
<?php endif; ?>
<!-- /Project Thumbnails -->
I think that the easiest way to select the last row is to use CSS :last-child selector.
you can access last row by something like that
<?php
$last_key = count($array) - 1;
if(key($array) == $last_key){
// do something
}
?>
or if they key is not number
<?php
$last_key = count($array) - 1;
$last_row = $array[$last_key];
if(key($array) == $last_row){
// do something
}
?>
I was hoping one of you Wordpress gurus can help me out here.
I'm trying to create a loop within a loop that presents 12 posts, in 6 rows. In each row you have 2 divs. Each div is meant to display a post title. And the loop runs through all of the 12 posts and groups them correctly - 6 divs, with 2 posts. Each post has it's own unique title.
I've managed to get the loop to breakdown the 12 posts into 6 divs, each with two inner divs in there. But I can't get the inner divs to loop through all the posts. Instead they are just looping through the first two.
So what I end up with is 6 rows, each with two divs. But only the first two posts keep recurring throughout all the rows. What am I doing wrong here?
<!--TESTER -->
<!--TESTER -->
<!--TESTER -->
<div class="section section-testimonials">
<?php
$args=array(
'post_type' => 'testimonial'
);
$query = null;
$query = new WP_Query($args);
if( $query -> have_posts() ) {
echo '';
$i = 0;
while ($query -> have_posts()) : $query->the_post();
if($i % 2 == 0) { ?>
<div class="row">
<?php $loop = new WP_Query( array( 'post_type' => 'testimonial', 'posts_per_page' => 2 ) ); ?>
<?php while ( $loop -> have_posts() ) : $loop -> the_post(); ?>
<!-- Two posts appear here -->
<div class="col-md-6">
<h1><?php the_title(); ?></h1>
</div>
<?php endwhile; ?>
</div>
<?php } ?>
<?php
$i++;
endwhile;
}
wp_reset_query();
?>
</div>
<!--TESTER -->
<!--TESTER -->
<!--TESTER -->
Any help would be incredibly appreciated!
Cheers,
Sanny
Here, I break the problem into pieces, so you can see the loops working on their own.
<?php
$slides = [0,1,2,3,4,5];
foreach($slides as $slide):
?>
<!-- I need to get 6 of these divs which contain 2 cards inside them -->
<div class="item active">
<p>Example Carousel Slide <?php echo $slide;?></p>
</div>
<?php endforeach?>
Then, instead of just echoing a constant <p> tag, you instead put a loop there.
<?php
$posts = ["post1", "post2"];
foreach($posts as $post):?>
<div class="col-md-6">
<?php echo $post;?>
</div>
<?php endforeach?>
I will jump ahead a few steps, but you end up with something like this.
<?php
$posts = [
0=>"post0",
1=>"post1",
2=>"post2",
3=>"post3",
4=>"post4",
5=>"post5",
6=>"post6",
7=>"post7",
8=>"post8",
9=>"post9",
10=>"post10",
11=>"post11"];
for($slideNumber=0; $slideNumber < 6; $slideNumber++):
?>
<!-- I need to get 6 of these divs which contain 2 cards inside them -->
<div class="item active">
<?php
echo("<p>This is slide number " . $slideNumber . "</p>");
for($i=0; $i<2; $i++):?>
<div class="col-md-6">
<?php
$actualPostNumber= ($slideNumber * 2) + $i ;
echo("<p>" . $posts[$actualPostNumber] . "</p>");
?>
</div>
<?php endfor; ?>
</div>
<?php endfor; ?>
Read that code, and try to come up with an expectation for what it will produce. In the end, you should end up with 6 slides, each containing two posts.
The code I posted is a skeleton relative to your eventual solution. However, hopefully this "counters" approach will assist you with assigning the correct number of posts to each carousel slide.
Thanks guys for all the help. I've managed to solve this!!! Here's the solution:
If anyone has any thoughts on making this a better solution lemme know! Cheers
<?php
$args=array(
'post_type' => 'testimonial',
);
$query = new WP_Query($args);
if( $query -> have_posts() ) {
echo '';
$i = 0;
$ids = array();
while ($query -> have_posts()) : $query->the_post();
if($i % 2 == 0) { ?>
<div class="item <?php if($i == 0) :?>active<?php endif; ?>">
<div class="row">
<?php $loop = new WP_Query( array( 'post_type' => 'testimonial', 'posts_per_page' => 2, 'orderby' => 'rand', 'post__not_in' => $ids ) ); ?>
<?php while ( $loop -> have_posts() ) : $loop -> the_post(); ?>
<!-- A single testimonial -->
<div class="col-md-6">
<div class="card card-plain">
<div class="content">
<h4 class="title"><?php the_content(); ?></h4>
<div class="footer">
<div class="author">
<span><?php the_title(); ?></span>
</div>
</div>
</div>
</div>
</div>
<?php $ids[] = get_the_ID(); ?>
<?php endwhile; ?>
</div>
</div>
<?php } ?>
<?php
$i++;
endwhile;
}
wp_reset_query();
?>
I'd like to wrap every three posts in a new row (div) with a total of nine posts on a page. There's an empty row at the end. I thought this (I need to wrap every 4 wordpress posts in a div) would work, but I have more posts on pages 2, 3, 4, etc. Below is a simplified version of my code. $i = 1.
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="column">
</div>
<?php if ($i % 3 == 0 ) : ?>
</div> <!-- .row -->
<div class="row">
<?php endif; $i++; ?>
<?php endwhile; ?>
</div> <!-- .row -->
You can use get_next_post() to check whether next post exists or not.
<?php if ($i % 3 == 0 ) : ?>
</div> <!-- .row -->
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
<div class="row">
<?php endif; ?>
I used this post (https://www.nosegraze.com/display-wordpress-posts-2-3-columns/) to solve my problem.
$i = 0;
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( $i == 0 ) : ?>
<div class="row">
<?php endif; ?>
<div class="column">
</div> <!-- .column -->
<?php
$i++;
if( $i == 3 ) :
$i = 0; ?>
</div> <!-- .row -->
<?php endif; ?>
<?php endwhile; ?>
<?php if ( $i > 0 ) : ?>
</div> <!-- .row -->
<?php endif; ?>