Multiple Tag Filtering

Question

I am writing a theme for Wordpress and I need a tag filter tool for posts, that can filter by multiple tags simultaneously, without a submit button, no checkboxes, no radio’s, and a show all posts button. (See image)

What would be the best way to come at this problem? or can anyone recommend any suitable plugins?

Answer 1

I recently wrote a bit of code which filters by one tag at a time only, but it would be pretty easy to modify it to 'toggle' the status of each tag so that you could filter by multiple tags simultaneously. You can see it working here: http://sadcookbook.recipes/sad/ . It uses the following PHP to render the tag links,

Show only:
<?php
$tags = get_tags();
foreach ($tags as $tag) {
        $taglinks[] = "<span style=\"cursor: pointer;\" class=\"filter-tag\" id=\"filter-".$tag->slug."\"><b>".$tag->name."</b></span>";
}
echo join($taglinks, " - ");`

Then it uses this jquery together with masonry to display posts depending on which tags have been clicked

jQuery('.filter-tag').click(function() {

    showAll();
    var $grid = jQuery('#grid-container');
    tag = 'tag-' + jQuery(this).attr('id').substring(7)
    classSelector = '.' + tag
    elementsToRemove = jQuery('#gridcontainer').children().children().not(classSelector).parent()

    elementsToRemove.clone().appendTo('#grid-hidden')
    $grid.masonry('remove', elementsToRemove)
    $grid.masonry('layout')

    // Save the elements removed so they can be put back later
    elementsToRemove.each(function (index) {
            id = jQuery(this).attr('id');
            if (!putBack.includes(id))
                    putBack.push(id)
    });

});