We have used mixitup filtering plugin to filter the works
1. Html Markup Set
html markup
<div class="portfolio-filter">
<ul>
<li class="filter" data-filter="all">Show All</li>
<li class="filter" data-filter=".photography">Photoraphy</li>
<li class="filter" data-filter=".design">Design</li>
</ul>
</div>
<div id="portfolio-items-wrapper">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-2.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-3.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-4.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 mix design">
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-5.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 mix design">
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-6.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 mix design">
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-7.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 mix design">
<div class="portfolio-block">
<img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="">
<div class="caption">
<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
<i class="tf-search"></i>
</a>
<h4><a href="">AirBnB Postcard</a></h4>
</div>
</div>
</div>
</div>
</div>
Add your menu with data-filter for filtering your contents. Then add mix and the data-filter name your want filter on your content.
2. Mixitup initialization on custom.js file
jQuery code
$(function(){
$(‘#portfolio-items-wrapper’).mixItUp();
});
initialize with the id of your contents parent
If you want to know more about mixitup try this following link – https://www.kunkalabs.com/mixitup/