Isotope filter in single template
-
I’m using isotope to filter a bunch of posts based on the assigned taxonomy (each post only has one taxonomy). Quite straight forward in the archive template but I want to keep the filter menu in the single template.
Any ideas on how to keep the corresponding taxonomy selected and clickable?
I guess I would have to get the taxonomy slug from the post, compare it to the filter menu items and assign a .selected class to the corresponding tag. And direct the menu items back to the archive page, on click…
Code in archive template is as follows:
<div id="options"> <?php // Get Projectos Categories $tipos = get_terms('projectos', array( 'orderby' => 'ID', 'order' => 'ASC')); ?> <!-- Projectos Filter --> <ul id="filters" class="button-group option-set clearfix" data-option-key="filter"> <li> <a class="button selected" data-filer="*">Todos</a> </li> <?php foreach($tipos as $tipo): ?> <li><a class="button" data-filter="[data-category=<?php echo $tipo->slug; ?>]"><?php echo $tipo->name; ?></a></li> <?php endforeach; ?> </ul> <!-- Projectos Filter Ends --> </div>…
<script type="text/javascript"> jQuery(document).ready(function( $ ) { $('#filters a').click(function(){ //removes class from all items to "clear" the class from your menu $('#filters a').removeClass("selected"); //adds the class to whichever item you clicked $(this).addClass("selected"); // filter items on button click $('#filters').on( 'click', 'a', function() { var filterValue = $(this).attr('data-filter'); $container.isotope({ filter: filterValue }); }); }); }); </script>
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
The topic ‘Isotope filter in single template’ is closed to new replies.