Can this navigation be done easily in WordPress?

1 Views

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.

Read More

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.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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 menus collects some useful information about this topic.

  2. 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.

  3. 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.