Team Memeber CPT Isotope Filter

team-member-iso-filtering.php

<?php
// Register and enqueue Isotope script
// Place in theme functions file
function cwpai_enqueue_isotope_script() {
    wp_enqueue_script('isotope', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js', array('jquery'), '3.0.6', true);
}
add_action('wp_enqueue_scripts', 'cwpai_enqueue_isotope_script');

// Fetch Team Member posts
$args = array(
    'post_type' => 'team_member',
    'posts_per_page' => -1,
);
$team_member_query = new WP_Query($args);

// Fetch Team Member Categories
$terms = get_terms(array(
    'taxonomy' => 'team_member_category',
    'hide_empty' => true,
));

if ($team_member_query->have_posts()) :
?>

    <div class="team-member-filter">
        <ul>
            <li><a href="#" data-filter="*">All</a></li>
            <?php foreach ($terms as $term) : ?>
                <li><a href="#" data-filter=".<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></a></li>
            <?php endforeach; ?>
        </ul>
    </div>

    <div class="team-member-grid">
        <?php while ($team_member_query->have_posts()) : $team_member_query->the_post(); ?>
            <?php 
            $terms = get_the_terms(get_the_ID(), 'team_member_category'); 
            $term_classes = '';
            if ($terms && !is_wp_error($terms)) {
                foreach ($terms as $term) {
                    $term_classes .= ' ' . esc_attr($term->slug);
                }
            }
            ?>
            <div class="team-member-item<?php echo $term_classes; ?>">
                <h2><?php the_title(); ?></h2>
                <div class="team-member-content">
                    <?php the_content(); ?>
                </div>
            </div>
        <?php endwhile; ?>
    </div>

    <script>
        jQuery(document).ready(function($) {
            var $grid = $('.team-member-grid').isotope();
            $('.team-member-filter a').click(function() {
                var filterValue = $(this).attr('data-filter');
                $grid.isotope({ filter: filterValue });
                return false;
            });
        });
    </script>

<?php
endif;

wp_reset_postdata();
?>