Wordpress dropdown categories as radio fields - wordpress

Question

I'm trying to make the default wp_dropdown_categories select dropdown as a radio input with submit button.
This is on the front end.
<form id="filter-select" class="filter-select" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<?php wp_dropdown_categories(); ?>
<input type="submit" name="submit" value="view" />
</form>
Then in my functions.php I tried to do this
add_filter( 'wp_dropdown_cats', 'dropdown_filter', 10, 2);
function dropdown_filter( $output, $r ) {
$output = preg_replace( '/<option/i', '<input type="radio"', $output );
$output = str_replace( 'class="level-0"', 'name="filter"', $output );
$output = str_replace( "value=\"{$value}\"", "value=\"{$value}\" selected", $output );
return $output;
}
This actually works in swapping out the select dropbox for a radio field. But it does not actually work correctly.
Instead of going to /category/CATEGORYNAME - Like the default select box does.
It goes /?filter=6&submit=view
Any advice is greatly appreciated, thank you.

Answer 1

Try with a custom Walker to output category names instead of IDs.
<div class="radiobuttons">
<?php
$args = array(
'orderby' => 'name',
'hide_title_if_empty' => true,
'title_li' => '',
'walker' => new List_Categories_Radiobuttons
);
wp_list_categories( $args );
?>
</div>
The custom Walker in functions.php:
/**
* Custom Walker to list categories with radio buttons
*/
class List_Categories_Radiobuttons extends Walker_Category {
function start_el(&$output, $category, $depth=0, $args=array()) {
$category_name = esc_attr( $category->name );
$radiobutton = '<input type="radio" name="filtercategory" value="' . $category_name . '">';
$output .= '<div class="radiobutton">' . $radiobutton;
}
function end_el(&$output, $category, $depth=0, $args=array()) {
$output .= "</div>\n";
}
}
Does this point you in the right direction?