wp query - Display hierarchical structure of Custom post type in UL LI

admin2025-01-07  4

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;

?>

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;

?>
Share Improve this question asked Jul 22, 2019 at 17:03 Uday SutariaUday Sutaria 1
Add a comment  | 

1 Answer 1

Reset to default 0

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' );
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1736252785a73.html

最新回复(0)