WordPress wp_dropdown_categories for Custom Taxonomies with No Submit Button

Originally Posted on April 22, 2013 Last Updated on August 15, 2014

I went searching for how to customize WordPress’ wp_dropdown_categories for custom taxonomies today, and to implement it in a way that didn’t require a submit button. While WordPress added a taxonomy parameter for the function, it doesn’t work with the default Javascript outlined on the Codex page as it returns the ID of the taxonomy term, not the slug, and for whatever reason, http://website.com/?taxonomy=5 doesn’t automatically forward to http://website.com//taxonomy-slug/term-slug/.

Using some code cobbled together via scraps of incomplete code from Frankie Jarrett, a commenter on his site and the Javascript that works with the select value changing from the form itself, I’ve figured this out and am happy to provide it to anyone else interested.

Add this function to your functions.php file:

function click_taxonomy_dropdown($taxonomy) { ?>

	<form action="/" method="get">

	<select name="cat" id="cat" class="postform">

	<option value="-1">Choose one...</option>

	<?php

	$terms = get_terms($taxonomy);

	foreach ($terms as $term) {

		printf( '<option class="level-0" value="%s">%s</option>', $term->slug, $term->name );

	}

	echo '</select></form>';

	?>

<?php }

And then this to your site’s theme, replacing TAXONOMY with your taxonomies slug:

<?php click_taxonomy_dropdown( 'collection' ); ?>

<script type="text/javascript"><!--

	var dropdown = document.getElementById("cat");

	function onCatChange() {

		if ( dropdown.options[dropdown.selectedIndex].value > '' ) {

			location.href = "<?php echo get_option('home'); ?>/?TAXONOMY="+dropdown.options[dropdown.selectedIndex].value;

		}

	}

dropdown.onchange = onCatChange;

--></script>

Up Next: How to Get WordPress Working with SVG Files

Discussion

Frankie Jarrett 22 Apr 2013

Thanks for taking the initiative, Nathan! /five

Reply
1. nathan 22 Apr 2013
  
  Hey you did 99% of the work, Frankie. I just added a here, a couple of theres and posted it. 🙂
  
  Reply
Frankie Jarrett 8 May 2013

Hey Nate, I’ve updated the code on my blog to properly escape the variables being outputted in the HTML. I suggest you update the code here as well. Thanks again!

Reply
Scott 27 Nov 2013

Thank you both for sharing your code!

I was wondering if there would be a way to slightly alter this code so that only the parent-level taxonomies would be shown on the main page.

Then you click one of them and it takes you to its children. Finally, the dropdown is updated to show that child’s children allowing you to click them and narrow your search even further.

It seems like people have looked all over for this sort of thing in the forums and I think that your code comes the closest to making it happen.

Thanks again!

Reply
nathan 2 Dec 2013

Hey Scott, I actually just wrote about this the other day, see this post.

In that first block of code I have on that page, just look at this:

<?php $args = array( 'show_option_all' => 'Choose one...', 'taxonomy' => 'YOUR-TAXONOMY-SLUG', 'walker' => new my_Walker_CategoryDropdown );

And add 'depth' => 0, to the $args array. Would leave you with this:

<?php $args = array( 'show_option_all' => 'Choose one...', 'depth' => 0, 'taxonomy' => 'YOUR-TAXONOMY-SLUG', 'walker' => new my_Walker_CategoryDropdown );

You’d still need to figure out the logic for just showing sub-terms, etc. but that should get you started.

Reply
Rakesh Rathore 4 Dec 2013

Thank you both for sharing your code!

Reply
bwt 7 Feb 2014

What’s with your weird PHP starting/closing tags?

When I paste your code in my functions.php my sites stops loading.

Any help?

Reply
nathan 10 Feb 2014

Don’t know why they were having spaces added in that comment, BWT, assuming that’s what you were referring to.

I’ve updated them.

Note that the code in that comment isn’t complete, but a suggestion on how Scott might move forward with his particular problem.

Reply
Troy Templeman 19 Jun 2014

Hi Nathan,

This is so close to what I’m looking for! Do you know if there’s a way to modify it for a term of the custom taxonomy instead? For example, if the taxonomy used here was “state” and each state had sub-categories or child terms for “cities” in that state, is there a way to have a drop down for all cities of a specific state?

Reply
nathan 20 Jun 2014

Hi Troy,

This is untested but you can look through the documentation for get_terms here if you run into any problems.

Change the code from your functions.php file to this:

function click_taxonomy_dropdown($taxonomy, $tax_term) { ?> <form action="/" method="get"> <select name="cat" id="cat" class="postform"> <option value="-1">Choose one...</option> <?php $terms = get_terms($taxonomy, array('child_of' => $tax_term)); foreach ($terms as $term) { printf( '<option class="level-0" value="%s">%s</option>', $term->slug, $term->name ); } echo '</select></form>'; ?> <?php }

<script type="text/javascript"></script>

Let me know how that works out for you!

Reply
vieradel 14 Aug 2014

Fatal error: Call to undefined function cp_taxonomy_dropdown()

Reply
nathan 15 Aug 2014

Vieradel,

The code was incorrect, thanks for bringing that up. In the second code snippet, I was calling cp_taxonomy_dropdown() where it should have been click_taxonomy_dropdown(). The code above has been updated.

Reply
Mel 4 Sep 2014

Just got to say… thanks to both Nathan and Frankie.

Reply
1. nathan 15 Sep 2014
  
  You’re quite welcome, Mel!
  
  Reply
Kevin 30 Oct 2014

Hi Nathan, can I ask where do i paste the second part of the code?

Reply
1. nathan 30 Oct 2014
  
  Wherever you want to show the dropdown, Kevin.
  
  A likely candidate would be somewhere in your sidebar.php file.
  
  Don’t forget to change the taxonomy name in that code!
  
  Reply