how can I list the parent item with the child item in WP?

I use this:

function wpb_list_child_pages() {
    global $post;
    $parent = "";
    if ( is_page() && $post->post_parent ) {
        $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
        $parent =  get_the_title($post->post_parent);
    } else {
        $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );

        $parent = $post->post_title;
    }
    if ( $childpages ) {
        $string = '<ul><li>' . $parent;
        $string .= '<ul>' . $childpages . '</ul>';
        $string .= '</li></ul>';
    }

    return $string;
}    
add_shortcode( 'wpb_childpages', 'wpb_list_child_pages' );

but I need this:

<ul>
<li><a href="#">PARENT ITEM</a></li>
<li><a href="#">CHILD ITEM 1</a></li>
<li><a href="#">CHILD ITEM 2</a></li>
<li><a href="#">CHILD ITEM 3</a></li>
<li><a href="#">CHILD ITEM 4</a></li>
</ul>

how can I list the parent item with the child item in WP?

I use this:

function wpb_list_child_pages() {
    global $post;
    $parent = "";
    if ( is_page() && $post->post_parent ) {
        $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
        $parent =  get_the_title($post->post_parent);
    } else {
        $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );

        $parent = $post->post_title;
    }
    if ( $childpages ) {
        $string = '<ul><li>' . $parent;
        $string .= '<ul>' . $childpages . '</ul>';
        $string .= '</li></ul>';
    }

    return $string;
}    
add_shortcode( 'wpb_childpages', 'wpb_list_child_pages' );

but I need this:

<ul>
<li><a href="#">PARENT ITEM</a></li>
<li><a href="#">CHILD ITEM 1</a></li>
<li><a href="#">CHILD ITEM 2</a></li>
<li><a href="#">CHILD ITEM 3</a></li>
<li><a href="#">CHILD ITEM 4</a></li>
</ul>

• menus

Share Improve this question asked Mar 25, 2019 at 21:31 matstilmatstil 1 1

• There are a bunch of ways to do this, but here's a previous answer... wordpress.stackexchange/questions/192895/… – Monkey Puzzle Commented Mar 25, 2019 at 23:23

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

function wpb_list_child_pages() {
    global $post;
    $parent = "";
    if ( is_page() && $post->post_parent ) {
        $parent = wp_list_pages( 'title_li=&include=' . $post->post_parent . '&echo=0' );
        $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
    } else {
        $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
        //$parent = $post->post_title;
    }

    if ( $childpages ) {
        $string = '<ul>'. $parent . $childpages . '</ul>';
    }

    return $string;
}
add_shortcode( 'wpb_childpages', 'wpb_list_child_pages' );

OUTPUT ON TOP LEVEL PAGE

<ul>
    <li class="page_item page-item-283">
       <a href="http://192.168.8.200/www/parent-page/child-page-1/">Child Page 1</a>
    </li>


    <li class="page_item page-item-285">
       <a href="http://192.168.8.200/www/parent-page/child-page-2/">Child Page 2</a>
    </li>

    <li class="page_item page-item-286">
       <a href="http://192.168.8.200/www/parent-page/child-page-3/">Child Page 3</a>
    </li>

</ul>

OUTPUT ON A CHILD PAGE

<ul>

    <li class="page_item page-item-282 current_page_ancestor current_page_parent">
       <a href="http://192.168.8.200/www/parent-page/">Parent page</a>
    </li>

    <li class="page_item page-item-283 current_page_item">
       <a href="http://192.168.8.200/www/parent-page/child-page-1/" aria-current="page">Child Page 1</a>
    </li>

    <li class="page_item page-item-285">
       <a href="http://192.168.8.200/www/parent-page/child-page-2/">Child Page 2</a>
   </li>

   <li class="page_item page-item-286">
       <a href="http://192.168.8.200/www/parent-page/child-page-3/">Child Page 3</a>
   </li>

</ul>