Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm looking to create a child menu and none of the examples in the Wordpress codex seem to do what I'm trying to create.

I have a main horizontal nav bar, which is fine. When clicking on a top-level page, I want a side-bar menu to show up with an accordion effect to browse through the child pages; however, when visiting a child page, I don't want the sidebar menu to reset to show the next tier as the top page... if that makes sense:

Here is a JSFiddle to demonstrate what I mean: http://jsfiddle.net/DY8Fk/

If you were to click main nav link in the top nav bar, it shows that page with a sub-menu. No matter what page you visit within that sub menu, the sub menu doesn't change.

I would want to use CSS to highlight the current page within the nav menu, and possibly add an accordion effect.

Any help would be greatly appreciated!

share|improve this question

1 Answer 1

I've figured this out. I think one of the examples in the Wordpress Codex is supposed to be the solution but simply doesn't work.

Here is what worked for me:

               <?php
                    if ($post->post_parent) {
                    $ancestors=get_post_ancestors($post->ID);
                    $root=count($ancestors)-1;
                    $parent = $ancestors[$root];
                    } else {
                        $parent = $post->ID;
                    }
                        $children = wp_list_pages("title_li=&child_of=". $parent ."&echo=0");
                        if ($children) { ?>
                        <h3><?php echo get_the_title($parent); ?></h3>
                        <ul id="subnav">
                            <?php echo $children; ?>
                        </ul>
               <?php } ?>

Which then outputs this:

About Us

Our Mission
Strategic Plan
Our History
    History of Oak Hall

'About Us' is a header using the title of the topmost parent page. The menu underneath is static, no matter which page you then choose within that submenu.

Some CSS styling was then used to indicate the current page and separate the children of those sub-pages.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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