Buy me a coffee

Gallery Section: Filter

These steps will help you add simple filter for Gallery Section. Note that this code is for the example below. Each different site will need to customize the code a bit. You can send me a message via contact form (contact page) if you can’t make it work.

Check demo here – Pass: abc

Gallery Section Filter0 Min

#1. Add code to Code Injection > Footer 

<!-- Gallery filter -->
<div id="gallery-section-filter">
  <button class="show-all">Show all</button>
  <button class="filter-nature">Nature</button>
  <button class="filter-cars">Cars</button>
  <button class="filter-people">People</button>
<script src=""></script>
    var layclass = $(this).find('span').attr('class');

You need to adjust

  • Line 3: actually I don’t use this text “show all” on my example, so you can ignore it
  • Line 4, 5, 6: 3 filter texts: Nature, Cars, People
  • Line 17 to Line 22: it means, if users click on “Nature”, It will hide all items that do not contain the word nature, and show items contain “nature”.¬† (it is related to code #4 [scroll down to #4, you will see])
  • Line 23 to Line 28 & Line Line 29 to Line 34: Similar

#2. Add this code to Custom CSS

#gallery-section-filter, .show-all {
  	display: none;
#gallery-section-filter button {
    background: none !important;
    border: none !important;
#gallery-section-filter .active {
  	text-decoration: underline;

#3. Enable Gallery Section Caption

Gallery Caption1 Min

#4. Edit each image in Gallery Section > Paste this code

<span class="cars"></span>

Gallery Section Filter1 Min

Gallery Section Filter2 Min

Gallery Section Filter3 Min