Wrap the whole thing within a form and add a submit button in it:
<form method="POST" action="">
<ul class="filter-sub-dropdown">
...
</form>
Use term IDs as checkbox values instead of slugs (you’ll save a little server resources):
$discipline->slug;
> $discipline->term_id
Then, in your functions.php file check if that form has been submitted, and change WP’s query to include only posts having at least one of those terms:
add_action('pre_get_posts', function($query){
// only do this if we have user input and if this is the main query
if(isset($_POST['discipline']) && $query->is_main_query()){
// sanitize
$disciplines = array_map('intval', $_POST['discipline']);
// prepare a taxonomy query
$my_tax_query = array(
'taxonomy' => 'discipline',
'field' => 'id',
'terms' => $disciplines,
'operator' => 'IN',
);
// include it in the main query
$query->set('tax_query', array($my_tax_query));
}
});
Adding AJAX support is very easy. Just hook a function on the form submit event (use preventDefault()
to prevent its submission) (or on the input change event if you don’t want the submit button), serialize input values into a variable, do a $.ajax
POST request where you pass that variable and get the contents of the DIV with the posts from the response. And replace existing contents with it…