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.

Can anyone please let me know if a dual navigation style is easily achievable or not possible. A WordPress developer I'm in touch with is telling me it's not.

Basically, we would like the navigation to be via links at the top of the web page but also introduce a sub-navigation on the left side of the page.

So if you were on the HOME section, you'd have 3 tabs on the left, breaking HOME down into 3 sub parts. If you clicked on another top link and went to section XYZ, the tabs on the left would vary to offer sub-sections of XYZ.

I know it can obviously be done from a HTML point of view but the guy is saying it's not possible to do this and at the same time, keep the content editable within WordPress as Pages etc.

I would like all the main pages and their sub content editable via WordPress CMS.

Possible? Thanks

ps: I would have added an attachment but not allowed as I'm a new user.

share|improve this question
add comment

3 Answers

It is possible. Two options:

  1. If the subpages are just children of the currently displayed page, you call:

    wp_list_pages( array ( 'child_of' => $GLOBALS['post']->ID ) );
    

    See Codex documentation. Very simple.

  2. If you need a custom structure, for example a list of custom taxonomies when a special post type is viewed, you need to create a custom nav menu and a custom walker.

    The walker has to collect the associated items for the current page, save those somewhere and then another function would have to print it out where you need it.
    For someone not familiar with this stuff it may take a while to get this right. Our tag collects some useful information about this topic.

share|improve this answer
    
Many thanks for your help - it seems to me I'm after (1) - I'll forward your answer to the developer and hopefully will get us somewhere. –  Riaz Mar 20 '12 at 9:46
    
(1) will not work if the menu is more than 2 levels deep, or if the parent menu item is not a page –  Tom J Nowell Mar 20 '12 at 15:33
    
@TomJNowell (1) is about pages only. So it will work. You can use any depth you wish, or did I miss something? –  toscho Mar 20 '12 at 15:47
    
It would break down as soon as you went into a sub section with children, as the second level would not be visible until you went back up or to a top level page. It would also fail when inside a sub section as you would be wanting children of the posts parent, not the post itself. –  Tom J Nowell Mar 20 '12 at 16:02
add comment

An alternate approach to @Toscho's suggestion is to use purely CSS to control the display of the sub-navigation menu. I have a working example in my Oenology Theme.

Basically, you have two outputs of wp_list_pages(): the main/header navigation, and the side/sub-navigation.

  • The main/header navigation can be single-depth, or can use any of the common-practice methods for outputting dropdown menus.
  • The side/sub-navigation will use CSS to determine which hierarchical page trees are displayed, using the core-generated CSS classes, primarily .current-menu-item, .current-menu-parent, and .current-menu-ancestor (analogs of .current_page_item, .current_page_parent, and .current_page_ancestor).

The benefit of using the CSS approach is that you never have to worry about identifying the top-level parent. If you use $post->post_parent, then you have to worry about your hierarchical depth if you want the side/sub-navigation always to correspond to a given top-level Page.

share|improve this answer
add comment

This is perfectly possible, is you look at the custom menu walker class Bootstrap_Second_Level_Walker_Nav_Menu here:

https://github.com/Tarendai/BootPress/blob/master/functions.php#L218

Use this on your lefthand side menu bar, then apply a maximum depth of 1 to your top level links, this will give you a top level menu that is always the same, and a sidemenu that changes depending on which part of the site you're at.

here's an example of how to use the custom walker class:

$args = array(
    'theme_location'=>  'header-menu',
    'walker'        =>  new Bootstrap_Second_Level_Walker_Nav_Menu()
);
wp_nav_menu( $args );

Place the walker class in your functions.php and use code similar to the above to show your menu then style accordingly.

share|improve this answer
add comment

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.