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!

Improve this question
1

1 Answer 1

Reset to default
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
1
  • Ouch but not display well on combination of col-md-4 & col-sm-6. Anyone?
    – The Lee
    Commented May 18, 2017 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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