WP: 8. Dynamically show post taxonomies and their data in tab format [Solved]

   

Today I ran into a problem, I need to dynamically show post taxonomies and their data in tab format and found this solution.

And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy.

Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever.

Step 1: Get the taxonomies terms first

<?php

    $terms = get_terms( array(

      'taxonomy' => 'off_plan_categories',

      'hide_empty' => true,

    ) );

    // echo '<pre>';

    // print_r($terms);

    // die;

?>

Step 2: Execute loop first for tab navigation

<nav id="offPlanPropertyTabs" class="offplan-property-type-tabs nav nav-tabs">

<?php foreach($terms as $key => $term): ?>

  <button class="nav-item nav-link <?php if($key==0): ?> active <?php endif; ?>" data-bs-toggle="tab" data-bs-target="#tab<?php echo $term->term_id ?>"><?php echo $term->name; ?></button>

<?php endforeach; ?>

 </nav>

Step 3: Now query the posts with terms and their specific id

<div class="tab-content">

<?php foreach($terms as $key => $term): ?>

<?php

  $args = array(

'post_type' => 'offplan',

'posts_per_page' => -1,

'order' => 'ASC',

'tax_query' => array(

  array(

  'taxonomy' => 'off_plan_categories',

  'field' => 'term_id',

  'terms' => $term->term_id

   )

)

  );

  $offplan_query = new WP_Query($args);              

  if($offplan_query!=''):

?>

<div id="tab<?php echo $term->term_id ?>" class="tab tab-pane fade  <?php if($key==0): ?> show active <?php endif; ?>">

  <div class="listing">

<div class="row gy-5">

  <?php while ( $offplan_query->have_posts() ): $offplan_query->the_post()?>

  <div class="col-lg-4">

<div class="c-offplan-property">

  <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($offplan_query->ID));?>" alt=""

class="featured-image">

  <p class="title-alias"><?php the_title();?></p>

  <p class="title"><?php the_field('listing_location'); ?></p>

  <div class="meta">

<div class="attribute-list">

  <div class="attribute">

<h5 class="alias">Type</h5>

<p class="text"><?php echo $term->name; ?></p>

  </div>

  <div class="attribute">

<h5 class="alias">Starting Price</h5>

<p class="text"><?php the_field('listing_price'); ?></p>

  </div>

  <div class="attribute">

<h5 class="alias">Launch Year</h5>

<p class="text"><?php the_field('listing_launch_year'); ?></p>

  </div>

</div>

<a href="<?php the_permalink(); ?>" class="cta-btn">

  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"

stroke="currentColor">

<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />

  </svg>

</a>

  </div>

</div>

  </div>

  <?php 

endwhile;

wp_reset_postdata();

  ?>

</div>

<div class="d-flex mt-5">

  <button class="button-primary mx-auto">View All</button>

</div>

  </div>

</div>

<?php endif;?>

<?php endforeach;?>

</div>

Now Cheers !😊