Layouts
The Layouts tab is where you pick the two designs your filter uses: one for the filter itself, and one for the list of posts it returns. Everything on this tab is a choice between ready-made layouts, not a canvas - this is the Classic Panel, so you select rather than build.
In short
The tab has two sections. Filter Layout covers the filter - its design, its colours, its search bar and its active-filter tags. Post Layout covers the results - the post design, how many columns show on each screen size, and its colours.
Layouts here are fixed designs you choose from. If you want to build the filter and the post item yourself, that is the CAF Builder, not this panel.
Filter Layout
The first section on the tab. It decides whether the filter shows at all, which design it uses, and what appears inside it.
Six settings, worked through from the top.
Enable/Disable Filter
A toggle that shows or hides the filter. It is on by default, and there is rarely a reason to turn it off - switching it off leaves the post listing on the page with nothing to filter it.
Select Your Category Filter Design
The design of the filter itself - where it sits and how its terms are laid out. The dropdown holds a list of ready-made filter layouts; open it, pick the one that suits your page, and the front end uses it as it is. There is no per-element editing in the Classic Panel.
Two things worth knowing before you choose:
- Some settings further down this tab only work with certain layouts, and the panel names the supported one under the setting.
- Parent Dropdown works with the Parent/Child layout and nothing else.
Parent Dropdown is set per term on the General settings tab. If you have ticked it there and see no change on the front end, this is the setting to check - pick the Parent/Child layout here and it starts working.
Filter Color Combination
Three colour pickers that recolour the filter layout you chose above. You do not assign them to particular elements - the layout applies them itself, in the places it was designed to use them.
| Picker | Where it lands |
|---|---|
| Primary Color | The filter's main elements |
| Secondary Color | The supporting elements around them |
| Secondary Color 2 | A third colour the layout uses where it needs one |
Because the layout decides where each one goes, the quickest way to set them is to change one, save, and look at the front end. The design keeps its shape and spacing whatever colours you give it.
Enable/Disable Search Bar
Adds a search field to the filter so visitors can search through the posts as well as tick terms. It is off by default. Turn it on where the list is long enough that scanning terms is slower than typing.
Display Active Filters
Shows what the visitor has already chosen as tags at the top of the filter, with a reset button beside them. It is on by default. Useful once a filter has several taxonomies, because the visitor can see and undo one choice without hunting for the box they ticked.
Careful
The panel notes that this is supported on the Multiple Taxonomy Filter - Vertical layout. On a design that does not support it, turning it on changes nothing on the front end.
Active Filters : Display Style
How those tags are written. There are two options, and the choice is whether each tag carries its term label or not. Only relevant while Display Active Filters is on.
Settings
| Option | What the visitor sees |
|---|---|
| With Term Label | Each tag carries its term label |
| Without Term Label | The tag on its own, no label |
With Term Label is the clearer choice on a filter with several taxonomies, because the visitor can tell which one a tag came from. Without Term Label is tidier where there is only one.
Post Layout
The second section. It covers the results - the design of each post, how many sit side by side, and their colours.
Three settings that shape the results list.
Select Your Post Layout Design
The design of a single post in the results - its image, title and the rest, arranged for you. The dropdown holds a long list of post layouts, so it is worth opening it and reading through rather than taking the first that looks close.
As with the filter layout, you choose one and the front end renders it; the parts inside it are not editable here.
Select Column Layout
How many posts sit side by side, set separately for four screen sizes. Each field takes a number, and the layout switches between them as the screen narrows.
Settings
| Screen | Default |
|---|---|
| Desktop | 3 columns |
| Laptop | 3 columns |
| Tablet | 2 columns |
| Mobile | 1 column |
Tip
Set the mobile figure to 1 unless your post design is unusually narrow. Two columns on a phone leaves each post too small to read.
Post Color Combination
The same three pickers as the filter, applied to the post layout instead, and placed by the layout in the same automatic way. They are set separately from the filter's, so the two can share a colour scheme or contrast with each other.
Note
Nothing here is live until you save. The button at the top right reads Publish on a filter you have never saved, and Update once it has been published.
Common Questions
Can I edit a layout rather than pick one?
Not in the Classic Panel. You choose a design and recolour it. Editing the filter and the post item element by element is what the CAF Builder is for.
Why has turning on Display Active Filters changed nothing?
The design you have chosen does not support it. The panel names the supported layout under the setting.
Do the filter and post colours have to match?
No. They are two separate sets of pickers and neither affects the other.
My results are still showing three across on a tablet.
Check the tablet field in Select Column Layout - each screen size has its own number, and changing the desktop one does not change the rest.
Was this page helpful?
Thanks for your feedback!