Create a Filter
Last updated
Last updated
The filter block is able to filter anything inside a query block.
The filter block is usually inserted into a parent block.
Select the Query in the navigator.
In the Primary tab of the block Inspector open the Settings tab.
Toggle on Frontend Rendering.
The filter block will only work with a queryblock that has the front end rendering property toggled on.
For this example, we have already set up our Categories in the WordPress Dashboard.
Navigate to the Dashboard.
Open the Categories tab and add new categories as required.
In this example we have set up 3 categories.
Select Query in the Navigator.
In the Primary Tab of the Block Inspector, open the Query Editor.
Open "Taxonomy Query".
Click the "+" icon to add a new Taxonomy Query.
Click to open.
You can give you taxonomy filter a suitable name.
Find the Name field.
Input a suitable name.
In order to target Categories, you need to filter a Taxonomy, such as Categories, Tags, Navigation Menus, Link Categories, Formats, Themes, Tenplate Part Areas etc.
In this example, we wish to target Categories.
Set Taxonomy to "Categories - Post".
In order to filter dynamic data, you need to toggle on the Dynamic icon.
Find Terms.
Toggle on the "Dynamic" icon.
Set Source to "WordPress".
The Filter block adds or removes a parameter that the Query then uses to modify the information that it displays.
Set Wordpress to "URL Parameter".
You need to input the filter target name, in this example "Category".
Input "Category" as Key.
By default, the filter returns taxonomy slugs. If required, you can set it to another parameter such as term_id, name, term-taxonomy_id. In this example we wish to return "slugs".
Select "slug" as Field in the Dropdown.
You need to copy the query ID so that the Filter can attach to the Query.
Find Query ID.
Copy using keyboard shortcuts.
Now we need to add our Filter. You can place it where you need it as required.
In this example we will place it above the Query.
Select the block into which you want to insert the Filter.
Add a Cwicly Filter block using the Quick Inserter or the Block Inserter.
You should see a placeholder with "Select Filter Properties...".
Click to open the Filter Editor from the Primary tab.
First we need to connect the Filter to the Query using the Query ID.
In the Query Editor modal, input the ID of the Query to which you wish to attach the filter.
You can find the Query ID in the Query Editor.
Select the Query to which you want to attach the Filter.
In the Primary tab, open the Query Editor.
Copy the Query ID.
Input the required Target, in this example "category".
The Target is in fact the key that you chose when you set up the Query. You will find it in the Taxonomy Query tab of the Query Editor.
Select the Query.
Open the Query Editor.
Open the Taxonomy Query tab.
Click the required Query, in this example the "Travel Query".
Copy the Key, in this example "category" and input it into the Target field of the Filter Editor.
Select the Filter Type you require in the dropdown, in this example "Button Single".
Button Single allows you to choose only one Button at a time as opposed to "Button Multiple".
Select required Data Source in the dropdown in the Filter Editor.
In this example, Dynamic as we want our data to be dynamic.
Select required Data Type, in this example Taxonomy.
Choose required taxonomy type in the dropdown, In this example want to target Categories as our Taxonomy type.
In the Taxonomy dropdown select required taxonomy type, in this example Categories.
In this example we want to exclude Uncategorised posts and only include those we previously set up in the Dashboard.
In the Taxonomy section of the Filter modal, select items to exclude in the Exclude dropdown.
In this example, "Uncategorised".
In this example we do not want to display terms that do not contain any posts.
In the Taxonomy section of the Filter modal, toggle on "Hide Empty" as required.
Now we want to be able to visualise and style the filter categories we have created.
With the Filter block selected, add a Paragraph.
We need to connect our dynamic data.
Select the Paragraph and open Dynamic Values from the toolbar.
Select Filter as Source.
We want the Category names to appear.
Set Filter to Name.
Now you can visualise the three Categories we set up.
Let's turn our attention to the Layout of our Filter.
In the Primary tab, open the Layout tab.
Set Flex display, Row direction, Wrap (so that if there are multiple categories, they will display on the next line) and Align centre.
To add spacing around the filter items:
Set a Row Gap and a Column gap or !8px.
To Space the Filter items from the Query:
In the Margin and Padding tab, set a bottom Margin of 50px.
Now we need to Style the Filter Titles.
In the Typography tab of the Primary tab, set an appropriate font size and weight.
In the Design tab, open the Borders tab and the Radius and Border tab.
Set a 40px equal Radius or as required to give a suitable oval look.
Set an appropriate Border colour, in this example dark grey.
Set a solid border Style with an equal 1px Width.
Set an appropriate Padding to allow the items to breathe.
In the Design tab, open the Margin and Padding tab and set an upper and lower 10px Padding and a 30px right and left Padding or as required.
Now we have fully set up the Filter buttons but to make it easier for the User, we can add a colour change to the current button to let them know what category is selected.
With the Filter block selected, open the Design tab and the Relative Styling tab.
Click the "+" icon to add a new Relative Style.
We need to set the Rules under which this change will occur.
Click the "Rules" icon to open the Relative Styles Rules modal.
Input a suitable Name, in this example "Selected".
In "Rules after block class" set Combinator to "Descendent".
Set Type to Class.
Input "selected" as Selector since we wish the rule to apply to the selected filter item.
Click Create "selected" to create.
We want to add another Rule to target the selected paragraph.
Click the "+" icon in Rules after block class.
Set Combinator to Descendant.
Set Type to Class.
In the Navigator, right click on the Paragraph block contained inside the Filter block and copy the Class.
Paste the copied paragraph class into the Selector field.
It's time to style the relative styling we set up.
In the Design tab, open the Relative styling tab.
Click the required Relative Style you wish to customise, in this example "Selected".
In this example we want the white background to become black when selected.
In the Background tab, open the colours tab and choose a suitable background colour, in this example Black.
Let's style the text. In this example we want the text to change white when selected.
In the Typography tab, select a suitable Text colour, in this example white.
Now when a user selects a filter button, the background will turn black and the text white.
