Ajax Filter — Filter by Name and Custom Taxonomies

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);

Read more here:: Ajax Filter — Filter by Name and Custom Taxonomies

Leave a Reply

Your email address will not be published. Required fields are marked *