I’ve recently been working on a site (more details soon!) which requires the sorting of content using the brilliant Isotope.js plugin, and more specifically using the combination filters.
To do this I needed to create a couple of unordered lists of categories to use as the filters, but they need a few bits of specific mark-up. The final product should look something like this…
1 2 3 4 5 6 7 | <h2>Filter the Content</h2> <ul class="filter" data-filter-group="color"> <li><a href="#filter-color-any" data-filter-value="" class="selected">All</a> <li><a href="#filter-color-red" data-filter-value=".red">red</a> <li><a href="#filter-color-blue" data-filter-value=".blue">blue</a> <li><a href="#filter-color-yellow" data-filter-value=".yellow">yellow</a> </ul> |
In short this gives you a URL hash and the data-filter-value is the class of the items you want to filter.
You run into problems trying to do this using WordPress categories as the standard wp_list_categories just dumps out a load of pre-formatted list items that we have little control over. Instead we have to use the get_categories function which allows us more control over formatting the results. So, here goes…
1 2 3 4 5 6 7 8 9 10 11 12 | <h2>Filter the Content</h2> <ul class="filter" data-filter-group="color"> <li><a href="#filter-topic-any" data-filter-value="" class="selected">All</a></li> <?php //Grab the child categories $categories=get_categories('child_of=XX'); foreach($categories as $category) { //and format them for use as isotope filters echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter-value=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>'; } ?> </ul> |
This grabs all the children of a given category (replace ‘XX’ with your category number!), and then formats them for use as Isotope filters. You can then repeat this code to pull in different lists for use as filters.
Then our jQuery, assuming you’ve already loaded in jQuery and Isotope (this is pretty much taken straight from the Isotope Documentation)…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | $(document).ready(function () { //Set your isotope area var $container = $('#yourContainer'), filters = {}; //Set our items to be filtered, .post will work if you're using the post_class(); function $container.isotope({ itemSelector : '.post' }); //Set the buttons to filter the content $('.filter a').click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return; } var $optionSet = $this.parents('.option-set'); //change selected class $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); //store filter value in object //i.e. filters.color = 'red' var group = $optionSet.attr('data-filter-group'); filters[ group ] = $this.attr('data-filter-value'); //convert object into array var isoFilters = []; for ( var prop in filters ) { isoFilters.push( filters[ prop ] ) } var selector = isoFilters.join(''); $container.isotope({ filter: selector }); return false; }); }); |
Job’s a good’un!