This filters posts on the page by category using Isotope Masonry, Foundation 6 Dropdown and an unordered list.
Requires: Foundation 6 Dropdown [http://foundation.zurb.com/sites/docs/dropdown.html] Isotope Masonry [http://isotope.metafizzy.co/] WordPress [https://wordpress.org/]
$(window).load(function(){
// init Isotope
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'fitRows'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filter-dropdown'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filter-dropdown');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
$('#filter-dropdown').foundation('close'); //This closes the Foundation Dropdown on link click
return false;
});
});
<div class="sort-filter small-12 columns">
<h5 class="sort">Sort By</h5>
<button class="button filter"><a href="#" data-filter="*" class="selected">ALL</a> <span id="filter-trigger"><i class="fa fa-angle-down" aria-hidden="true" data-toggle="filter-dropdown"></i></span></button>
<ul id="filter-dropdown" class="dropdown-pane" data-dropdown data-auto-focus="true" data-close-on-click="true">
<li><a href="#" data-filter="*" class="selected">ALL</a></li>
<?php
$terms = get_terms("category"); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
</div>