1

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>
  • 1
    Call to the function only returns the value. Have you tried using echo before calling the function? – Jack Johansson Apr 16 '17 at 8:49
  • Sorry I don't really understand ...I'm terrible at php haha! – user1406440 Apr 16 '17 at 9:07
  • 1
    No problem. I meant call the function the following way: <?php echo wpb_list_child_pages(); ?> – Jack Johansson Apr 16 '17 at 9:09
  • Thanks man! I still don't fully understand why but it's pulling in the page links now! :) Is there a way to inject another list item (first) and make that a link to the parent page? – user1406440 Apr 16 '17 at 9:56
  • Yes, it's possible. If you explain your 3rd note to me a bit more clear, i will post a solution to all of your questions in an answer, since it's too long to be posted as a comment. – Jack Johansson Apr 16 '17 at 10:17
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.

  • That's great thanks! When I paste in the code the first list-item and link is there but there's no text in it. I get some random text (number+name of a child page) above the string on the page, maybe that's it? Is there a way to give the heading the parent page title? Thanks again! – user1406440 Apr 16 '17 at 13:31
  • 1
    @user1406440 You're welcome. I updated the answer and use get_the_title() instead. Since this is a custom menu, i didn't know what to use for Navigation Title What do you want to show as title? – Jack Johansson Apr 16 '17 at 18:56
  • That's great, really appreciate it. Sorry for updating so late, I was away most of yesterday. For the title I can think of something or use '.get_the_title($post->post_parent).' so that gives me a few options! I guess that code would also work well on it's own (out of the list) as a 'back' link which was another think I was thinking about :) The only thing that'd be nice is if the parent page is the current page, it also has a class of .current_page_item on it? – user1406440 Apr 17 '17 at 9:11
  • You're welcome. You can set the title to whatever you want, it's optional, I didn't know what would you want so i left it blank. But i don't understand what do you mean, How can a page be current and parent at the same time? – Jack Johansson Apr 17 '17 at 10:09
  • It's not important but the first li in the menu is the parent page and you can see this menu when you're on that page as well. When you view a child page it's menu item gets a class of current_page_item so it has a selected style. I figured maybe the parent link should as well, if that's the page you're on? Like I say, not important I'm just trying to play around with stuff. :) – user1406440 Apr 17 '17 at 10:40
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.