0

May I know how to create multiple loop for this HTML code in Wordpress?

<div class="row">
 <div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
</div>

<div class="row">
 <div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url('post-img');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
</div>

And the row keep on going based on the sum of post that we have. Hopefully it will appear like this: enter image description here Please advise. thanks!

2

Okay I got it! And this code works perfectly for me. :)

<?php             $args=array(
                 'post_type' => 'post',
                  'posts_per_page' => 4,
                  'paged' => $paged,
                  'tax_query' => array(
                              array(                
                                  'taxonomy' => 'post_format',
                                  'field' => 'slug',
                                  'terms' => array('post-format-video'),
                                  'operator' => 'IN')
                                  )
                );

              $my_query = null;
              $my_query = new WP_Query($args);

              if( $my_query->have_posts() ) {

                $i = 0;
                while ($my_query->have_posts()) : $my_query->the_post();
              // modified to work with 3 columns
              // output an open <div>
              if($i % 4 == 0) { ?> 

              <div class="row">

              <?php
              }
              ?>

                <?php get_template_part( 'template/loop', 'video' ); ?>
                  <?php $i++; 
                  if($i != 0 && $i % 4 == 0) { ?>
                    </div><!--/.row-->
                    <div class="clearfix"></div>

                  <?php
                   } ?>

              <?php endwhile; } wp_reset_query();?>
| improve this answer | |
  • Ouch but not display well on combination of col-md-4 & col-sm-6. Anyone? – The Lee May 18 '17 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.