You can use wp_list_categories()
function which uses these defaults:
<?php wp_list_categories(array(
'show_option_all' => '',
'orderby' => 'name',
'order' => 'ASC',
'style' => 'list',
'show_count' => 0,
'hide_empty' => 1,
'use_desc_for_title' => 1,
'child_of' => 0,
'feed' => '',
'feed_type' => '',
'feed_image' => '',
'exclude' => '',
'exclude_tree' => '',
'include' => '',
'hierarchical' => 1,
'title_li' => __( 'Categories' ),
'show_option_none' => __( 'No categories' ),
'number' => null,
'echo' => 1,
'depth' => 0,
'current_category' => 0,
'pad_counts' => 0,
'taxonomy' => 'category',
'walker' => null
)); ?>
So technically you can just say:
wp_list_categories();
And this will list your categories hierarchically hiding any empty categories and adding a title of "Categories" above them all.
EDIT - Separate Parents and Children
You can try something like this, this using a combination of both wp_list_categories()
and the get_categories()
function.
<h1>Categories</h1>
<ul class="blocks">
<?php $parents = get_categories(array('hierarchical' => false));
if(!empty($parents)){
foreach($parents as $parent){
?>
<li>
<h2><?php echo $parent->name; ?></h2>
<ul class="models">
<?php wp_list_categories(array('hierarchical' => false, 'child_of' => $parent->term_id)); ?>
</ul>
</li>
<?php
}
} else {
?>
<li>No Categories</li>
<?php } ?>
</ul>