[Resolved] WordPress Archive – Filter editor – Show taxonomy as buttons

[Author]

Posts

[Ole Andreas Vekve]

I am trying to make archive page for a specific post type. At the top there should be a filter where users can push buttons on days to show posts which are in these categories. This filter should be visible as buttons and no dropdowns.

Please see screenshot. One is what I want, the other one is what I get.

My filter editor is current:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
[wpv-sort-orderby type="radio" options="field-wpcf-dato" label_for_field-wpcf-dato="Field - Dato" orderby_as_numeric_for="field-wpcf-dato"]

[wpml-string context="wpv-views"]Dato:[/wpml-string] [wpv-control field="dato" url_param="dato"]

[wpml-string context="wpv-views"]Categories:[/wpml-string] [wpv-control taxonomy="category" url_param="wpv-category" type="multi-select" taxonomy_order="ASC" taxonomy_orderby="name" hide_empty="false"]

[/wpv-filter-controls]
[wpv-filter-end]

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - To convert your taxonomy options to buttons - first of all - you should display your taxonomy as checkboxes.

For example:

[wpv-control-post-taxonomy taxonomy="vehicle-type" type="checkboxes" url_param="wpv-vehicle-type" output="legacy"]

Once you add your taxonomy filter as checkboxes - you need to add custom CSS or JS to convert your checkboxes options to buttons. Following link may help you:
=> hidden link

If you google it you can find lot of help to convert checkboxes to buttons.

This is pure custom programming case and that is beyond the scope of our support policy. If you need custom programming for your project I would suggest you consider contacting one of our certified partners from this link:
=> https://toolset.com/consultant/

[Ole Andreas Vekve]

The problem was solved using radios and the following:

<div class="r-button">
[wpv-control-post-taxonomy taxonomy="category" type="radios" url_param="wpv-category" output="legacy"]
</div>

.r-button input[type="radio"] {
	display: none;
}

.r-button input[type="radio"]:checked + label {
    background: #0c6f00;
	border: 1px solid #0c6f00;
	color: white;
}

.r-button label {
	padding: 10px;
	border: 1px solid #0c6f00;
	color: #0c6f00;
	cursor:pointer;
	z-index:90;
	font-weight: 300;
}

.r-button label:hover {
    background: #0c6f00;
	border: 1px solid #0c6f00;
	color: white;
}