Filtering query by category and styling buttons

Hi,

thanks to this topic and the video referred to, I’ve been able to build a nice filter button. Clicking on a button will alter the category_name part of the query.

I’ve got a question and a suggestion.
To start with the latter: fields like the url-field of a button and the looper provider settings are just single-line input fields. That’s very inconvenient. In many occasions, especially when using Dynamic Content, it’s hard to see the entire input. I find myself copying and pasting between those fields an text-editors on my pc, just to be able to see all the input I provided.
Now Pro is enabling more and more advanced functionalities using DC, twig etc, could we please get rid of single-line input fields and replace them with auto-growing or text-areas?

Scherm­afbeelding 2025-02-16 om 21.18.03

Scherm­afbeelding 2025-02-16 om 21.17.33

My question: I have added buttons, as shown in the video referred to, that alter the WP_Query. But the buttons don’t yet style accordingly. They do in the video however. Is there an explanation on how to style those buttons, so when the url-parameter is changed to filter by a certain category, the button that matches that, will be set as active? Or is there another approach I should be looking at?

To illustrate, these three buttons all alter the ?category_name parameter of the looper provider.

The first clears the parameter: Scherm­afbeelding 2025-02-16 om 21.31.15
The other two set the parameter:
Scherm­afbeelding 2025-02-16 om 21.32.07
Scherm­afbeelding 2025-02-16 om 21.32.20

The looper provider: post_type=activiteiten&orderby={{ url.param({"key":"orderby"}) | default('title') }}&order=asc&posts_per_page=-1&category_name={{ url.param({"key":"category_name"}) }}

When category_name is empty, the first button should be highlighted. When category_name is buiten_activiteiten the second one should be highlighted. In the video a system like that seems to work, but I havent been able to find a description of how to do that. Any tips are very welcome!

Hello @dhunink,

Thanks for the very detailed post information.

You can have two “All” buttons, and for each category term name as well. One button is the current and the other is active. Use the URL parameter to show/hide these buttons. For example,

  • When you first loaded the page and the URL parameter for category_name is empty, the current All button will display
  • When there is a value for the category_name in the URL, then the active All button will display and the current category name button will also display.

Hope this makes sense.