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"> </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"> </li>
<li>
<li>
<li>
<li class="cleaner"> </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)
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"> </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.
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"> </li>' . "\n": '';
}
}
}
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>
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;
}
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"> </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"> </li>
<?php endif;
$count=0;
?>
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)