Add custom category name as data-filter to switch between these categories

To get all the categories, you need to use get_terms().

Give the taxonomy slug. Here “kormo-portfolio-cat” is used. Then the category list is retrieved like this:

$cats = get_terms('kormo-portfolio-cat');

Let’s check,

echo "<pre>";
  print_r($cats);
echo "</pre>";

We will see the code like these

Array
(
  [0] => WP_Term Object
    (
      [term_id] => 7
      [name] => Graphics Design
      [slug] => graphics-design
      [term_group] => 0
      [term_taxonomy_id] => 7
      [taxonomy] => kormo-portfolio-cat
      Add custom category name as data-filter to switch between these categories => 
      [parent] => 0
      [count] => 2
      [filter] => raw
    )
  [1] => WP_Term Object
    (
      [term_id] => 8
      [name] => SEO
      [slug] => seo
      [term_group] => 0
      [term_taxonomy_id] => 8
      [taxonomy] => kormo-portfolio-cat
      Add custom category name as data-filter to switch between these categories => 
      [parent] => 0
      [count] => 1
      [filter] => raw
    )
  [2] => WP_Term Object
    (
      [term_id] => 6
      [name] => Web Design
      [slug] => web-design
      [term_group] => 0
      [term_taxonomy_id] => 6
      [taxonomy] => kormo-portfolio-cat
      Add custom category name as data-filter to switch between these categories => 
      [parent] => 0
      [count] => 2
      [filter] => raw
    )
  )
)

Now, we will take only two things such as slug & name from the array.

To print the category name

<?php echo $cat->slug; ?>

To print the category slug

<?php echo $cat->slug; ?>

Here is an example for category list

<?php
if( $cats ){
  foreach ($cats as $cat ) {
  ?>

   <button data-filter=".<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></button>

   <?php 
   } 
 }
?>

Here is an full example of portfolio section.

<div class="container">
  <div class="row">
    <div class="col-xl-12">
      <div class="portfolio-menu mb-40 text-center">
        <button class="active" data-filter="*">ALL</button>
        <?php 
        $cats = get_terms('kormo-portfolio-cat');
        if( $cats ){
          foreach ($cats as $cat ) {
            ?>

            <button data-filter=".<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></button>

            <?php 
          } 
        }
        ?>
      </div>
    </div>
  </div>
  <div class="row grid">
    <?php 
    $q = new WP_Query( array(
      'post_type'     => 'kormo-portfolio',
      'posts_per_page'=> -1
    ));

    if( $q->have_posts() ):
      while( $q->have_posts() ):$q->the_post();

        ?>

        <?php 
        $cats = get_the_terms(get_the_id(), 'kormo-portfolio-cat');
        $cat_classes="";

        if( is_array($cats) ){
          foreach ( $cats as $cat ) {
            $cat_classes .= $cat->slug.' ';
          }
        }
        ?>
        <div class="col-xl-4 col-lg-4 col-md-6 grid-item cat3 cat2 <?php echo $cat_classes; ?>">
        <div class="portfolio-wrapper mb-30">
          <div class="portfolio-thumb">
            <?php the_post_thumbnail(array(370, 333)); ?>
          </div>
          <div class="portfolio-content">
            <h3>
              <a href="https://wordpress.stackexchange.com/questions/318302/<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h3>
            <span>
              <?php 
              $cats = get_the_terms(get_the_id(), 'kormo-portfolio-cat');

              if( is_array($cats) ){
                foreach ( $cats as $cat ) {
                  echo $cat->slug.' ';
                }
              }
              ?>
            </span>
          </div>
        </div>
      </div>
    <?php   endwhile; ?>
  <?php endif; ?>
</div>

Leave a Comment