You can use Filters to filter any of your custom post items. You can also find simple examples in our library

Available Filter source:

  1. Taxonomy
  2. Custom field
  3. 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

Copy this post’s content
<!-- 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 -->
«
»