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

Question

I have a portfolio page where I would like to place three buttons that will switch between different categories. I am using data-filer to sort them into different projects. I am thinking, how can I give this data-filter a category name, so it would switch depending what category and also when adding new post (project) and using any custom category, it would place it right in that portfolio section.

For this page I have this code:

<?php

get_header(); ?>


<div class="container projects-container">
 <div class="gallery-nav" align="center">
   <button class="btn btn-default filter-button gallery-link" data-filter="all">All</button>
   <button class="btn btn-default filter-button gallery-link" data-filter="architecture">Architecture</button>
   <button class="btn btn-default filter-button gallery-link" data-filter="furniture">Furniture</button>
  </div>
  <div class="row">

  <?php 
  $subs = new WP_Query( 
    array( 
      'post_parent' => $post->post, 
      'post_type' => 'post', 
      'meta_key' => '_thumbnail_id' 
    )
  );
  if( $subs->have_posts() ) : 
    while( $subs->have_posts() ) : 
      $subs->the_post(); ?>

  <div class="col-sm-12 col-md-6 col-lg-4 cover-img filter">
        <a href="<?php the_permalink(); ?>">
      <?php the_post_thumbnail('post-thumbnail', ['class' => 'img-fluid']); ?></a>
  </div>


<?php endwhile; ?>

<?php endif; ?>

<?php get_footer();

And this jQuery code:

jQuery(document).ready(function(){

  $(".filter-button").click(function(){
      var value = $(this).attr('data-filter');

      if(value == "all")
      {
          $('.filter').show('1000');
      }
      else
      {

        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');

      }
  });

  if ($(".filter-button").removeClass("active")) {

  $(this).removeClass("active");

  }

  $(this).addClass("active");

});

Answer 1

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
      [description] => 
      [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
      [description] => 
      [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
      [description] => 
      [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="<?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>