I rarely use dropdown boxes to display data in WordPress. However, recently I needed to add this feature to a project I’m working on and I though I’d share.

If your like me, whenever you need to do something in WordPress you have not done before the first place you check is the codex. I found some basic information on adding drop boxes, but they were all form based.  I was looking for something java oriented (I need java for future design considerations).

I dug deeper online and found a few useful bits of code here and there, and managed to create a Frankenstein dropdown.

Part of the  project I’m working on is a business directory. We are using categories and sub-categories to organize all the listings. One way to search the directory is by city. We have each city defined as a sub-category to a parent called geographic. This is important, because when I’m building my dropdown I need to display each child category separately.

Here’s the code:

<ul>
 <li id="categories">
 <?php wp_dropdown_categories('title_li=&hierarchical=0&show_count=1&child_of=9'); ?>

<script type="text/javascript"><!--
 var dropdown = document.getElementById("cat");
 function onCatChange() {
 if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
 location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
 }
 }
 dropdown.onchange = onCatChange;
--></script>
</li>
</ul>

 <!--<ul>
 <?php wp_list_categories('title_li=&hierarchical=0&show_count=1&child_of=9') ?>
 </ul>-->

Notice I use the wp_dropdown_categories function and I call my sub category by using the child argument (child_of=9) the 9 representing the parent category.

This is what it looks like

That’s it, pretty simple! Hopefully you find this useful.