I'm building a Wordpress theme based around Twitter Bootstrap. With Bootstrap's responsive layout .row-fluid
spans 100% of the page and can have 12 'spans' within one row.
<div class="row-fluid">
<?php query_posts('category_name=feature-articles&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="span4">
<div class="main-thumb"><?php echo get_the_post_thumbnail(($page->ID) , 'main-thumb'); ?></div>
<a href="<?php the_permalink(); ?>"><h3 class="title"><?php the_title(); ?></h3></a>
<p class="excerpt"><?php
$my_excerpt = get_the_excerpt();
if ( $my_excerpt != '' ) {
// Some string manipulation performed
}
echo $my_excerpt; // Outputs the processed value to the page
?></p>
<?php endwhile; ?></div>
This creates 6 "span4", which I want to span across 2 different rows - but because of the loop, there's no way to close the original .row-fluid
div and open another after 3 posts have been created.
For simplicity's sake, I want to get posts 1, 2 and 3, then close the .row-fluid
div and create another, then get posts 4, 5 and 6. Is this possible with a bit of loop manipulation?
You'd have to put a counter in the loop, and when it reaches 3, add a close/open tag. I've also added
if(have_posts())
to the start of your loop, to avoid errors (also allows you to output a message if there are no posts).