WP Query loop - in multiples of 3 posts in containing div. WordPress
- SOLVED
Hello,
I am trying to create a loop which wraps every 3 posts in a div.
See below my current WP Query...
<div id="slider">
<div id="slider-wrapper">
<?php
$currentID = get_the_ID();
$featured = new WP_Query(array(
'post_type' => 'post',
'order' => 'DESC',
'posts_per_page' => 9,
'post__not_in' => array($currentID)
)); ?>
<?php if ($featured->have_posts()) : ?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>
<div id="slide-<?php the_ID(); ?>" class="slide">
<?php the_title(); ?>
</div>
<?php endwhile; ?>
<?php unset($featured); endif; wp_reset_query(); ?>
</div>
</div>
<br />
As expected, this is what it outputs below...
<div id="slider">
<div id="slider-wrapper">
<div id="slide-1" class="slide">
Post 1
</div>
<div id="slide-2" class="slide">
Post 2
</div>
<div id="slide-3" class="slide">
Post 3
</div>
<div id="slide-4" class="slide">
Post 4
</div>
<div id="slide-5" class="slide">
Post 5
</div>
<div id="slide-6" class="slide">
Post 6
</div>
<div id="slide-7" class="slide">
Post 7
</div>
<div id="slide-8" class="slide">
Post 8
</div>
<div id="slide-9" class="slide">
Post 9
</div>
</div>
</div>
<br />
What I need it to be outputed like this...
<div id="slider">
<div id="slider-wrapper">
<div class="slide-group">
<div id="slide-1" class="slide">
Post 1
</div>
<div id="slide-2" class="slide">
Post 2
</div>
<div id="slide-3" class="slide">
Post 3
</div>
</div>
<div class="slide-group">
<div id="slide-4" class="slide">
Post 4
</div>
<div id="slide-5" class="slide">
Post 5
</div>
<div id="slide-6" class="slide">
Post 6
</div>
</div>
<div class="slide-group">
<div id="slide-7" class="slide">
Post 7
</div>
<div id="slide-8" class="slide">
Post 8
</div>
<div id="slide-9" class="slide">
Post 9
</div>
</div>
</div>
</div>
<br />
As you can see every 3 posts is grouped in a div.
I am looking for logical php solution to my loop. So if I up the amount of posts in my query, it still automatically groups every 3 posts.
And also, if for example if the amount of posts is not dividable by 3 - It will automatically group it like this...
11 posts = 3 : 3 : 3 : 2
16 post = 3 : 3 : 3 : 3 : 3 : 1
Please let me know if this does not make sense.
Thank you - All prize fund will go to one person with best solution for me
Answers (4)
Arnav Joy answers:
try this
<div id="slider">
<div id="slider-wrapper">
<?php
$currentID = get_the_ID();
$featured = new WP_Query(array(
'post_type' => 'post',
'order' => 'DESC',
'posts_per_page' => 9,
'post__not_in' => array($currentID)
)); ?>
<?php if ($featured->have_posts()) : ?>
<?php $i=1; ?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>
<?php if($i==1 || $i%3==1) echo '<div class="slide-group">' ;?>
<div id="slide-<?php the_ID(); ?>" class="slide">
<?php the_title(); ?>
</div>
<?php if($i%3==0) echo '</div>' ;?>
<?php $i++;endwhile; ?>
<?php unset($featured); endif; wp_reset_query(); ?>
</div>
</div>
Josh Cranwell comments:
Perfect Thank you!!!
This is how I used your code...
https://gist.github.com/3055015
Francisco Javier Carazo Gil answers:
Maybe this:
<div id="slider">
<div id="slider-wrapper">
<?php
$currentID = get_the_ID();
$featured = new WP_Query(array(
'post_type' => 'post',
'order' => 'DESC',
'posts_per_page' => 9,
'post__not_in' => array($currentID)
)); ?>
<?php if ($featured->have_posts()) :
$i = 0;
while ($featured->have_posts()) : $featured->the_post();
if($i%3 == 0)
echo '<div class="slide-group">';
?>
<div id="slide-<?php the_ID(); ?>" class="slide">
<?php the_title(); ?>
</div>
<?php
if($i % 3 == 2)
echo '</div>';
endwhile; ?>
<?php unset($featured); endif; wp_reset_query(); ?>
</div>
</div>
Josh Cranwell comments:
Thanks, but not quite doing its thing...
http://tinypic.com/r/avrknp/6
Josh Cranwell comments:
@Francisco thanks for you help anyway... Arnav gave me a solution
I can't see your replys...
[[LINK href="http://imm.io/vdBR"]]See screenshot[[/LINK]]
Luis Abarca answers:
Im using this code for a slider, to show 3 elements per row
<?php
$currentID = get_the_ID();
$featured = new WP_Query(array(
'post_type' => 'post',
'order' => 'DESC',
'posts_per_page' => 9,
'post__not_in' => array($currentID)
));
$maxitems = 3;
$totalitems = $featured->post_count;
$counter = 0;
$close_tag = false;
$open_tag = true;
?>
<div id="slider">
<div id="slider-wrapper">
<?php if ($featured->have_posts()) : ?>
<?php while ($featured->have_posts()) : $featured->the_post(); $counter++; ?>
<?php if ($counter == 1 || $open_tag): $open_tag = false; ?>
<div id="slide-<?php the_ID(); ?>" class="slide">
<?php elseif ($counter % $maxitems == 0): ?>
<?php $close_tag = true; ?>
<?php endif; ?>
<?php the_title(); ?>
<?php if ($close_tag) : ?>
<?php
$close_tag = false;
$open_tag = true;
?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php unset($featured); endif; wp_reset_query(); ?>
<?php if ( $counter % $maxitems != 0 && $counter >= $totalitems ): ?>
</div>
<?php endif; ?>
</div>
</div>
Gabriel Reguly answers:
Hi,
That should be easy, follows untested code ;-)
<div id="slider">
<div id="slider-wrapper">
<?php
$currentID = get_the_ID();
$featured = new WP_Query(array(
'post_type' => 'post',
'order' => 'DESC',
'posts_per_page' => 9,
'post__not_in' => array($currentID)
));
if ( $featured->have_posts() ) {
$i = 1;
$open = false;
while ($featured->have_posts()) {
$featured->the_post();
if ( 1 == $i || 0 == $i%3 ) {
$open = true ;
?>
<div class="slide-group">
<?php
}
?>
<div id="slide-<?php the_ID(); ?>" class="slide">
<?php the_title(); ?>
</div>
<?php
if ( 0 == $i%3 ) {
$open = false;
?>
</div>
<?php
}
}
if ( $open ) {
?>
</div>
<?php
}
unset($featured);
}
wp_reset_query();
?>
</div>
</div>
Regards,
Gabriel