Wordpress Loop posts in Bootstrap 3 grid layout
css, loops, posts, twitter-bootstrap, wordpress
Solution
Yes you can do it.
<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<div class="row">
<?php
}
?>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
<p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name'); ?></a></p>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>
<?php
if($i % 4 == 0) { ?>
</div>
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>
Problem
I am using Bootstrap 3 within Wordpess and have an issue getting my archive posts to display across the page in a grid format. My wordpress loop code is... ``` <?php if ( have_posts() ) : ?> <?php $args=array( 'post_type' => 'artist', 'post_status' => 'publish', 'posts_per_page' => -1, 'caller_get_posts'=> 1 ); $my_query = null; $my_query = new WP_Query($args); if( $my_query->have_posts() ) { echo ''; while ($my_query->have_posts()) : $my_query->the_post(); ?> <li> <img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /> </li> <?php endwhile; } wp_reset_query(); ?> <?php while ( have_posts() ) : the_post(); ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> ``` This displays a list containing the post's image. Right now, they list one after the other down the page. How would I get them to use my bootstrap grid showing 4 across the page, then the next 4 in the row beneath, then the next 4 in row beneath that like this... ``` <div class="row"> <div class="col-md-3"> <li>image 1 goes here</li> </div> <div class="col-md-3"> <li>image 2 goes here</li> </div> <div class="col-md-3"> <li>image 3 goes here</li> </div> <div class="col-md-3"> <li>image 4 goes here</li> </div> </div> ``` etc. Is that possible? Basically i want the Wordpress loop to list ALL of my posts 4 across the page instead of one after the other in a html list down the page.