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>