1

I have a custom post type "artist".

It has an associated custom taxonomy "artist_type" with terms "voice", "actor", "corporate"

An "artist" also has custom fields for gender, location, agerangefrom and agerangeto. The latter 2 fields stipulate the age range that an actor/artist can act in.

I'm displaying artists according to their artist_type taxonomy — so using taxonomy-artist-type.php to display "/artist_type/voices/" and "/artist_type/actors"/ and "/artist_type/corporate/"

That's all fine.

But I need to add in a filter so that a user can narrow down each of these three categories according to the custom fields mentioned above: gender, location etc

I came across a site here that does something similar here: http://artists.derricktalentelite.com.au/?post_type=actor&gender=male

I'm getting confused on how to set this up in my scenario. DO I need to be using meta_query and/or pre_get_posts?

The user needs to be able to combine filters, for e.g., on the voices page: male in the age range from 20-30 based in London. How do I formulate the query string in the url to pass these parameters?

Any clues on how best to proceed would be appreciated.

1

Best way to proceed is with ajax and a tax_query. Pre_get_posts filter only makes sense if you want to change the query on the template hierarchy, so the 'standard' taxonomy.php stuff.

This approach:

  1. make a page with that show the default list, so maybe 'all', just a simple post_type query. And a side menu with all your filters as links that can be clicked of course.

  2. make a php file that gets a specific term or terms through a tax_query, using $_GET, something like this:

    <?php
        define('WP_USE_THEMES', false);
        require_once('../../../wp-load.php');
        $gender = (isset($_GET['gender'])) ? $_GET['gender'] : 0;
        $args = array(
    'post_type' => 'artist',
    'tax_query' => array(
        array(
            'taxonomy' => 'artist_type',
            'field' => 'slug',
            'terms' => $gender
        )
    )
        );
        $tag_query = new WP_Query( $args );
        if ($tag_query->have_posts()) : while ($tag_query->have_posts()) :  $tag_query->the_post();
    

That's just a starting example. Expand it with other variables through $_GET and check which ones are using in the url (?gender=male&voice=something).

Be sure this loop has the exact same html structure as you initially loaded stuff, so probably just a loop of item divs.

  1. Then use jquery to load the data in the file above, something like this:

    <script>
    jQuery(document).ready(function($) {
    var template_path = $('#template_path').html();
        $.querySort = {
        path_to_template: template_path,
        }
    
        $('.filter').click(function(){
    $(this).toggleClass('active');
            var term = $(this).attr('data-gender');
    var query = '?term=' + term;
        $('#data_wrapper').animate({opacity: 0}, function() {
            $('#data_wrapper').append('<div id="loader"></div>');  
            $("#data_wrapper").load($.querySort.path_to_template + '/ajax_load_terms.php' + query, function() {
                $('#loader').remove();
                $("#data_wrapper").animate({opacity: 1}, function() { });
            });
        });
        return false; //prevents a link from being clicked, if needed
    
    });
    </script>
    

See how it loads the file you just created, here ajax_load_terms.php. It adds the query to the url, and takes the term from the selector you click, which looks like this in my example:

    <a href="javascript:void(0)" data-gender="[php echo your term here]">

Also note that the js needs to know the path to the ajax file, which it gets from a hidden div on you main page like this

    <div style="display: none" id="template_path"><?php bloginfo('template_url') ?></div>

I hope you get the direction and are able to figure out the holes in the code, if not give me a shout, it's quite complicated by the looks of it, but it's not really.

Good luck.

1
  • Thanks matiyin for your detailed response. I'll work through this and let you know how I go. It makes sense to use ajax here I think rather than pre_get_posts and the taxonomy template. How would I be adding in a meta_query in conjunction with the tax_query? – user6719 Dec 30 '13 at 21:27

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.