Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

insert clearing div every 3rd post WordPress

  • SOLVED

I need to insert a 'clearing div' after every 3rd post that is returned within the loop for my gallery display.

What I am trying to do is insert this code after every 3rd 'li'
<li class="cleaner">&nbsp;</li>

Here is my current loop:

<div id="archive">
<ul class="posts posts-3 grid">

<?php
// Exclude stored duplicates
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'post_type' => 'post',
'category__not_in' => '',
'paged' => $paged );
query_posts($args); ?>
<?php if (have_posts()) : $count = 0; ?>
<?php while (have_posts()) : the_post(); $count++; ?>

<!-- Post Starts -->
<li>
<div class="cover"><?php resize_image('width=228&height=160'); ?>
</div>
<div class="postcontent">
<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="postmetadata"><?php post_meta(); ?></p>

<p><?php the_excerpt(); ?></p>

<p class="more"><?php post_inside_after(); ?></p>

</div>
</li>


<?php endwhile; else: ?>
<div class="post">
<p><?php _e('Sorry, no posts matched your criteria.', 'woothemes') ?></p>
</div><!-- /.post -->
<?php endif; ?>
</ul>
</div>



What I am after is something that looks like this

<ul>
<li>
<li>
<li>
<li class="cleaner">&nbsp;</li>
<li>
<li>
<li>
<li class="cleaner">&nbsp;</li>
etc.....


If it's no trouble, I would also like to know how to insert my 'clearing div' after every 4 'li'.

thanks

Answers (7)

2010-10-27

Gabriel Reguly answers:

That should be easy.

Seems you already have a counter, so use it.


<?php while (have_posts()) : the_post(); $count++; ?>



Just do something like


<?php
if ( 0 ==$count%3 ) {
?>
<li class="cleaner">&nbsp;</li>
<?php
} else {
?>

<li>

<div class="cover"><?php resize_image('width=228&height=160'); ?>

</div>

<div class="postcontent">

<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<p class="postmetadata"><?php post_meta(); ?></p>



<p><?php the_excerpt(); ?></p>



<p class="more"><?php post_inside_after(); ?></p>



</div>

</li>


<?php
}


Edit: Damn, those are hard 5 bucks to be earned. ;-) The other folks are too quick.

First solution seems broken, fix should be this:


<?php $i++; ?>

<?php if ( $i == 3 ) { ?>

<li class="cleaner"></li>

<?php $i = 0; } ?>


If you use my solution, just replace the $count%3 with $count%4.

That would do all you ask.

2010-10-27

Michael Fields answers:

You can also hook into the_post to keep your code a bit cleaner:
add_action( 'the_post', 'clear_gallery_row' );
function clear_gallery_row( $post ) {
if( is_category( 'gallery' ) ) { // USE A CONDITIONAL HERE TO ISOLATE YOUR GALLERY
static $count = -1;
$count++;
$per_row = 3;
if( $count >= $per_row ) {
print ( 0 === ( $count % $per_row ) ) ? '<li class="cleaner">&nbsp;</li>' . "\n": '';
}
}
}

2010-10-27

Pippin Williamson answers:

Use PHP to create a counter.

Your complete code looks like this.


<div id="archive">

<ul class="posts posts-3 grid">



<?php

// Exclude stored duplicates

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = array( 'post_type' => 'post',

'category__not_in' => '',

'paged' => $paged );

query_posts($args); ?>
<?php $i = 1;?>

<?php if (have_posts()) : $count = 0; ?>

<?php while (have_posts()) : the_post(); $count++; ?>


<!-- Post Starts -->

<li>

<div class="cover"><?php resize_image('width=228&height=160'); ?>

</div>

<div class="postcontent">

<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<p class="postmetadata"><?php post_meta(); ?></p>


<p><?php the_excerpt(); ?></p>

<p class="more"><?php post_inside_after(); ?></p>

</div>
</li>
<?php $i++; ?>
<?php if ( $i == 3 ) { ?>
<li class="cleaner"></li>
<?php } $i = 0; ?>


<?php endwhile; else: ?>

<div class="post">

<p><?php _e('Sorry, no posts matched your criteria.', 'woothemes') ?></p>

</div><!-- /.post -->

<?php endif; ?>

</ul>

</div>

2010-10-27

Jordan Miskowicz answers:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 3) : ?>
<? //Clear goes here ?>
<li class="clearfix"></li>
<?php else : ?>
<li>Original Post Loop Here</li>
<?php endif; ?>
<?php endwhile; ?>


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

2010-10-27

Pau answers:

try this

if(++$count == 3) {
echo '<li class="cleaner">&nbsp;</li>';
$count = 0;
}

2010-10-27

Nilesh shiragave answers:

User $count variable which you already added.


<div id="archive">

<ul class="posts posts-3 grid">
<?php

// Exclude stored duplicates

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = array( 'post_type' => 'post',

'category__not_in' => '',

'paged' => $paged );

query_posts($args); ?>

<?php if (have_posts()) : $count = 0; ?>

<?php while (have_posts()) : the_post(); $count++; ?>



<!-- Post Starts -->

<li>

<div class="cover"><?php resize_image('width=228&height=160'); ?>

</div>

<div class="postcontent">

<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<p class="postmetadata"><?php post_meta(); ?></p>



<p><?php the_excerpt(); ?></p>



<p class="more"><?php post_inside_after(); ?></p>



</div>

</li>

<?php if($count==3): ?>
<li class="cleaner">&nbsp;</li>
<?php endif;
$count=0;
?>



<?php endwhile; else: ?>

<div class="post">

<p><?php _e('Sorry, no posts matched your criteria.', 'woothemes') ?></p>

</div><!-- /.post -->

<?php endif; ?>

</ul>

</div>


i just added following code to insert <li class="cleaner"></li> after the closing </li> tag


<?php if($count==3): ?>
<li class="cleaner">&nbsp;</li>
<?php endif;
$count=0;
?>

2010-10-28

Chris Lee answers:

Or you could just utilize the built in loop counting methods: http://codex.wordpress.org/Function_Reference/WP_Query

$itemsperrow = 3;

// in the loop
// $current_post is available during the loop

if ($current_post % $itemsperrow == 0)