0

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");

});
0

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>

  • Thank you for explaining. I am trying to implement your code example, but till now no luck. – istoby Nov 3 '18 at 10:55
  • @istoby - What isn't working? If you ask me, - then this seem like the correct approach, if you sprinkle som of the jQuery on it, that you had in your code as well. – Zeth Nov 3 '18 at 11:03
  • @istoby As you have used reserved terms "post". It has two taxonomy sucha as category and post_tag which you have used to create the project posts. – Mohammad Tajul Islam Nov 3 '18 at 14:05
  • Thank you! I used your code and customised it for Custom Post Types and this turned out as a perfect solution. I made Custom Post Types for every section then with the tabs I switch between them. – istoby Nov 3 '18 at 14:33
  • @istoby You can even use the reserved terms such as post. It sounds great. it works for you. – Mohammad Tajul Islam Nov 3 '18 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.