I have a FAQ page. Consisiting of questions. The order of the questions does not matter. What matters is the layout. Its a three column layout.
When you only have 3 questions, the layout is correct. It looks like this.
[question Z] [question A] [question O]
The problem:
When you have 4 questions the layout looks like this.
[question Z] [question A]
[question X] [question O]
It should look like this.
[question Z] [question A] [question O]
[question X]
Its a 3 column layout. I would like the questions to fill out the fist row. Than start with the second.
I need to do this, without chaning the Bootstrap grid.
The gird was set up in such a way, that when the user clicks read more on a question, only the column expand and not the row.
<?php if ( $wp_query->have_posts() ) : ?>
<?php
$counter=0;
$total_posts = $wp_query->post_count;
$posts_per_column = ceil($total_posts / 3);
?>
<section class="faq content">
<div class="container-fluid">
<div class="container-wrapper-faq">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12">
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); $counter++; ?>
<div class="faq-all">
<div class="faq-item">
<h2><?php the_title(); ?></h2>
<article>
<div class="faq-intro">
<?php the_content(); ?>
</div>
<div class="faq-info">
<?php the_content(); ?>
</div>
<div class="faq-link">
<a href="#" class="read-more">LES HELE SVARET</a>
<a href="#" class="read-less">LES MINDRE</a>
</div>
</article>
</div>
</div>
<!-- Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero -->
<?php if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">'; ?>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
</div>
Thanks in advance
So I am sure there is a cleaner way to pull this off but its early and my brain is not functioning at 100%. This should fix your problem. Basically if the total posts = 4,7,10,13... what we had before would always trim it so that it never reached the 3rd column. I added some code that checks to see if it is one of these special cases I just did some basic math and subtracted the total posts by one, then divided that by three, if it is a round number I know its a special case. So I change the posts per column to be one less, then in the loop we check if its the first post and we don't increment the counter.
<?php if ( $wp_query->have_posts() ) :
$counter=0;
$columns=3;
$total_posts = $wp_query->post_count;
$posts_per_column = ceil($total_posts / 3);
$posts_per_column_test_value = ($total_posts - 1) / $columns;
$is_special_case = false;
if($total_posts != 1 && (intval($posts_per_column_test_value) == $posts_per_column_test_value)){
$is_special_case = true;
$posts_per_column = $posts_per_column - 1;
}
?>
<section class="faq content">
<div class="container-fluid">
<div class="container-wrapper-faq">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12">
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post();
if($is_special_case && $wp_query->current_post == 0){
// do nothing so we get an extra post in the first column
} else {
$counter++
}: ?>
<div class="faq-all">
<div class="faq-item">
<h2><?php the_title(); ?></h2>
<article>
<div class="faq-intro">
<?php the_content(); ?>
</div>
<div class="faq-info">
<?php the_content(); ?>
</div>
<div class="faq-link">
<a href="#" class="read-more">LES HELE SVARET</a>
<a href="#" class="read-less">LES MINDRE</a>
</div>
</article>
</div>
</div>
<?php
// Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero
if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">';
?>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
</div>
</section>