Child page menu in sidebar

Question

I don't want to use the dropdown menu for sub/child pages on my Wordpress site, I want the pages to be listed in the sidebar on the parent page.

This is the code I'm got so far (below), however it doesn't display anything in the sidebar so I'd appreciate some help!

This is in my functions.php:

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 this is the call in the page.php (also tried sidebar.php):

<?php wpb_list_child_pages(); ?>

Any ideas what's going wrong?!

On another note, I thought the parent page should be listed in the navigation to so it's easy to get back to (even though it's in the main nav). Is there a way of making the first list item the parent page?

And yet another note, the only way I could find to turn off/hide the dropdown without CSS was to create a custom menu in Appearance > Menu and turn off the children. Is there another, better way?

Thanks in advance!

EDIT

I just thought I'd add an update to show the markup I'm trying to output. I realised I need to get the title/parent page in there too! Here's the example markup:

<nav class="page-nav">
    <h3>Navigation Title</h3>
    <ul>
        <li><a href="#">Parent page</a></li>
        <li><a href="#">Child page #1</a></li>
        <li><a href="#">Child page #2</a></li>
        <li><a href="#">Child page #3</a></li>
    </ul>
</nav>

Answer 1

When trying to output a function's content, you have to notice whether you want to pass the data to another function (or something else which you want to feed), or you want to directly print it to the browser.

If you use return, your function will return the data, so you can use them in a secondary function as below:

second_function(first_function($input));

If you want to simply print the content to the browser, use either echo or print_r instead of return. It's recommended to use echo in your case. However, do not use echo while making shortcode functions. It will output the text in the ways you don't want to.

Back to our WordPress problem, shall we?

For the provided structure, use the following function:

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 = '
        <nav class="page-nav">
            <h3>Navigation Title</h3>
               <ul>
                   <li><a href="'.get_permalink($post->post_parent).'">'.get_the_title($post->post_parent).'</a></li>'
                   .$childpages.
               '</ul>
        </nav>';
    }
    return $string;
}

add_shortcode('wpb_childpages', 'wpb_list_child_pages');

Now, use this function to output your menu to wherever you wish:

<?php echo wpb_list_child_pages(); ?>

or do the shortcode:

echo do_shortcode( ' [wpb_childpages] ' );

or even use the shortcode in a text widget:

[wpb_childpages]

All producing the same result.

Answer 2

Just put this code in your custom css menu of theme

.children {display:none;}

Or use the Flexi page plugin which will only show sub pages on any page when the root page is open in browser.