Looping inside a wordpress template

November 8, 2022

I’m trying to create a template that shows card of a definite category. I’ve manage to get it but there somenthing that I’m missing. The class ‘card-deck’ keep iterating every loop. How can I state that class once? I’ve tried to place outside the loop but then it effect only the first iteration.

Here is the code

<?php
   // the query
   $the_query = new WP_Query(array(
   'category_name' => 'events',
   'post_status' => 'publish',
   ));
   ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="card-deck text-center">
   <div class="card">
      <img
         src="<?=wp_get_attachment_url( get_post_thumbnail_id() ); ?>"
         class="card-img-top wp-post-image"
         alt="<?php the_title_attribute(); ?>"
         style="width:100%; height:auto;"
         />
      <div class="card-body">
         <h5 class="card-title"><?php the_title(); ?></h5>
         <p class="card-text"><?php echo get_post_meta($post->ID, 'Event Date', true);?></p>
         <p class="card-text">
            <small class="text-muted"
               ><a
               href="<?php the_permalink(); ?>"      
               >Show More</a
               ></small
               >
         </p>
      </div>
   </div>
</div>

<?php endwhile; ?>

>Solution :

Put it outside the loop not forgetting the last </div> also to be put outside of the loop along with it.

<div class="card-deck text-center">
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
   <div class="card">
      <img
         src="<?=wp_get_attachment_url( get_post_thumbnail_id() ); ?>"
         class="card-img-top wp-post-image"
         alt="<?php the_title_attribute(); ?>"
         style="width:100%; height:auto;"
         />
      <div class="card-body">
         <h5 class="card-title"><?php the_title(); ?></h5>
         <p class="card-text"><?php echo get_post_meta($post->ID, 'Event Date', true);?></p>
         <p class="card-text">
            <small class="text-muted"
               ><a
               href="<?php the_permalink(); ?>"      
               >Show More</a
               ></small
               >
         </p>
      </div>
   </div>
<?php endwhile; ?>
</div>