You can use Filters to filter any of your custom post items. You can also find simple examples in our library
Available Filter source:
Taxonomy
Custom field
Title
Available Filter types:
Checkboxes
Screenshot
Radio buttons
Screenshot
Select, Search input
Screenshot
Tags
Screenshot
Range Slider (available only for Custom meta)
Screenshot
All design types have design options, so you can change colors
How to use
To use filters, you need to make a few steps
Index Post type
For this, go to Greenshift – Filter Indexer
Screenshot
Important. If you used a version of Query add-on less than 5.1 earlier on-site, then you need to deactivate Query addon and activate it back. This will create proper database tables.
Then, select post type that you need to filter. Indexing can take a long time, depending on the number of items. Do not close the page until you see that items are indexed.
Add Filter panel block
Put Query Builder block on page and Filter panel block. In the query builder block, copy the special ID from the block options.
Screenshot
Now, you need to put this ID inside Filter Panel Option to connect filters and query block
Screenshot
Now, in Filter panel, add Filter Blocks, where you can select the source of filters and design type.
You can also add Columns and Div element blocks in the Filter panel if you need more control over columns and the structure of blocks.
In the Filter block, you can also select logic OR or AND. This will control how this block depends on other filter blocks inside the panel.
Filter pagination
Filters also can have pagination, but make sure that you add them in specific Filter option in Query block (so, disable regular pagination)
Screenshot
Filter Chips
The first click on the filter will enable it, and the second click will disable it. Sometimes, if your filters and query block are in different columns and filters take too big a height, it can be helpful to add text tags before query blocks where users can see a list of enabled filters that they can disable. This is called Filter Chips.
Screenshot
To add them, you need to use separate Filter Chips block (it must be outside Filter panel). You need to connect it to Query builder in the same way as for Filter panel (via connection ID)
Height Toggle for filters
Sometimes, you can have hundreds of filter positions, and it can take too long to scroll. You may want to limit height and add a toggle. For this, we have Content Toggle block
Filters in Popup or Sliding panel
I am sure that you may want to have filters inside sliding panel for mobiles instead of showing them always. For this, we recommend to make special filter button with popup or sliding panel with our Sliding panel blocks
You can disable this button from showing on Desktop only in Responsive panel
<!-- wp:paragraph -->
<p>You can use Filters to filter any of your custom post items. You can also find simple examples in <a href="https://greenshift.wpsoul.net/">our library</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Available Filter source:</p>
<!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>Taxonomy</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Custom field</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Title</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p>Available Filter types:</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Checkboxes</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5432,"width":"200px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5432" style="width:200px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><strong>Radio buttons</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5433,"width":"200px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5433" style="width:200px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><strong>Select, Search input</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5434,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5434" style="width:300px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><strong>Tags</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5435,"width":"500px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5435" style="width:500px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><strong>Range Slider</strong> (available only for Custom meta)</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5436,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5436" style="width:300px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>All design types have design options, so you can change colors</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="how-to-use">How to use</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>To use filters, you need to make a few steps</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="index-post-type">Index Post type</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>For this, go to Greenshift - Filter Indexer</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5437,"width":"400px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5437" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-6850db5","type":"error"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-6850db5" id="gspb_infoBox-id-gsbp-6850db5"><div class="gs-box error_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g> <g> <path d="M256,0C114.508,0,0,114.497,0,256c0,141.493,114.497,256,256,256c141.492,0,256-114.497,256-256 C512,114.507,397.503,0,256,0z M256,472c-119.384,0-216-96.607-216-216c0-119.385,96.607-216,216-216 c119.384,0,216,96.607,216,216C472,375.385,375.393,472,256,472z"></path> </g> </g> <g> <g> <path d="M343.586,315.302L284.284,256l59.302-59.302c7.81-7.81,7.811-20.473,0.001-28.284c-7.812-7.811-20.475-7.81-28.284,0 L256,227.716l-59.303-59.302c-7.809-7.811-20.474-7.811-28.284,0c-7.81,7.811-7.81,20.474,0.001,28.284L227.716,256 l-59.302,59.302c-7.811,7.811-7.812,20.474-0.001,28.284c7.813,7.812,20.476,7.809,28.284,0L256,284.284l59.303,59.302 c7.808,7.81,20.473,7.811,28.284,0C351.398,335.775,351.397,323.112,343.586,315.302z"></path> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Important. If you used a version of Query add-on less than 5.1 earlier on-site, then you need to deactivate Query addon and activate it back. This will create proper database tables.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:paragraph -->
<p>Then, select post type that you need to filter. Indexing can take a long time, depending on the number of items. Do not close the page until you see that items are indexed.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="add-filter-panel-block">Add Filter panel block</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Put <a href="https://greenshiftwp.com/query-builder/" data-type="post" data-id="2253">Query Builder block</a> on page and Filter panel block. In the query builder block, copy the special ID from the block options.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5438,"width":"400px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5438" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Now, you need to put this ID inside Filter Panel Option to connect filters and query block</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5439,"width":"400px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5439" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Now, in Filter panel, add Filter Blocks, where you can select the source of filters and design type.</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-83e5e60"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-83e5e60" id="gspb_infoBox-id-gsbp-83e5e60"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>You can also add Columns and Div element blocks in the Filter panel if you need more control over columns and the structure of blocks.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:paragraph -->
<p>In the Filter block, you can also select logic OR or AND. This will control how this block depends on other filter blocks inside the panel.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="filter-pagination">Filter pagination</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Filters also can have pagination, but make sure that you add them in specific Filter option in Query block (so, disable regular pagination)</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5441,"width":"400px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5441" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="filter-chips">Filter Chips</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>The first click on the filter will enable it, and the second click will disable it. Sometimes, if your filters and query block are in different columns and filters take too big a height, it can be helpful to add text tags before query blocks where users can see a list of enabled filters that they can disable. This is called Filter Chips.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5442,"width":"400px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5442" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>To add them, you need to use separate Filter Chips block (it must be outside Filter panel). You need to connect it to Query builder in the same way as for Filter panel (via connection ID)</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="height-toggle-for-filters">Height Toggle for filters</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Sometimes, you can have hundreds of filter positions, and it can take too long to scroll. You may want to limit height and add a toggle. For this, we have <a href="https://greenshiftwp.com/content-toggler/" data-type="post" data-id="620">Content Toggle</a> block</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="filters-in-popup-or-sliding-panel">Filters in Popup or Sliding panel</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>I am sure that you may want to have filters inside sliding panel for mobiles instead of showing them always. For this, we recommend to make special filter button with popup or sliding panel with our <a href="https://greenshiftwp.com/sliding-panels/" data-type="post" data-id="771">Sliding panel blocks</a> </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You can disable this button from showing on Desktop only in <a href="https://greenshiftwp.com/documentation/greenshift-basics/responsive-options/" data-type="documentation" data-id="3772">Responsive panel</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->