Custom Taxonomy Category Dropdown

Posted on: September 19th, 2012

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 category dropdown using 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.

Update: H├ędi Kairouannais pointed out that using multiple cat dropdowns presented some problems when duplicating the code. The easy answer is to make sure you are changing up the Javascript var for each new dropdown. The new code will look like the following:

Using Multiple Taxonomies

<div class="row">
<div class="col span_3"> <!-- TYPES DE PROJETS -->
<?php
  $categories = get_categories('taxonomy=type');
  $select = "<select name='cat' id='cat1' class='postform'>n";
  $select.= "<option value='-1'>Type ...</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 cat1dropdown = document.getElementById("cat1");
    function onCat1Change() {
                if ( cat1dropdown.options[cat1dropdown.selectedIndex].value != -1 ) {
                        location.href = "<?php echo home_url();?>/type/"+cat1dropdown.options[cat1dropdown.selectedIndex].value+"/";
                }
    }
    cat1dropdown.onchange = onCat1Change;
--></script>
</div>

<div class="col span_3"> <!-- PHASE DE PROJETS -->
<?php
  $categories = get_categories('taxonomy=etat');
  $select = "<select name='cat' id='cat2' class='postform'>n";
  $select.= "<option value='-1'>Phase ...</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 cat2dropdown = document.getElementById("cat2");
    function onCat2Change() {
                if ( cat2dropdown.options[cat2dropdown.selectedIndex].value != -1 ) {
                        location.href = "<?php echo home_url();?>/etat/"+cat2dropdown.options[cat2dropdown.selectedIndex].value+"/";
                }
    }
    cat2dropdown.onchange = onCat2Change;
--></script>
</div>
</div>

Update (cont.) Note how he has renamed the var in the second bit of script to ‘cat2dropdown’ and changed the ‘id’ of the select element to ‘cat2’? In this way you are making each bit of Javascript unique to that specific select element and preventing issues. For optimization, you should combine the scripts and toss them in your footer or a separate .js file, but this gets the point across and is confirmed to work properly.

If you’ve got more updates for the custom taxonomy category dropdown method, feel free to let me know and I’ll post it here.

Also, if you didn’t see the drag-and-drop xckd comic, you should. Click and drag, yo.

Tags: , , , , ,

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