WordPress Category Dropdown Generator With Usage Examples

Using the WordPress function wp_dropdown_categories, you can create a select drop down list with options for a specific category or taxonomy.  This can be used for navigation or as a filter for custom search forms.  This generator will help you define the parameters you need for your category dropdown, as well as code examples for usage on your website.  Results are displayed at the bottom of this page.

Name
The input name for the select list
ID
The id for the select list.
Class
Value for the 'class' attribute of the select list. Default is 'postform'.
Tab Index
Tab index for the select element
Taxonomy
Name of the category or categories to retrieve. Default 'category'.
Hide If Empty
True = hide if no categories are found. Default = false (show even if no categories are found).
Required
Whether the select element should have the HTML5 'required' attribute. Default false.
Value Field
Term field that should be used to populate the 'value' attribute of the option elements. Accepts any valid term field: 'term_id', 'name', 'slug', 'term_group', 'term_taxonomy_id', 'taxonomy', 'description', 'parent', 'count'. Default 'term_id'.
Selected Options
How the selected option from your dropdown select list is defined




Show Option All
Text to display for showing all categories
Show Option None
Text to display.
Default Value
Value to use when no category is selected
Order By
term_id, slug, name.
Include
Category IDs to include.
Exclude
Category IDs to exclude
Pad Counts
Add the children count into the parents total count?
Show Post Counts
Show the post count for categories or term.
Echo Markup
Send output to browser (1/True) or return output to PHP (0/False)
Display Hierarchy
Whether to traverse the taxonomy hierarchy.
Depth
Maximum depth. Default is 0

The Code

<?php
// wp_dropdown_categories();
// Generated by UseWordPress.com
// Use the value found in URL querystring
wp_dropdown_categories(array(
)
);
?>

Dropdown As Navigation Example

If you will be using the dropdown select for navigation and want users redirected to the selected category, add the following script to the bottom of your file along with you wp_dropdown code from above. This uses the ID variable you defined for your dropdown and uses the category name in the querystring, so you should use name in your Value Field for the following code to work.

Usage

In the generator fields above:
  • Add a unique ID
  • Use name for Value Field
<script>
var dropdown = document.getElementById('
');
function onCatChange() {
 if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
  location.href = "<?php echo get_option('home'); ?>/?category_name="+dropdown.options[dropdown.selectedIndex].value;
 }
 else if ( dropdown.options[dropdown.selectedIndex].value == 0 ) {
  location.href = "<?php echo get_option('home'); ?>";
 }
}
dropdown.onchange = onCatChange;
</script>
Available for Amazon Prime