[Resolved] Question about formatting a front-end filter

[Author]

Posts

[Saul Baizman]

Hi there,

I have a taxonomy, Audience, connected to a custom post type, Service. Audience is either "Individuals" or "Organizations." I want to create a front-end custom search to list all Service posts, posts tagged "Individual," and posts tagged "Organizations," and let the user choose.

I've created the custom search and got the desired functionality working—with radio buttons. Here's my question: the user interface options are a pull-down menu, multi-select, radio button, or checkboxes (please see the attached "type of control.png" for reference). But I want to use the equivalent of visual buttons; please see the attached "mockup.png" for what I'm trying to accomplish.

Is that possible? If so, how?

Thanks.

Saul

[Christopher Amirian]

Hi Saul,

This needs extensive Javascript custom code to hide the original HTML radio buttons and create buttons instead and add proper events so that when the button is clicked the change is transferred to the actual radio button.

It is way outside of our support scope but you can consider hiring a developer to do that for you:

https://toolset.com/contractors/

I did a Google search which you can use as a starting point if you want to do the coding yourself:

hidden link

Thanks

[Saul Baizman]

Hi Christopher,

Thanks for your response.

I found a great tutorial (which doesn't require any JavaScript) here: hidden link

What I should have asked is, is there a PHP filter that I can use to alter the output of the radio button HTML?

Saul

[Christopher Amirian]

Hi Saul,

No unfortunately that will require direct manipulation of the core Toolset code which is not recommended.

Here is the available API hooks list if you are interested: (there is no hook for the search radio button)

https://toolset.com/documentation/programmer-reference/views-filters/

I searched more and found the links below that might help you on your journey:

- http://stackoverflow.com/questions/3896156/how-do-i-style-radio-buttons-with-images-laughing-smiley-for-good-sad-smiley
- http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button
- http://stackoverflow.com/questions/5112995/how-to-replace-replace-radio-buttons-with-images
- hidden link

Thanks.

[Saul Baizman]

Thanks for the links, Christopher! I appreciate it.

Saul