> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/filter/create-a-filter.md). # Create a Filter {% embed url="" %} The `filter` block is able to filter anything inside a `query` block. The `filter` block is usually inserted into a parent block. ## Toggle on Frontend Rendering * Select the Query in the navigator. * In the Primary tab of the block Inspector open the Settings tab. * Toggle on Frontend Rendering. {% hint style="warning" %} The `filter` block will only work with a `query`block that has the front end rendering property toggled on. {% endhint %}
## Categories 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.
## Set up Filter * Select Query in the Navigator. * In the Primary Tab of the Block Inspector, open the Query Editor. * Open "Taxonomy Query".
### Open * Click the "+" icon to add a new Taxonomy Query. * Click to open.
### Rename You can give you taxonomy filter a suitable name. * Find the Name field. * Input a suitable name.
### Set Taxonomy Filter 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".
### Dynamic Toggle In order to filter dynamic data, you need to toggle on the Dynamic icon. * Find Terms. * Toggle on the "Dynamic" icon.
### Source * 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".
### Key You need to input the filter target name, in this example "Category". * Input "Category" as Key.
### Field 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.
## Copy Query ID You need to copy the query ID so that the Filter can attach to the Query. * Find Query ID. * Copy using keyboard shortcuts.
## Add Filter 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.
## Connect Filter to Query First we need to connect the Filter to the Query using the Query ID. ### Query ID * In the Query Editor modal, input the ID of the Query to which you wish to attach the filter. ![](/files/UdUjdwc6kqODNUKEUNTc) 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".
### Target 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".
### Key Copy the Key, in this example "category" and input it into the Target field of the Filter Editor.
### Filter Type 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".
### Data Source * Select required Data Source in the dropdown in the Filter Editor. * In this example, Dynamic as we want our data to be dynamic. ![](/files/tb4vi7I3yehcHVfxuvjN) ### Data Type * Select required Data Type, in this example Taxonomy. ![](/files/BHSFEpj1TxCfWMNo8bqe) ### 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. ![](/files/AU9dgWK1P4cXJibSd3V2) 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". ![](/files/fqENxyKVYaHgZytKitqg) 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. ![](/files/Lj2twoL96GHMTexbMLUs) ## Filter categories Now we want to be able to visualise and style the filter categories we have created. * With the Filter block selected, add a Paragraph.
### Connect dynamic data 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.
## Layout 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. ![](/files/ywjQ04HBsS4h5Lob3Fzs) 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.
## Style 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.
## Relative Styling for button selection 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". ![](/files/0xXhXAd8vYOx3Io6k7D8) 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. ![](/files/3qXVltQsqFfuS3ZBcsnP) 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. ![](/files/04STAotUwzglBAPue8uW) Now when a user selects a filter button, the background will turn black and the text white.