loop – looping inside bootstrap component

I am trying to loop through the bootstrap list group component inside a wordpress template.

this is the basic bootstrap code

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

I wrote this code which can show the elements of the range selected, but tabable panes don’t work for range elements.

    <div class="col-xs-4 m-5">
   <div class="list-group list-group-horizontal" id="list-tab" role="tablist">
      <a
         class="list-group-item list-group-item-action active"
         id="list-<?php echo get_the_date('Y'); ?>-list"
         data-toggle="list"
         href="#list-<?php echo get_the_date('Y'); ?>"
         role="tab"
         style="color:black !important"
         aria-controls="<?php echo get_the_date('Y'); ?>"
         ><?php echo get_the_date('Y'); ?></a
         >
      <a
         class="list-group-item list-group-item-action active"
         id="list-archive-list"
         data-toggle="list"
         href="#list-archive"
         role="tab"
         style="color:black !important"
         aria-controls="archive"
         >archive</a
         >
   </div>
</div>
<?php
   // the query
   $the_query = new WP_Query(array(
   'category_name' => 'events',
   'post_status' => 'publish',
   'order' => 'DESC',
   ));
   ?>
<div class="tab-content" id="nav-tabContent">
   <div
      class="tab-pane fade show active"
      id="list-<?php echo get_the_date('Y'); ?>"
      role="tabpanel"
      aria-labelledby="list-<?php echo get_the_date('Y'); ?>-list"
      >
   </div>
   <?php echo do_shortcode('[sc name="archive"][/sc]'); ?>
</div>
<div class="row card-deck text-center">
   <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
   <div class="col-sm-6 col-md-6 mb-4">
      <div class="card" style="box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important">
         <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 ucfirst(get_the_date('l j F Y')); ?></p>
            <p class="card-text">
               <small class="text-muted"
                  ><a
                  href="<?php the_permalink(); ?>"      
                  >Show More</a
                  ></small
                  >
            </p>
         </div>
      </div>
   </div>
   <?php endwhile; ?>
</div>

If I click on the archives tab, which is just a bunch of static text it works fine. I think the div with the class “tab-content” is placed in the wrong place but I can’t figure out where to put it.

Leave a Comment