Skip to main content

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 !😊
Labels:

Comments

  1. DIGITAL MARKETING21 November 2024 at 12:17

    https://vataliyacomputerclasses.wordpress.com/2024/10/14/java-programming-classes-in-vadodara-gujarat/,
    https://vataliyacomputerclasses.wordpress.com/2024/10/14/java-programming-classes-in-vadodara-gujarat/

    ReplyDelete

Post a Comment

Popular posts from this blog

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
3 comments
Read more

C++: 7. Inheritance

In C++, inheritance is a process in which one object acquires all the properties and behaviors of its parent object automatically. In such way, you can reuse, extend or modify the attributes and behaviors which are defined in other class. In C++, the class which inherits the members of another class is called derived class and the class whose members are inherited is called base class. The derived class is the specialized class for the base class. Single Level Inheritance When one class inherits another class, it is known as single level inheritance. Example:-  #include <iostream>   using namespace std;    class Account {      public:      float salary = 60000;     };      class Programmer: public Account {      public:      float bonus = 5000;        };        int main(void) {   ...
Post a Comment
Read more

Py: 2. Python Fundamentals

 Variable:-  Variable is a name that is used to refer to memory location. In Python, we don't need to specify the type of variable because Python is smart enough to get variable type.  Variable names can be any length can have uppercase, lowercase (A to Z, a to z), the digit (0-9), and underscore character(_). Syntax:-  num= 345 name= "mohit" Variable Types:- Number (Int, Float) Sting Boolean Get the Type of the variable:- x = 5 y = "John" print(type(x)) print(type(y)) Output:-  <class 'int'> <class 'str'> Operators:-  The operator can be defined as a symbol which is responsible for a particular operation between two operands. Python provides a variety of operators, which are described as follows. Arithmetic Operators:-  Assume variable a holds 10 and variable b holds 20, then − + Addition Adds values on either side of the operator. a + b = 30 - Subtraction Subtracts right hand operand from left hand operand. a – b = -10 * Multiplicat...
Post a Comment
Read more