jenhuls
9/2/2016 - 2:48 PM

This filters posts on the page by category using Isotope Masonry, Foundation 6 Dropdown and an unordered list. Requires: Foundation 6 Drop

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>