How to create an alphabetical drop down list (jump menu) of taxonomy terms.

Here’s the problem:

• You have a custom taxonomy and you need to create a taxonomy dropdown list, similar to the WordPress category dropdown option.
• You need to have multiple taxonomy dropdowns for the child terms within the taxonomy. (get_term_children)
• These term lists should be sorted alphabetically.
• When selected the term should link to its archive page with a nice pretty permalink.  (jump menu)
• The term for the archive page should remain selected in the menu to indicate where you are. (A little javascript.)

Example custom taxonomy: 

• term_1
  • term_1-child_1
  • term_1-child_2
• term_2
  • term_2-child_1
  • term_2-child_2

WordPress has a handy function: wp_dropdown_categories…

BUT! Even using the code straight out of the codex (as of 6-23-2016) which has a nice set of arguments including custom taxonomy and terms, the permalinks look horrible… ?cat/ blah blah. Ugly.

The solution is to build a custom form using a little javascript and get_term_children.

Here’s the php:

 

function my_term_dropdown( $termVAR ) { 

// To use this function call it in a page template like this:
// my_term_dropdown( 12 )
// Replace 12 with the ID of the parent term which you want to display the child terms of.
// This function can be used multiple times on a page to create multiple custom taxonomy dropdowns. 

?>

<form action="<?php bloginfo('url'); ?>/" method="get">

<?php

        $term_id = $termVAR;    //setup the main variable to feed the function
        $taxonomy_name = 'my_tax_name';   //put your taxonomy slug here
        $termchildren = get_term_children( $term_id, $taxonomy_name );
        
 //this section sets up the parent taxonomy to link the top level item.
        $parenttaxArray = get_term_by( 'id', $term_id, $taxonomy_name );            
        $parenttaxName = $parenttaxArray ->name;
        $parenttaxSlug = $parenttaxArray ->slug;
        
        $children = array(); //create an array of terms and sort it alphabetically
        foreach ($termchildren as $child) {
          $term = get_term_by( 'id', $child, $taxonomy_name );
          $children[$term->name] = $term;
        }
        ksort($children);
        
        echo '<select name="' . $taxonomy_name . '" onchange="this.form.submit()">';
        
        echo '<option value='. $parenttaxSlug .'> 
                <a href="' .  bloginfo('url') . '/' .$term->slug . '/' . $parenttaxSlug  . '">Filter by: ' . $parenttaxName . '</a>
             </option>';   //This is the first option, the parent of the term.
        
        foreach ( $children as $child ) {
          $term = get_term_by( 'id', $child->term_id, $taxonomy_name );
          echo '<option value="'. $term->slug .'">' . $term->name . '</a></option>';
        }
        echo '</select>';
        // The javascript makes it link automatically, otherwise fall back: ?> 
        <noscript><div><input type="submit" value="View" /></div></noscript>

</form>
    
<?php }

<script>

//   This script selects the category in the dropdown menus when it is the active category.
//   This script requires that you have category archive titles like this: Category: term_name 
//   The selectors will have to be modified to match your site. 

jQuery(document).ready(function() {
    
var categoryName = document.querySelector(".content h1.archive-title");

if ( categoryName ) { 

var categoryNamevalue = categoryName.innerHTML.replace('Category: ',''); 

jQuery('.category-filter select option').filter(function() {
    
    return (this.text.indexOf(categoryNamevalue) >= 0); 
    
}).attr('selected', "selected");

}

});
</script>
 

This code was based on the code over here.