I have a few custom post types (books, films etc) created with WP-Types.

I then have a custom field called Genre, created with ACF.

If a user selects "Books" from the dropdown on the frontpage, he is taking to an archive page displaying all the books available. What I would like now is to create a dropdown on that archive page, that lists all the genres available in "Books". When the user selects a genre from that dropdown, the posts must be filtered with AJAX. I have been trying for hours with no success to get this filtering plugin working which seems to do exactly what I need:


I understand that something like this is quite difficult to achieve, but hoping someone on here knows Wordpress enough to help me achieve this.


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]

You would change it to look like this:

// 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]

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]

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


Wordpress and AJAX.

First, you have to register and action, and link that action to a PHP function.

In that function, you can use a custom WP_Query to return the posts for each genre.

You will need to use javascript to create the avascript function executed when someone clicks and option from the dropdown, that function has to make a call to the action you registered, and when it gets the response, use jQuery to replace the posts in the archive page with the posts returned by the query.

That's basically what you need, there are a lot of questions about ajax here, so search and if you can't figure something out, then ask.

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.