How to filter posts by categories?

Question

HTML:

<ul id="filters">
  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".metal">metal</a></li>
  <li><a href="#" data-filter=".transition">transition</a></li>
  <li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
  <li><a href="#" data-filter=":not(.transition)">not transition</a></li>
  <li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
</ul>
<div id="container">
  <div class="element transition metal">...</div>
  <div class="element post-transition metal">...</div>
  <div class="element alkali metal">...</div>
  <div class="element transition metal">...</div>
  <div class="element lanthanoid metal inner-transition">...</div> 
  <div class="element halogen nonmetal">...</div> 
  <div class="element alkaline-earth metal">...</div>
  ...
</div>

JS Logic:

// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

// filter items when filter link is clicked
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});

It seems you missed an “data-filter” attribute on your filter links and the class to filter on inside of the class attribute of your post items
You could print the category slug in the “data-filter” attribute and print the same value on class attribute of your post items.

UPDATE

According to the new replies,

index.php

<!-- Taken from index.php -->

<!-- Start Filters -->
<?php
    $taxonomy = 'portfolio_categories';
    $terms = get_terms($taxonomy); // Get all terms of a taxonomy

    if ( $terms && !is_wp_error( $terms ) ) :


?>


<ul class="option-set" data-option-key="filter"> 
  <li class="filter-icon hidden-phone">&#0065;</li> 
  <li><a href="#" data-option-value="*">All</a></li> 
  <?php foreach ( $terms as $term ) { ?> 
  <li><a data-option-value=".<?php echo $term->slug; ?>" href="#" ><?php echo $term->name; ?></a></li> 
<?php } ?> 
</ul>
<?php endif;?>
<!-- End Filters -->

<!-- Start Portfolio items loop -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


<?php  
    $title= str_ireplace('"', '', trim(get_the_title()));  
    $desc= str_ireplace('"', '', trim(get_the_content()));

    /*
     * Note: get_the_terms() function, retrieves all the terms of a taxonomy, that belong to the post.
     * Return: (array|false|wp_error)
     *  1. array of terms object
     *  2. false if no terms in taxonomy
     *  3. wp_error object if the given taxonomy is an invalid one
     */

    $termsObj = get_the_terms( $post->ID, 'portfolio_categories' );
    if ( $termsObj && !is_wp_error( $termsObj ) ) :
        //We need only the slug of this/these term(s) so looping through the result to grab only the slug value and store it in a new array
        $terms = array();
        foreach( $termsObj as $obj ){
            $terms[] = $obj->slug;
        }
        //Join or implode the new array to a string and then put it in the class attribute of the portoflio item
        $termsString = join( ' ', $terms);
    endif;
?>     

<div class="item post item span4 isotope-item <?php echo $termsString; ?>">
    <a class="project-wrp fancybox" title="<?=$title?>" rel="lightbox[work]" href="<?php print portfolio_thumbnail_url($post->ID) ?>">
        <div class="profile-photo"><div class="profile-icon">&#0102;</div><?php the_post_thumbnail(array('230','170'),array('alt' => '')); ?> </div>  
        <div class="project-name"><?php echo $title; ?></div>
        <div class="project-client"><?php echo $desc; ?></div>
    </a>
</div>  

<?php endwhile; endif; ?>
<!-- End Portofolio items loop -->

Related Posts: