I am integrating my theme built with Bootstrap into WordPress and I am now faced with the challenge of displaying my posts horizontally instead of vertically. The design uses 3 columns.
The solution for two columns posted at this site ( http://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/ ) was helpful but it posts repeats of previously displayed posts when used with 3 columns.
Here is my code:
<div class="row">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="col-sm-4">
<img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
<h3><?php the_field( 'description' ); ?></h3>
</div>
<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>
<?php $i = 0; rewind_posts(); ?>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="col-sm-4">
<img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
<h3><?php the_field( 'description' ); ?></h3>
</div>
<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>
<?php $i = 0; rewind_posts(); ?>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="col-sm-4">
<img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
<h3><?php the_field( 'description' ); ?></h3>
</div>
<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>
</div>
Any help would be grateful.
Thank you.
Take a look on this example, Its working like you want, and arrange your code according to this example.
$i = 1;
echo "<div class='row'>\n";
while( $i <= 10 ){
echo " <div class='col-lg-4'></div>\n";
if( $i % 3 == 0 ) { echo "</div>\n<div class='row'>\n"; }
$i++;
}
echo "</div>\n";
I built the html strings into a dynamic array, then echo the rows after the have_posts() loop. This divides the number of posts by 4 then orders them vertically in 4 columns. Here is my example:
$query = new WP_Query(array(
'post_status' => 'publish',
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page' => -1
));
$post_count = $query->post_count;
$posts_per_column = ceil($post_count / 4);
$rows = array();
$count = 0;
while ($query->have_posts())
{ $query->the_post();
if($rows[$count] == ""){ $rows[$count] = '<div class="row">'; }
$rows[$count] = $rows[$count] . '<div class="col-sm-3">' .
'<div class="post-title">
<a href="'.get_permalink().'">'.get_the_title().'</a></div>' .
'<div class="post-author">by '. get_the_author() .'</div></div>';
$count++;
if ($count == $posts_per_column ) { $count = 0; }
}
foreach ($rows as $row) { echo $row . '</div>'; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.