WordPress loop keeps producing an extra open and closed div

1 Views

I am trying to create a slider with two divs inside of it and then close. Right now I have a counter and if the posts are divisible by two it will close and open a new div. Unfortunately it is opening and closing an empty div too. Here is my code: 

   <div id="brew-slider" class="global-width cycle-slideshow" data-cycle-fx="fade" data-cycle-timeout="0" data-cycle-slides="> div" data-cycle-pager=".cycle-pager" data-cycle-auto-height="container">
<?php
  $args = array(
    'post_type' => 'beer',
  );
  $beer_list = new WP_Query( $args );
  $post_counter = 1;
  if($beer_list->have_posts()){
  ?>
  <div class="brew-slide group">
  <?php
    while($beer_list->have_posts()) {
      $beer_list->the_post();
      $hops = get_post_meta($post->ID, 'hops', true);
      $url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
      $abv = get_post_meta($post->ID, 'abv', true);
      $ibu = get_post_meta($post->ID, 'ibu', true);
      $availability = get_post_meta($post->ID, 'availability', true);
  ?>
    <div class="col2-slide floatleft group">
      <img src="<?=$url[0]?>" alt="<?php the_title(); ?>">
      <div class="brew-content">
        <h3 class="brew-title"><?php the_title(); ?></h3>
        <?php the_tags(); ?>
        <?php the_content();?>
        <p><strong>Hops:</strong> <?=$hops?></p>
        <h3 class="green-box">ABV: <?=$abv?>%</h3>
        <h3 class="green-box">IBU's: <?=$ibv?></h3>
        <h4 class="green-box"><?=$availability?></h4>
     </div>
    </div>
 <?php
     if($post_counter % 2 == 0) {echo '</div><div class="brew-slide group">';}
     $post_counter++;
  }//End While Loop
 ?>
  </div>
 <?php
  }//End of If
  else {
 ?>
   <p>Currently no beers listed</p>
 <?php
  }
  wp_reset_postdata();
?>
</div>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. You should check if $post_counter is even and this is not the last post. Like so:

    if($post_counter % 2 == 0 && $beer_list->have_posts()) 
  {echo '</div><div class="brew-slide group">';}

  2. So after some research I was able to get it on my own. Thanks for all those who tried to help. Here is the answer though to what I did.

                                <?php
                                $args = array(
                                    'post_type' => 'beer',
                                );
                                $beer_list = new WP_Query( $args );
                                if($beer_list->have_posts()){
                                ?>
                            <?php
                                    while($beer_list->have_posts()) {
                                        $beer_list->the_post();
                                        $hops = get_post_meta($post->ID, 'hops', true);
                                        $url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
                                        $abv = get_post_meta($post->ID, 'abv', true);
                                        $ibu = get_post_meta($post->ID, 'ibu', true);
                                        $availability = get_post_meta($post->ID, 'availability', true);
                                        if($beer_list->current_post%2 == 0) echo "n".'<div class="brew-slide group">'."n";
                                    ?>
                            <div class="col2-slide floatleft group">
                                   <img src="<?=$url[0]?>" alt="<?php the_title(); ?>">
                                <div class="brew-content">
                                    <h3 class="brew-title"><?php the_title(); ?></h3>
                                    <?php the_tags(); ?>
                                    <?php the_content();?>
                                    <p><strong>Hops:</strong> <?=$hops?></p>
                                        <h3 class="green-box">ABV: <?=$abv?>%</h3>
                                        <h3 class="green-box">IBU's: <?=$ibv?></h3>
                                        <h4 class="green-box"><?=$availability?></h4>
                                </div>
                            </div>
                                <?php
                                        if($beer_list->current_post%2 == 1 || $beer_list->current_post == $beer_list->post_count-1) echo '</div>'."n";
                                    }
                                ?>
                                <?php
                                }
                                else {
                                ?>
                                <p>Currently no beers listed</p>
                            <?php
                                }
                                wp_reset_postdata();
                            ?>