Let’s say, I have lists of categories in checkbox and I want to filter posts based on the selected categories. I have three conditions for categories filter :
- I want to check “All” checkbox by default and display all the posts accordingly.
- If I check/select the filter other than “All”, the “All” checkbox should be unchecked & the posts of checked categories should be displayed
- If I check “All” categories, other selected categories should be unchecked
I begin…
Firstly, list all active categories associated with the posts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="checkboxes-group"> <input type="checkbox" value="all" name="category[]" class="js-filter-checkbox" id="all" /> <label for="all"><?php echo __('All','app')?></label> </div> <?php $categories = get_categories( ['hide_empty' => 1]); foreach ($categories as $cat) { ?> <div class="checkboxes-group"> <input type="checkbox" value="<?=$cat->term_id?>" name="category[]" class=" js-filter-checkbox" id="<?=$cat->term_id?>" /> <label for="<?=$cat->term_id?>"><?=$cat->name?></label> </div> <?php } ?> |
Add jQuery that tricks the checkbox as per requirement…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery(function(){ [].forEach.call(document.querySelectorAll('.js-filter-checkbox'), function(element){ element.addEventListener('change', function(event){ var inputElement = event.currentTarget; var count = document.querySelectorAll('.js-filter-checkbox:checked').length; if(inputElement.checked && inputElement.value != 'all'){ document.querySelector('.js-filter-checkbox[value="all"]').checked = false; } if(inputElement.checked && inputElement.value == 'all'){ document.querySelectorAll('.js-filter-checkbox:not([value="all"])').forEach(function(item){ item.checked = false; }); } if(count == 0) document.querySelector('.js-filter-checkbox[value="all"]').checked = true; submitCategory(); }) }); }); |
In the above js code,
1. All the checkbox are selected using querySelectorAll
2. var count = document.querySelectorAll(‘.js-filter-checkbox:checked’).length, gives the number of checked categories.
3. If the checkbox is checked and among the checked categories there is no “All”, “ALL’ is unchecked
if(inputElement.checked && inputElement.value != ‘all’){
document.querySelector(‘.js-filter-checkbox[value=”all”]’).checked = false;
}
4. If one of the checked category is “All”, all the other checked categories are unchecked
if(inputElement.checked && inputElement.value == ‘all’){
document.querySelectorAll(‘.js-filter-checkbox:not([value=”all”])’).forEach(function(item){
item.checked = false;
});
}
5. If non of the categories is checked, “All’ category is checked
if(count == 0) document.querySelector(‘.js-filter-checkbox[value=”all”]’).checked = true;
On page load “All” categories is checked so that all the posts are displayed by default
|
1 2 3 4 |
jQuery( document ).ready(function() { $('#all').prop('checked', true); submitCategory(); }); |
Ajax code is added to filter the posts based on checked categories
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function submitForm() { var selectedCategories = []; var catInput ="" ; var filterCheckbox = document.querySelectorAll(".js-filter-checkbox"); if(filterCheckbox.length > 0 ) { [].forEach.call(filterCheckbox, function (item) { if (item.checked) selectedCategories.push(item.value); }); if(selectedCategories.length > 0) { catInput = selectedCategories.join(","); } } var frmData = 'cat='+catInput +'&date='+year+'&action=display_news_contents'; var ajaxURL = "<?=admin_url('admin-ajax.php')?>"; $.ajax({ url: ajaxURL, data: frmData, success: function(response){ if (response.length > 0) { $(".js-news-list").html(response); } } }); } |
Hook that handles our ajax request is added on function.php :
|
1 2 |
add_action( 'wp_ajax_display_posts_contents', 'display_news_posts_callbck' ); add_action( 'wp_ajax_nopriv_display_post_contents', 'display_news_posts_callbck' ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function display_news_contents_callbck() { extract($_GET); $args = ['post_type' => "post",'posts_per_page'=>-1, 'post_status'=>'publish']; if( !empty($_GET['cat'])&& $_GET['cat']!="all") { $args['cat'] = $_GET['cat']; } $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); the_title("<h1>","</h1>"); endwhile; endif die(); } |
Finally, posts are filtered based on the selected categories.
Hits: 989