Built-in to WordPress is a nifty function, wp_dropdown_categories, that is supposed to list all your categories in a drop-down menu and, with the right script, link directly to them. It even has an argument for using it with a custom taxonomy. The only thing is, it doesn’t work. It doesn’t produce the appropriate link. It appears to produce a link like /?cat=# which you would assume would work if you weren’t using pretty permalinks. Only it doesn’t . It never works. I’m not sure why this hasn’t been addressed but it is a serious hole in this function.
Alternately, you can create just a list of parent-level terms with links to their pages and no dropdown menu.
If you’d like to indent the subcategories, click here.
So how do we make this work? After some digging online, I found this script. It was originally developed here years ago, but it was brought back to life here. And it works brilliantly. Here’s the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php $categories = get_categories('taxonomy=custom-tax'); $select = "<select name='cat' id='cat' class='postform'>n"; $select.= "<option value='-1'>Select category</option>n"; foreach($categories as $category){ if($category->count > 0){ $select.= "<option value='".$category->slug."'>".$category->name."</option>"; } } $select.= "</select>"; echo $select; ?> <script type="text/javascript"><!-- var dropdown = document.getElementById("cat"); function onCatChange() { if ( dropdown.options[dropdown.selectedIndex].value != -1 ) { location.href = "<?php echo home_url();?>/category/"+dropdown.options[dropdown.selectedIndex].value+"/"; } } dropdown.onchange = onCatChange; --></script> |
To make this work for your taxonomy, replace “custom-tax” near the top with the name of your custom taxonomy. Then near the bottom, replace “/category/” with the slug for your custom taxonomy. In my case, I replaced it with “/location/”. Drop this right in, and it should work great!You can adjust the $args by putting them in get_categories(). You can view the WordPress Codex on that function here. Simple stuff!I personally spent many many hours trying to make the regular wp_dropdown_categories working for me, but to no avail. Finding this script made my life so much easier, and hopefully it will do the same for you.
27 Comments on “Dropdown Menu of All Terms in Custom Taxonomy – WordPress”
This is awesome, was breaking my head whole day how to make this happen, thank you for the solution!
One question, does anyone know how to make the this list appear in ASC or DESC order?
Do you know how to force the selected taxonomy to stay selected in the dropdown when you end up on the tax page? So if I select ‘circus’, when the tax archive page loads it would show circus in the drop down as being selected.
Yes, you could use this to get the taxonomy ID: get_queried_object()->term_id;
Set that to a variable, and then add code so that if it’s the same as the term in the dropdown, to add “selected” to the option html. That should make sure it’s pre-selected!
Do you know how to force the selected taxonomy to stay selected in the dropdown when you end up on the tax page? So if I select ‘circus’, when the tax archive page loads it would show circus in the drop down as being selected.
Yes, you could use this to get the taxonomy ID: get_queried_object()->term_id;
Set that to a variable, and then add code so that if it’s the same as the term in the dropdown, to add “selected” to the option html. That should make sure it’s pre-selected!
for those who ask how to make it work for custom taxonomy terms instead, simply replace get_categories() at the start with get_terms(). You can copy paste the example from the official wordpress documentation:
$terms = get_terms( array(
'taxonomy' => 'post_tag',
'hide_empty' => false,
) );
and rename all instances of “$categories with $terms” for clarity.
Great tip, thank you!
Hi Brian, Thank you for posting this. I’m a newbie and a bit lost with how to proceed… Could you give me a clue on how to implement this menu? Where should this code reside? A module? A function?
Hi Nick,
You would place this is a template file in your theme (or child theme if you have one). So maybe you create a custom template file that just displays this dropdown, you would put it in there. You may want to read up on working with custom templates.
thanks for this code
Hi there, looks promising. I’m looking for an elegant way to present the tag options on a webpage. Dropdown menu is a possibility, or a nice, clean, customizable box displaying the tags is an option too. I don’t like the standard tag clouds. What are the options? Is there a link were I can actually see what your dropdown menu here looks like? Thanks in advance