Am trying to integrate Isotope with WordPress to create a filterable portfolio grid. It's displaying the Project categories (my custom post type and taxonomy) but not showing posts from that category when the button is clicked.

Any ideas?

jQuery(document).ready(function($){
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
// init Isotope
var $grid = $('.grid').isotope({
    // options
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
    });
    // filter items on button click
    $('.filter-button-group').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
    });
});

...

<section id="projects" class="container-fluid">
   <div class="col">
     <div class="button-group filter-button-group text-center">
       <button data-filter="*">All</button>
       <?php $terms = get_terms( array(
         'taxonomy' => 'project_categories',
         'hide_empty' => true,
        ));
        foreach ($terms as $term) {
            echo '<button id="category-filter" data-filter="'.$term->slug.'">'.$term->name.'</button>';
        }
        ?>
        </div>
        <div class="grid row">
          <?php $projects = new Wp_Query(['post_type'=>'projects']);
                if ($projects->have_posts()) : while ($projects->have_posts()) : $projects->the_post();
            ?>

      <a class="<?php $terms = wp_get_post_terms(get_the_id(), 'project_categories');
        foreach ($terms as $term) {
            echo $term->slug;
        }?> grid-item col-md-4 col-sm-6 col-xs-12" href="<?php the_permalink();?>">
        <div class="card">
          <div class="overlay">
            <?php the_post_thumbnail( 'full', array( 'class'=>'card-img img-fluid' ) ); ?>
            <div class="mask">
              <h4 class="text-center">
                <?php the_title(); ?>
              </h4>
            </div>
          </div>
        </div>
      </a>
      <?php endwhile; endif; ?>
    </div>
  </div>
</section>

Thanks in advance!

Am trying to integrate Isotope with WordPress to create a filterable portfolio grid. It's displaying the Project categories (my custom post type and taxonomy) but not showing posts from that category when the button is clicked.

Any ideas?

jQuery(document).ready(function($){
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
// init Isotope
var $grid = $('.grid').isotope({
    // options
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
    });
    // filter items on button click
    $('.filter-button-group').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
    });
});

...

<section id="projects" class="container-fluid">
   <div class="col">
     <div class="button-group filter-button-group text-center">
       <button data-filter="*">All</button>
       <?php $terms = get_terms( array(
         'taxonomy' => 'project_categories',
         'hide_empty' => true,
        ));
        foreach ($terms as $term) {
            echo '<button id="category-filter" data-filter="'.$term->slug.'">'.$term->name.'</button>';
        }
        ?>
        </div>
        <div class="grid row">
          <?php $projects = new Wp_Query(['post_type'=>'projects']);
                if ($projects->have_posts()) : while ($projects->have_posts()) : $projects->the_post();
            ?>

      <a class="<?php $terms = wp_get_post_terms(get_the_id(), 'project_categories');
        foreach ($terms as $term) {
            echo $term->slug;
        }?> grid-item col-md-4 col-sm-6 col-xs-12" href="<?php the_permalink();?>">
        <div class="card">
          <div class="overlay">
            <?php the_post_thumbnail( 'full', array( 'class'=>'card-img img-fluid' ) ); ?>
            <div class="mask">
              <h4 class="text-center">
                <?php the_title(); ?>
              </h4>
            </div>
          </div>
        </div>
      </a>
      <?php endwhile; endif; ?>
    </div>
  </div>
</section>

Thanks in advance!

• categories
• filters
• jquery

1 Answer 1

Figured it out. Missed the concatenated class dot for the data-filter attribute...

Changed this line:

echo '<button id="category-filter" data-filter="'.$term->slug.'">'.$term->name.'</button>';

To this:

echo '<button id="category-filter" data-filter="' . '.' .$term->slug.'">'.$term->name.'</button>';