Filter custom post types by custom field using AJAX

Filtrify doesn’t actually use AJAX to get a new data set, it simply hides all of the elements which don’t match your current filter. Because you already have a page displaying all books (for example) you are already pretty well set up to use Filtrify.

The only extra step that you need to take is to add the data-genre attribute to each of your books (or films,) similar to the first usage example on the filtrify site.

To do so, you’ll need to modify the loop on your archive page so that the element that wraps each book item has an atttribute called data-genre with a comma separated list of genres that the book fits in. If you’re storing the genres as a taxonomy called genre, it’s not too hard to modify the loop.

If your current loop looks like this:

<div class="item">
    [item content here]
</div>

You would change it to look like this:

<?php
// place this code inside the loop
$data_genre="";
$terms = wp_get_post_terms( get_the_id(), 'genre' );
if ( count($terms) ) {
    foreach ($terms as $term) { // build a list of terms
        $data_genre .= $term->name.', ';
    }
    if ($data_genre != '') {
        $data_genre = rtrim( $data_genre, ', ' ); // trim off last comma
        $data_genre=" data-genre="".$data_genre.'"'; // make it a valid html attribute
    }

}
?>
<div class="item"<?php echo $data_genre; ?>>
    [item content here]
</div>

Once you’ve done that, you should see in your source code that your archive items now look something like this:

<div class="item" data-genre="Sci-Fi, Mystery">
    [item content here]
</div>

From there, just implement filtrify as shown in the usage example and you will be all set.