WordPress list categories dropdown with parent-child relation and child under it's parent

Question

I am attempting to display a category dropdown (select) with parent categories and child categories tagged under the child category. Example:

parent A
parent B
parent C
- child of C
- child of C
- child of C
parent D
parent E
- child of E
- child of E
parent F

Instead what I am getting is the following:

parent A
parent B
parent C
parent D
parent E
parent F
- child of C
- child of C
- child of C
- child of E
- child of E

Here is my shortcode:

function categories_dropdown() { 
  $args = array(
  'taxonomy'          => 'my_custom_taxonomy',
  'hide_empty'        => false,
  'echo'              => true,
  'hierarchical'  => true,
  'show_count'        => false,
  'orderby'           => 'parent', 
);

$categories = get_categories($args);

$select = "<select name='cat' id='categories_dropdown' class='postform'>n";
$select.= "<option value='-1'>Select category</option>n";

foreach($categories as $category){
  if($category->count > 0){
    if($category->parent!=0) {
      $select.= "<option value='".$category->slug."'> - ".$category->name." (". $category->count .")</option>";
    } else {
      $select.= "<option value='".$category->slug."'>".$category->name." (". $category->count .")</option>";
    }
    
  }
}

$select.= "</select>";

return $select;

}
add_shortcode('categories-dropdown', 'categories_dropdown');

My question here is, which of the arguments are responsible for the correct ordering of the children under the parent taxonomy category? Is this at all done with arguments or is this a matter of the way I have to code the display of the options dropdown? I am really thankful for your time.

Answer 1

My question here is, which of the arguments are responsible for the correct ordering of the children under the parent taxonomy category?

None — the orderby arg only sorts the categories and not grouping them (placing them under their own parent), so you would need to manually do the grouping.

And setting orderby to parent will only put all parent categories at the top, then followed by child categories, just like your example in the question..

But instead of manually grouping the categories..

You could actually simply use wp_dropdown_categories() to get the hierarchical structure/display:

$args = array(
    'taxonomy'     => 'my_custom_taxonomy',
    'hide_empty'   => false,
    'echo'         => false,
    'hierarchical' => true,
    'show_count'   => true,
    'orderby'      => 'parent',
    'id'           => 'categories_dropdown',
    'value_field'  => 'slug',
);

$select = wp_dropdown_categories( $args );

And that would give you a select menu with the markup/HTML similar to the one in the question.

However, if you need to add custom HTML like data-xxx attribute to the <option> tag, then you can use your own custom walker class (see Walker_CategoryDropdown) or try the recursive function in my answer on Stack Overflow.