# 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fd540TDiGmvivNnpg3syV%2FScreenshot%202023-08-14%20at%2011.22.21.png?alt=media\&token=6255f471-ca50-4f2f-a829-a2292c1e3c30) 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FfSrjx8Mdj8quO4qV9JZ7%2FScreenshot%202023-08-14%20at%2011.52.10.png?alt=media\&token=04423863-9eaf-4bdc-8b56-e044e7d3faaf) ### Data Type * Select required Data Type, in this example Taxonomy. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FmIGZRc0U1YCle5Ij9iUt%2FScreenshot%202023-08-14%20at%2011.57.17.png?alt=media\&token=a6aceded-ea2d-481f-95ff-049a118f24d5) ### 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FjqrUon0HCmBuZXP8cKeC%2FScreenshot%202023-08-14%20at%2012.02.41.png?alt=media\&token=c8392046-d86c-4995-862e-56b0017df745) 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". ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FLEA0mXlnH6ujN2aMWTni%2FScreenshot%202023-08-16%20at%2010.49.21.png?alt=media\&token=a97d2a73-45ab-4ab0-b910-86de6d106398) 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FK31LhULgOmLAb8R8ADbr%2FScreenshot%202023-08-16%20at%2011.08.14.png?alt=media\&token=28728db0-26bf-412e-8b0c-1cf3de45b057) ## 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FL9csn9G0m0druTfd3LIN%2FScreenshot%202023-08-16%20at%2010.55.06.png?alt=media\&token=196c1eeb-3892-4689-84ee-c12d2f4fbed0) 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". ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FGRVmVY2FNd5R3CnPklU4%2FScreenshot%202023-08-17%20at%2010.48.51.png?alt=media\&token=74d99a07-3864-4556-ba21-4fabd5e21fc1) 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FmfP9JkhEDMnjrXpLjQvv%2FScreenshot%202023-08-17%20at%2010.50.52.png?alt=media\&token=d910c287-8f3a-4310-b86f-ac154066847c) 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fmke402Q0Bsxm8kzCKG01%2FScreenshot%202023-08-17%20at%2010.52.16.png?alt=media\&token=c689b85a-10de-43ea-8222-138b47131261) Now when a user selects a filter button, the background will turn black and the text white.