[Resolved] Add a filterable taxonomy selector on a post custom search

[Author]

Posts

[Tim Elliott]

Hi

I'm working on a site that has a hierarchical taxonomy (business-categories) with a very large number of entries and 3 levels of categories (parent/child).

I want to filter a post view using this taxonomy. The available filters give a very long list that makes it awkward for the user to find the correct category. Dropdown or Multi-select are closest to what I want but don't give a very usable output.

How would you go about setting up a selection control similar to category selectors you see on ebay and Amazon seller accounts, where the user is shown 3 boxes? The left hand box has a list of the top-level categories and the others are initially blank. When they click on a top-level category, that category's child cats are shown in the second box, and when a cat in the second box is clicked, the third box displays the final level of cats.

See attached image for an example of how it might look.

I'm not sure if it's been done before with Views, but I'm struggling. Any guidance would be appreciated.

Thanks

[Nigel]

Hi Tim

This comes up from time to time, and we don't really have a good solution for it.

Here's what I would do.

If you have a hierarchical taxonomy you can only have a single form input for that taxonomy. You can't have one input for the top level, a second input for the second level etc. That's how forms work (and the filter controls on a View are a form).

So you need to fake it. You need one actual input that has all the submitted terms, which you hide, and you add your own inputs which are not meaningful—they will be discarded when submitted—but which you use to set the terms on the actual input.

You basically need an associative array of the complete hierarchy of your taxonomy. You use the first level of the array to make your top-level fake input.

You use event listeners to react to changes in that select input to populate the second level fake input, which in turn has event listeners to respond to changes in it to populate a third level fake input. For each change, at any level, the hidden real input is updated accordingly.

The trickiest part is creating the associative array that maps your taxonomy in the first place.

If you include the filter as a multi-select, for example, then all the data is there (see screenshot). You'd need to use jQuery to cycle over the select options and use the number of hyphen prefixes to determine the level of the term in the hierarchy.

If you are more comfortable with PHP you could build up the array of terms in PHP and then use wp_localize_script to make that array available to JS on the front-end.

Something like: https://wordpress.stackexchange.com/a/99516/35739
And see hidden link

If you have some programming ability and want to have a go then let me know if you get stuck on some detail.

If you are at a loss as to where to start, though, then you'd need to get a developer to create this for you. You could try the list of Toolset Contractors here: https://toolset.com/contractors/