I'm using WordPress as a CMS and would like to have categories selectable from multiple selections i.e <option>.

enter image description hereenter image description here

As a usage example, The first dropdown would contain parent categories. Then after selecting the parent a second select drop-down would appear with the child categories. There are a few plugins available on Wordpress.org but they all seem to be broken or out of date. Any help would be appreciated.

Broken plugin http://wordpress.org/extend/plugins/ajax-category-dropdown/

The code I'm using from wordpress.org

<form action="<?php bloginfo('url'); ?>/" method="get">
    $select = wp_dropdown_categories('orderby=name&echo=0&depth=0&hierarchical=1&exclude=5,4');
    $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
    echo $select;
    <noscript><input type="submit" value="View" /></noscript>
function parent_child_cat_select() { ?>
        <script type="text/javascript">
        /* <![CDATA[ */
            jQuery(document).ready(function() {     
                    var parentCat=jQuery('#parent_cat').val();
                    // call ajax
                        data:'action=category_select_action&parent_cat_ID=' + parentCat,
        /* ]]> */

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

        <div id="parent_cat_div"><?php wp_dropdown_categories("show_option_none=Select parent category&orderby=name&depth=1&hierarchical=1&id=parent_cat"); ?></div>

        <div id="sub_cat_div"><select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>Select parent category first!</option></select></div>

        <div id="submit_div"><input type="submit" value="View" /></div>

<?php }

function implement_ajax() {
    $parent_cat_ID = $_POST['parent_cat_ID'];
    if ( isset($parent_cat_ID) )
        $has_children = get_categories("parent=$parent_cat_ID");
        if ( $has_children ) {
        } else {
            ?><select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>No child categories!</option></select><?php
    } // end if
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//for users that are not logged in.

//this is optional, only if you are not already using jQuery  
function load_jquery() {
add_action('init', 'load_jquery');

For displaying the the drop-down menus use the parent_child_cat_select() function.

<?php parent_child_cat_select(); ?>
  • add_action('wp_ajax_category_select_action', 'implement_ajax');//for users that are not logged in. Should be add_action( 'wp_ajax_nopriv_category_select_action'. 'implement_ajax' ); – Cristian Apr 24 '11 at 16:32
  • @Wild Phoenix yes you are right. I fixed it in my post. – Ján Bočínec Apr 24 '11 at 16:36
  • Thanks! However, I'm getting a message that's indicating there are no child categories when there are several. – Zach Shallbetter Apr 25 '11 at 18:54
  • @Zach do you have posts assigned to these child categories? Also be aware this setting will list only strictly related sub-categories. – Ján Bočínec Apr 25 '11 at 22:08
  • @JohnnyPea Yep, each has several custom posts. I'm ok with it listing strictly related categories. For instance Camera would have each of the categories that I've assigned products to. I updated the post with a shot of what my categories section looks like. Thanks again for your help. – Zach Shallbetter Apr 25 '11 at 22:13
<form action="<?php echo remove_query_arg(array('mycat_go', 'cat')); ?>" method="get">
    // get selected category and do some initializations
    if (isset($_REQUEST['cat'])) $_REQUEST['mycat_go'] = $_REQUEST['cat'];
    $selected = $_REQUEST['mycat_go'];
    $selects = array();
    $last = 0;
    $top = false;
    $i = 0;
    // basically, we are looping from the selected up through the parents
    // till we have no parent anymore.
    while (!$top) {
        // prep query to generate field containing all child categories
        // of the selected one
        $args = array(
            'name' => 'mycat_'.$i,
            'orderby' => 'name',
            'echo' => 0,
            'hierarchical' => 1,
            'exclude' => '4,5',
            'child_of' => $selected,
            'depth' => 1,
            'show_option_none' => '--select--',
            'hide_if_empty' => true,
        if(!empty($last)) $args['selected'] = $last;
        // prepare next loop iteration or stop if we are displaying children of 0
        if (!empty($selected)) {
            $last = $selected;
            $category = get_category($selected);
            $selected = $category->parent;
        } else {
            $top = true;
        // generate output and store in reversed order as we are going bottom up
        $select = wp_dropdown_categories($args);
        $select = preg_replace("#<option([^>]*)>#", "<option$1 onclick=\"this.parentNode.name = 'mycat_go';return this.form.submit()\">", $select);
        array_unshift($selects, $select);
    // print to screen
    foreach ($selects as $select) {
        echo $select;
<form action="<?php remove_query_arg(array('mycat_go', 'cat')); ?>" method="get">
    <input type="hidden" name="cat" value="<?php echo $_REQUEST['mycat_go']; ?>" />
    <input type="submit" value="Go there" />

Could use some polishing, but should work.

  • lol, that was pretty impressive and it totally makes sense! However there's an error on line 15 if(!empty($last) $args['selected'] = $last; I'm not sure what's causing it. – Zach Shallbetter Feb 28 '11 at 16:43
  • @Zach Shallbetter: Oops, that's a typo...missing closing bracket. Edited it. – wyrfel Feb 28 '11 at 17:23
  • So I went ahead and added it to the page and it returned an uncountable list of select boxes. It also had a huge load time. I thought it might be me so I nuked a few categories and wiped all other code off of the template. Didn't seem to resolve the issue. – Zach Shallbetter Feb 28 '11 at 18:15
  • @Zach Shallbetter: Looks like the loop condition doesn't grab and it keeps on looping. Ok...i made another edit that should avoid the loop from going endlessly when no initial selection is made. – wyrfel Feb 28 '11 at 18:18
  • Seems to only show a single select box with the child values. Also, when you select an item it doesn't perform an action. – Zach Shallbetter Feb 28 '11 at 18:33

protected by Community Mar 6 '12 at 20:05

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.