Add wherever you would like navigation to go

<?php
$terms2 = get_terms([
'taxonomy' => 'TAXONOMY_SLUG', // enter taxonomy to sort by
'hide_empty' => false,
'orderby' => 'count', //custom sorting by # of posts within taxonomy
'order' => DESC, // largest to smallest
]);
echo '<div id="cpt-toggle-navigation">';
foreach($terms2 as $term2) {
$stripped = str_replace(" ", "", $term2->name);

echo '<div class="button" id="' . $stripped . '">' . $term2->name . '</div>';
}
echo '</div>';

?>

Add Script Footer

<script>
jQuery("#cpt-toggle-navigation .button").click(function() {
var buttonID = jQuery(this).attr('id');
var buttontarget = '.'+buttonID+'-listing';
var queryAll = 'All'

if( buttonID != queryAll) {
jQuery(buttontarget).siblings().hide();
jQuery(buttontarget).toggle();

} else {
jQuery(buttontarget).show();
}

});
</script>

Add the following into the class for the custom-post-type container

( ex. <article class="HERE"> )

<?php $terms = get_the_terms( $post->ID, ' TAXONOMY_SLUG ' ); foreach($terms as $term) { $stripterm = str_replace(" ", "", $term->name); echo $stripterm . '-listing ';} ?>

Add CSS ( just to help you get started )

/*CPT Toggle Nav Button CSS*/
#cpt-toggle-navigation {
display: flex;
float: left;
width: 100%;
justify-content: center;
margin: 0 auto;
-webkit-flex-flow: row wrap;
}

#cpt-toggle-navigation.button {
padding: 5px 10px;
margin: 0 5px 10px;
line-height: 35px;
cursor: pointer;
border: 1px solid;
border-radius: 5px;
}

Ex. http://www.metroyachtcharter.com/points-of-departure/

I'd honestly recommend checking out MixItUp 3 for a library with a great UX already setup for this functionality :: https://www.kunkalabs.com/mixitup/

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.