Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to display taxonomy filter checkboxes as a buttons

Solution:
you need to add custom CSS/JS in order to display custom taxonomy filter checkboxes as buttons.

You can find proposed solution with the following reply:
=> https://toolset.com/forums/topic/wordpress-archive-filter-editor-show-taxonomy-as-buttons/#post-644578

Relevant Documentation:

This support ticket is created 4 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by Ole Andreas Vekve 4 years, 5 months ago.

Assigned support staff: Minesh.

Author
Posts
#632118
Program2.jpg
Program.jpg

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]
#632212

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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/

#644578

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;
}