You’ll need to use something other than a single WP_Query. You could use wp_list_pages()
with a custom walker to get your desired structure.
wp_list_pages
in widget, sidebar, or wherever you want the list to appear:
<ul class="cpt-hierarchy"><!-- or whatever class you like -->
<?php
wp_list_pages(array(
'post_type' => 'cpt', // replace with your cpt's slug
'title_li' => '', // don't include a title LI
'post_status' => 'publish', // don't include private/draft/etc.
'sort_column' => 'post_title', // order by post title
'walker' => new wpse_hierarchy_walker)
);
?>
</ul>
Walker in theme’s functions.php:
<?php
class wpse_hierarchy_walker extends Walker_page {
public function start_el(&$output, $page, $depth = 0, $args = array(), $current_page = 0) {
if($depth)
$indent = str_repeat("\t", $depth);
else
$indent="";
extract($args, EXTR_SKIP);
$css_class = array('page_item');
if(!empty($current_page)) {
$_current_page = get_page( $current_page );
$children = get_children('post_type=page&post_status=publish&post_parent=".$page->ID);
if(count($children) != 0) {
$css_class[] = "hasChildren';
}
if(isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors))
$css_class[] = 'current_page_ancestor';
if($page->ID == $current_page)
$css_class[] = 'current_page_item';
elseif($_current_page && $page->ID == $_current_page->post_parent)
$css_class[] = 'current_page_parent';
} elseif($page->ID == get_option('page_for_posts')) {
$css_class[] = 'current_page_parent';
}
$css_class = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );
if($page->ID == $current_page) {
$output .= $indent .'<li class="' . $css_class . '">' . $page->post_title;
} else {
$output .= $indent .'<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $page->post_title .'</a>';
}
}
}
?>
Then using CSS you can indent the children as much as you want. li.hasChildren ul
will be wrapped around the children.