Ajax Filter — Filter by Name and Custom Taxonomies

by Tomasch   Last Updated March 15, 2019 17:08 PM

I am creating a staff page. I want to filter these by name, by team or by area of expertise. The name is just the post title, and the other two are custom taxonomies/terms under the staff post type.

In the code attached, the taxonomy filters works (I can sort by team and or expertise); but when I add the name filter, I can only sort by name. It breaks the other sorts.

I'm sure I've mis-formed my function somehow but I need a little help on how to modify it so they all work at the same time.

Function with WP_Query:

function my_filters()
    {
        $args = array(
            'orderby'        => 'title',
            'post_type'      => 'staff',
            'posts_per_page' => -1,
        );

        // When I add this, I can ONLY filter by post title; the other two dont' work
        if (isset($_POST['namefilter'])) {
            $args['name'] = $_POST['namefilter'];
          };

        // Without the staff filter above, I can sort by either of these two taxonomies
        if (isset($_POST['teamfilter'])) {
            $args['tax_query'] = array(
              'relation'       => 'AND',
                  array(
                    'taxonomy' => 'team_group',
                    'field'    => 'id',
                    'terms'    => $_POST['teamfilter']
                  ),
                  array(
                    'taxonomy' => 'expertise',
                    'field'    => 'id',
                    'terms'    => $_POST['expertisefilter']
                  )

            );
        };



        $query = new WP_Query($args);

        if ($query->have_posts()) :
            while ($query->have_posts()): $query->the_post(); ?>
                // Display my posts here
            <?php endwhile;
        wp_reset_postdata(); else :
            echo 'No posts found';
        endif;

        die();
    }

    add_action('wp_ajax_nopriv_customfilter', 'my_filters');
    add_action('wp_ajax_customfilter', 'my_filters');

Form:

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php global $post;
$args = array( 'post_type' => 'staff', 'numberposts' => -1, 'orderby' => 'title', 'order' => 'asc');

$myposts = get_posts( $args );
  echo '<select name="namefilter"><option>Search By Name</option><option value="all">All</option>';
foreach ( $myposts as $post ) : setup_postdata( $post );
  echo '<option value="' . $post->post_name . '">' . $post->post_title . '</option>';
endforeach;
  echo '</select>';
wp_reset_postdata();?>

    <?php
        if( $terms = get_terms( 'team_group', 'orderby=name' ) ) :
            echo '<select name="teamfilter"><option>Search By Group</option><option value="all">All</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';
        endif;
    ?>
    <?php
        if( $terms = get_terms( 'expertise', 'orderby=name' ) ) :
            echo '<select name="expertisefilter"><option>Search By Area of Expertise</option><option value="all">All</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';
        endif;
    ?>

    <!-- <button>Apply filters</button> -->
    <div class="message"></div>
    <input type="hidden" name="action" value="customfilter">
</form>
<div id="response">
  Show When Empty
</div>

jQuery:

(function ($) {
    $(document).ready(function () {


jQuery(function($){
    $('#filter').change(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('.message').text('Applying Filters...');          },
            success:function(data){
                filter.find('.message').text('');                $('#response').html(data);
            }
        });
        return false;
    });
});
});
})(jQuery);


Related Questions


Updated January 16, 2018 18:08 PM

Updated April 10, 2017 09:08 AM

Updated August 14, 2018 12:08 PM

Updated January 28, 2019 14:08 PM

Updated February 18, 2019 22:08 PM