How to display list of child pages with parent in wordpress?

Question

I have following format of sub-pages in WordPress:

About Us 
  -Services 
  -Products 
  -Surgery 

I want to list all sub-pages with parent page like above but the code that I am using

from wpbeginner site is not working as my requirement. Can somebody tell me that

how to show sub-pages with parent page.

I tried following code in functions.php file:

function wpb_list_child_pages() {
    global $post;
    if ( is_page() && $post->post_parent ) {
        $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' );
    }
    if ( $childpages ) {
        $string = '<ul>' . $childpages . '</ul>';
    }

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

And then use short code [wpb_childpages] in widget but it is showing only child page but I want child page with parent page

Answer 1

The code you are using only gets the children of a parent page. It first checks to see in which page you are. If you are in a child page it uses the parent ID to print it's children. If you're in a parent page then it just looks for it's children using the post ID. Neither case it prints the actual parent. I edited the code so that it will print the parent. If you're in a child page it will get the parent using get_the_title(), if you're in a parent page then you already have that information in the $post object. See if that works for you.

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' );

Alternatively you can also make the parent title a link by using get_permalink().

Answer 2

The above selected code, has errors.

The fixed version below:

function wpb_list_child_pages() {
    global $post;
    $string = ''; // Initialize the variable
    $parent = '';

    // Check if the current post is a page and has a parent page
    if ( is_page() && $post->post_parent ) {
        // Get the child pages of the parent page
        $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 {
        // Get the child pages of the current page
        $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
        $parent = $post->post_title;
    }

    // If there are child pages, format the output
    if ( $childpages ) {
        $string = '<ul><li>' . esc_html( $parent ) . '<ul>' . $childpages . '</ul></li></ul>';
    }

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