Display hierarchical structure of Custom post type in UL LI

Question

I have 2 Custom Post types "Sections" and "Articles". I want to create sidebar navigation using this two post type.

"Section" custom post type is just simple post with page title which is ACF relationship field in Article custom post type.

Article is hierarchical custom post type which can have muli-level of children posts

I got success to get all post matching section_group meta value(post_title of section custom post type) but I want to show them in hierarchical structure until there is no child post.

In below structure 1,2,3 are page_titles form Sections. Under that all the articles has AFC custom filed (Relationship).

E.g

1. Getting Started

   • Parent Article 1
     • Child Article
       • Great-grandchild Article
     • Child Article
   • Parent Article 2

2. What You'll Need

   • Parent Article 1
     • Child Article
     • Child Article
       • Great-grandchild Article
     • Child Article
   • Parent Article 2
   • Parent Article 3

3. How It'll Work

   • Parent Article 1
     • Child Article
       • Great-grandchild Article
       • Great-grandchild Article
       • Great-grandchild Article
     • Child Article
       • Great-grandchild Article
     • Child Article
     • Child Article

I wish to have structure like above.

Below is the code where first I queried Section Custom post type
then I matched that with article's ACS relationship using meta_value
Which gives me all child and grandchild posts in same LI.

<?php

    $sections = new WP_Query(
        array(
            'posts_per_page' => -1,
            'post_type' => 'sections',
            'order' => 'ASC',
        )
    );

    if ( $sections->have_posts() ) : ?>
        <ul class="list-unstyled main">
    <?php while ( $sections->have_posts() ) :
            $sections->the_post(); ?>
               <li>
                    <?php the_title() // Page title from Section Custom post Type ?>


                    <?php $section_id = get_the_ID();
                    $articles = new WP_Query(
                        array(
                            'posts_per_page' => -1,
                            'post_type' => 'articles',
                            'order' => 'ASC',
                            'meta_query' => array(
                                array(
                                    'key' => 'section_group',
                                    'value' => $section_id,
                                    'compare' => 'LIKE'
                                )
                            )
                        )
                    ); ?>
                    <ul class="list-unstyled sub">
                    <?php           
                        if ( $articles->have_posts() ) :
                            while ( $articles->have_posts() ) :
                                $articles->the_post(); ?>

                                    <li class="this"><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></li>
                                     <!-- Sub LI Ends -->
                    <?php  endwhile;
                        endif; ?>
                    </ul> <!-- Sub UL Ends -->
               </li> <!-- Main LI Ends-->
    <?php endwhile; ?>
              </ul> <!-- Main UL Ends -->   
<?php   endif;

?>

Answer 1

The advanced solution is a Walker. But simplest sotution is a recursive function, which will work just like Walker. You can use one below:

function wpse343409_get_recursive_posts( $type = 'page', $parent_id = 0 ) { // default parent 0 means only top level posts

    $posts = new WP_Query( array(
        'post_type' => $type,
        'posts_per_page' => -1,
        'post_parent' => $parent_id,
        'ignore_sticky_posts' => 1, // In case of sticky posts, page may fall into an infinite loop
    ) );

    if( $posts->have_posts() ) :
        echo '<ul>';
        while( $posts->have_posts() ) : $posts->the_post();
            printf( '<li><a href="%s">%s</a>', esc_url( get_permalink() ), esc_html( get_the_title() ) );
            wpse343409_get_recursive_posts( $type, get_the_ID() );
            echo '</li>';
        endwhile;
        echo '</ul>';
    endif;

}

wpse343409_get_recursive_posts( 'sections' );