Wordpress - Nested list of categories & subcategor

Question

Im trying to display a list of my wordpress categories with nested subcategories. So far i've only been able to get a list of parent categories or a list of subcategories excluding parents but I haven't been able to join the two together.

This is the sort of result I am looking to create:

• Parent Category
  • Subcategory
  • Subcategory
• Parent Category
  • Subcategory
• Parent Category
  • Subcategory
  • Subcategory
  • Subcategory

EDIT:

The idea for this is to create a custom category page. The HTML is as follows:

<h1>Categories</h1>
<ul class="blocks">
    <li>
        <img src="http://placehold.it/250x250" alt="title" />
        <h2>Parent Category</h2>
        <ul class="models">
            <li><a href="#">Sub Category</a></li>
            <li><a href="#">Sub Category</a></li>
        </ul>
    </li>
    <li>
        <img src="http://placehold.it/250x250" alt="title" />
        <h2>Parent Category</h2>
        <ul class="models">
            <li><a href="#">Sub Category</a></li>
            <li><a href="#">Sub Category</a></li>
            <li><a href="#">Sub Category</a></li>
        </ul>
    </li>
</ul>

Answer 1

Your best bet is to extend the Walker class to walk through categories... The easiest way of doing this is to create your own Widget.

Here's one that I've created a while ago: https://www.dropbox.com/s/mazpb4cxmqracwo/adv_categories.zip

I'm not going to pretend that it's 100% functional but it allowed me to have categories with sub-categories on my blog.

Answer 2

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>