PHP and Wordpress, how to divide posts into three - Beginner

Question

I looked at a few examples on Stackoverflow concerning dividing posts into three columns. I had some difficulty implementing the examples. Hope someone can help.

I have an FAQ page with questions. When user clicks read more the block of text expand. I want to place the questions in three columns. The order of the questions does not matter. As long as it fills up the rows evenly.

It should look like this:
[question X] [question A] [question Z]
[question H] [question J] [question K]
[question B] [question V]

I have structured the Bootstrap grid in such away, to solve my blank row problem, when someone clicks read more and the text expand.

<?php if ( $wp_query->have_posts() ) : ?>
<div class="row custom-gutter-faq">

 <!--COLUMN ONE-->
       <div class="col-lg-4">
         <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                  <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 endwhile; ?>
             </div>
             </div>
            <!--end one-->

            <!--COLUMN TWO-->
           <div class="col-lg-4">
              <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                  <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 endwhile; ?>
             </div>
            </div>
            <!--end two-->

            <!--COLUMN THREE-->
            <div class="col-lg-4">
              <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                  <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 endwhile; ?>
             </div>
           </div>
           <!--end three-->

At the moment i am getting the post three times. I just want to get the post once and divide that post into three columns.

Everything that goes into the first column, needs to go into column one in the code and the same goes for everything that needs to go into the second column needs to go into column two in the code ect..

I have been struggling with this. Could not get the examples on Stackoverflow to work for me.

Thanks in advance

Andres F Garcia · Accepted Answer · 2016-03-02T20:28:24.413

2

I am pretty sure this is what you are looking for. An easy way to pull this off is by adding a "counter" variable and add to the count each time a new post is added ex($counter++). Then lastly we see if the "counter" / "number of rows" has a remainder of zero.

<?php if ( $wp_query->have_posts() ) : ?>
        <?php 
            $counter=0;
            $total_posts = $wp_query->post_count;
            $posts_per_column = ceil($total_posts / 3);
        ?>
      <div class="row custom-gutter-faq">
        <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>
    <?php endif; ?>

edited Mar 02 '16 at 20:28

answered Mar 02 '16 at 18:30

Andres F Garcia

6,795
1
14
9

If you have any questions about how this works let me know. This is all you would need btw, you can remove the other columns. – Andres F Garcia Mar 02 '16 at 18:30
Hi, i just tested it. My problem is that when you click read more the row expand and you have a lot of white space. the way i did it with the 3 columns is to expand only the first column when you click read more. Is there a way to do this in the code so i keep the 3 columns instead of one. – Kong Mar 02 '16 at 19:07
Do you have a link where I can see it in production? Maybe you can use https://ngrok.com/ to temporarily tunnel your localhost if you are working locally. – Andres F Garcia Mar 02 '16 at 19:23
Unfortunately i dont have a live site. But i do have a post from before, with an image, explaining the problem i had with the rows and white space. I solved this problem by expanding columns instead of rows. Click read more on column one and only column one will expand. http://stackoverflow.com/questions/35728132/need-to-remove-extra-white-space-between-faqs-using-css-and-bootstrap – Kong Mar 02 '16 at 19:46
Is it possible to implement something similar to this. I am referring to the last example on this post. http://wordpress.stackexchange.com/questions/163176/how-to-get-my-loop-to-pull-posts-into-three-columns I tried to recreate it but i failed – Kong Mar 02 '16 at 19:53
I updated the code. Give that a shot, I think it should work. Its similar to what we had before only now we are figuring out how many posts should go in each column before we split them up into columns. – Andres F Garcia Mar 02 '16 at 20:29
Andres, you are the best. Thanks you. If you still have some time, i just have one more question. Say you have 3 faq's how do you set it so it fills up one faq in column 1 another in column 2 and the last one in column 3, before it start with a new line? Thanks again. – Kong Mar 02 '16 at 21:10
I am not sure I understand can you send a screenshot? Maybe make a new stack overflow question? Ha I am trying to get my credit up so I can start +1 people that have helped me. Just send me the link once you do. – Andres F Garcia Mar 02 '16 at 22:53
Thanks again Andres. Here is the link to my new question. http://stackoverflow.com/questions/35767016/php-and-wordpress-place-content-in-correct-column – Kong Mar 03 '16 at 08:37

PHP and Wordpress, how to divide posts into three - Beginner

1 Answers1