custom function for wp_list_categories to list terms as checkboxes
Solution 1
Maybe you can use get_categories()
instead of wp_list_categories()
.
First you get the top level categories by using parent => 0
and show the category name in h3 tag. Then you can get the child categories by using parent => $category->term_id
and show the checkboxes.
Use somthing like the example below:
$args = array(
'taxonomy' => 'tags',
'parent' => 0, // get top level categories
'orderby' => 'name',
'order' => 'ASC',
'hierarchical' => 1,
'pad_counts' => 0
);
$categories = get_categories( $args );
foreach ( $categories as $category ){
echo '<h3>'. $category->name . '</h3>';
$sub_args = array(
'taxonomy' => 'tags',
'parent' => $category->term_id, // get child categories
'orderby' => 'name',
'order' => 'ASC',
'hierarchical' => 1,
'pad_counts' => 0
);
$sub_categories = get_categories( $sub_args );
foreach ( $sub_categories as $sub_category ){
echo '<label><input type="checkbox" id="type-'. $sub_category->name . '" rel="'. $sub_category->name . '">'. $sub_category->name . '</label>';
}
}
Solution 2
you can use wp_category_checklist()
like this:
<form>
<?php
$args = array(
'descendants_and_self' => 0,
'selected_cats' => false,
'popular_cats' => false,
'walker' => null,
'taxonomy' => 'tags',
'checked_ontop' => true
);
wp_terms_checklist( 0, $args );
?>
<input type="submit" value="Submit">
</form>
for more help: https://developer.wordpress.org/reference/functions/wp_terms_checklist/
Amesey
Updated on July 21, 2022Comments
-
Amesey almost 2 years
I need to write a custom function for wp_list_categories so instead of displaying a hierarchical list of links they are instead a list of checkboxes with the parent terms being displayed as h3 tags.
The final output will look like http://jsfiddle.net/amesy/kwqpf5fv/6/
Here is the PHP code in my WordPress template file...
<?php //list terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin) $taxonomy = 'tags'; $orderby = 'name'; $show_count = 1; // 1 for yes, 0 for no $pad_counts = 0; // 1 for yes, 0 for no $hierarchical = 1; // 1 for yes, 0 for no $title = ''; $args = array( 'taxonomy' => $taxonomy, 'orderby' => $orderby, 'show_count' => $show_count, 'pad_counts' => $pad_counts, 'hierarchical' => $hierarchical, 'title_li' => $title ); ?> <ul class="categories"> <?php wp_list_categories( $args ); ?> </ul>
Here is the HTML that
<?php wp_list_categories( $args ); ?>
outputs...<ul class="categories"> <li class="cat-item cat-item-21"><a href="http://tandsdev.co.uk/portfoliotags/client/" >Client</a> (0) <ul class='children'> <li class="cat-item cat-item-22"><a href="http://tandsdev.co.uk/portfoliotags/bmw/" >BMW</a> (3) </li> </ul> </li> <li class="cat-item cat-item-25"><a href="http://tandsdev.co.uk/portfoliotags/section/" >Section</a> (0) <ul class='children'> <li class="cat-item cat-item-27"><a href="http://tandsdev.co.uk/portfoliotags/automotive/" >Automotive</a> (3) </li> <li class="cat-item cat-item-28"><a href="http://tandsdev.co.uk/portfoliotags/property/" >Property</a> (2) </li> </ul> </li> <li class="cat-item cat-item-26"><a href="http://tandsdev.co.uk/portfoliotags/service/" >Service</a> (0) <ul class='children'> <li class="cat-item cat-item-29"><a href="http://tandsdev.co.uk/portfoliotags/branding/" >Branding</a> (3) </li> <li class="cat-item cat-item-30"><a href="http://tandsdev.co.uk/portfoliotags/email/" >Email</a> (3) </li> <li class="cat-item cat-item-31"><a href="http://tandsdev.co.uk/portfoliotags/website/" >Website</a> (2) </li> </ul> </li> </ul>
The checkbox code I would like each term to be displayed as will form a filtering system which can be seen here http://jsfiddle.net/amesy/kwqpf5fv/6/
<div class="tags"> <h3>service</h3> <label><input type="checkbox" id="type-Website" rel="Website">Website</label> <label><input type="checkbox" id="type-Email" rel="Email">Email</label> <label><input type="checkbox" id="type-Branding" rel="Branding">Branding</label> <h3>sector</h3> <label><input type="checkbox" id="type-Automotive" rel="Automotive">Automotive</label> <label><input type="checkbox" id="type-Property" rel="Property">Property</label> </div>
I would still like to keep the checkboxes hierarchical as in the example above, but the titles in the h3 tags are parent terms and I do not want these as checkboxes, how do I do all this? :)
-
Amesey over 9 yearsAmazing, works perfectly, thank you very very much :)