CMS Filter

Advanced filtering for your CMS content with sorting and pagination. Dynamically adjust filters based on search results for a better user experience.

Copy the CMS Filter <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - CMS Filter -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/" ></script>
Copy Script

Required attributes

I want this Form block to contain my filters
Attribute to add
Name
wt-cmsfilter-element
Value
filter-form
Instructions

This is the Form element containing the filters.

At the moment the script can be used only once per page so this will only work if a single form block is being targeted.

How does it look?
Attribute to add
Name
wt-cmsfilter-element
Value
list
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
tag-template
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
empty
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
results-count
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
clear-all
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
sort-options
Instructions
How does it look?
Attribute to add
Name
wt-cmsfilter-category
Value
{category-name}
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-class
Value
{active-class}
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-trigger
Value
button
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-pagination
Value
next
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-pagination
Value
prev
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-range
Value
{from | to}
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-filtering
Value
advanced
Instructions
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-default
Value
{default range value}
Instructions
How does it look?
Attribute to add
Name
data-{categry}
Value
{value}
Instructions
How does it look?

Optional Attributes

I want this Form block to contain my filters
Attribute to add
Name
wt-cmsfilter-element
Value
filter-form
Instructions

This is the Form element containing the filters.

At the moment the script can be used only once per page so this will only work if a single form block is being targeted.

Where?
How does it look?
Attribute to add
Name
wt-cmsfilter-element
Value
list
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
tag-template
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
empty
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
results-count
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
clear-all
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-element
Value
sort-options
Instructions
Where?
How does it look?
Attribute to add
Name
wt-cmsfilter-category
Value
{category-name}
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-class
Value
{active-class}
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-trigger
Value
button
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-pagination
Value
next
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-pagination
Value
prev
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-range
Value
{from | to}
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-filtering
Value
advanced
Instructions
Where?
How does it look?
Optional
Attribute to add
Name
wt-cmsfilter-default
Value
{default range value}
Instructions
Where?
How does it look?
Attribute to add
Name
data-{categry}
Value
{value}
Instructions
Where?
How does it look?

Working examples