John B. Hartley

I needed to create a dropdown <select> menu for all of the categories in a custom taxonomy. WordPress has this cool built-in function called wp_dropdown_categories(), so I tried that with a custom taxonomy, wp_dropdown_categories(‘taxonomy=custom-tax’), and it worked pretty well.

By playing around with the different $args and settings found here I was able to get it looking pretty spiffy. All of my categories were showing up, and the dropdown was functioning properly. The issue came when I clicked on a category.

WordPress sends you to the unpretty-fied link of /?cat=# which is not what I want if I’ve changed the permalink structure. So I did some digging and found this bit of code.

<?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>

Granted, that post was from 4 years ago, but I found no errors with the code using Theme Check.

Basically the code goes through all of the categories for you custom taxonomy, custom-tax in this case, and outputs the categories that have been created and have posts. You can adjust the $args by tweaking get_categories().

The JavaScript used finds your dropdown and depending on the category you select, it will send you to the proper slug when you click. This is adjustable by changing ‘category’ in the location.href to whatever you need it to go to.

I wanted to show all of a particular Custom Post Type with the category ‘Ohio’ from taxonomy ‘golf-course’ so I changed ‘category’ in location.href to ‘golf-course’. I then created taxonomy-golf-course.php so I could fine tune the output when it went to golf-course/ohio.

As with all things WordPress this is not the only way to get the desired display, but it’s what worked for me. If you’ve got a better way, let me know in the comments below.

Also, if you didn’t see today’s xckd comic, you should. Click and drag, yo.

Tags: $args, custom post types, dropdown, taxonomy, taxonomy.php, wordpress

previous post: After Effects Tutorial – Track Mattes next post: Twitter Status With PHP and Twitter JSON (snippet)