While most sites don’t need incredibly deep page navigation there are situations that justify a hierarchy beyond the typical 2 – 3 levels.  Unfortunately that can be cumbersome for top navigation drop-downs (more than 1 level of drop down is too much IMHO) so another solution needs to be found.  I ran into just such a situation for a client and while I”m also not a fan of left hand navigation it was the decision of the client to utilize it in conjunction with their top navigation, and in retrospect it made sense for them. To keep things easily navigable we also implemented breadcrumbs (which is a good practice anyway).

The mission was to display sub-pages of the current page you are on in the left nav and once you hit the bottom of the hierarchy to show pages which are parallel to that page within the same branch of the hierarchy.

After some digging and experimentation I came up with the following which executes perfectly in only a few lines of code.

<?php
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0&depth=1");
if ($children == "")
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0&depth=1");
?>
<ul>
<?php echo $children; ?>
</ul>
<?php endif; ?>

Of course you style to taste…

That’s it! Used in conjunction with a standard WordPress top-navigation and breadcrumbs you can easily display page sensitive multi-level navigation for your super-complex multi-level site!

Scott Ellis is the founder of VSELLIS.com and is a web producer for GeekBeat.tv.

  • http://www.bjarniwark.com Bjarni

    Do you have a link of it in action?

  • http://www.agentwp.com Agent Wordpress

    Very handy tip. I’ve been struggling with this issue with one of my sites and what I came up with was very complex. This little source code does all in neat and elegant way. Thanks a lot.

  • Dali Burgado

    Hey Scott,

    Thanks a bunch for the tip. I think it would be neat to see a photo of the site to see the masterpiece in action. Good for the visual folks ;-)

    Thanks, again!
    Dali

  • technosurvivor

    nice post. . thanks :D

  • http://www.travelworth.com Travel destinations

    The plugin generates the code necessary to create a Son of Suckerfish horizontal dropdown, vertical flyout or horizontal slider menu. The plugin produces W3C valid HTML and CSS and only requires JavaScript to function for very old browsers such as IE 6.

    # The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.

    # Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.

  • http://www.jndwebdesign.co.uk Web Design Manchester

    Very handy tip. The source code does all in neat and quality way. Thanks a bunch mate.

  • http://christianjessen.dk/about/ Christian Jessen

    Pretty nice tip when you are playing around with some more complex wordpress sites.. I’d like to see it in action though, but it is a nice and clean piece of code.

  • Rick

    Great tip. An elegant solution to a common problem.

  • http://www.americanrider.net harley rentals miami

    In my opinion bigger sites would not be useful without a proper multi level navigation systems. Sometimes even inside search engine is needed. But good navigation is a basic thing here.

  • nakliyat

    I would like to personally thank you for your outstanding product. elegant themes did exactly what you said it does. Friendly and courteous people are always a pleasure doing business with.

  • http://www.corebloggers.com/blog/ Nimit kashyap

    Thanks for the advice…can you please also provide us the link of your client’s site so that i can actually see it live.

  • Pingback: 35 WordPress Tips and Tricks You Must Know | SmashingHub

  • bev

    Can you provide me the link for this. By the way have a great mind… Thanks a lot dude

  • Pingback: 35 WordPress Tips and Tricks You Must Know « Design Works

  • http://www.wonderfulmonds.com won

    I would be neat to see a photo of the site to see the masterpiece in action to make my blog presentable at all time.

  • http://www.vsellis.com/ Scott Ellis

    Thanks to all for the comments, sorry I’ve been a little absent. The client I wrote that for has since butchered their site so I don’t typically use it as a referral anymore. However, I’m working on another site that will be done in the next couple of days that is also using it so I’ll point you guys to it when it launches. Stand by!

  • veteriner

    he code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.

  • http://www.techmadly.com Nitesh Patel @techmadly

    very nice tip but you must also include the link of the site on which it is being used ..
    thanks for sharing.

  • Pingback: 23 articles and resources to improve your Wordpress life! | JortK.nl

  • http://www.geniustablet.com pen tablet

    Good navigation system is a basic thing when it comes to making bigger sites interesting for potential users. I think that it is good advice to show the importance of navigation systems.

  • nakliyat

    Very handy tip. I’ve been struggling with this issue with one of my sites and what I came up with was very complex. This little source code does all in neat and elegant way. Thanks a lot.

  • Fahad (Make|Money|Adsense)

    can u please provide us the live demo of it?

  • ajay

    nice tip but can anyone describe me what is the meaning of post->ID i didn’t got this.

    • Fahad (Make|Money|Adsense)

      obviously it is the variable to call current post id.

  • Pompeii Tours

    Just what I was looking for to drive page rank down in my sites. Thanks :)

    How about a tweak to show a list of pages just for that pages parent….(i.e. only siblings when on a sibling)/ Any ideas?

  • Pingback: Tricky page navigation solution – Tom Altman’s Wedia Conversation | Tom Altman's WebDev Conversation

  • Pingback: Tricky page navigation solution – Tom Altman’s Wedia Conversation | Tom Altman's WebDev Conversation

  • Pingback: Tricky page navigation solution – Tom Altman’s Wedia Conversation | Tom Altman's WebDev Conversation

  • Pingback: Page Sensitive Multi-Level Navigation | WordPress World

  • contms

    Nice try, very useful codes.

  • talonecl

    I want to make your blog to be loaded with more SEO friendly features . Thank for sharing this method. :)

  • talonecl

    I think the plugins are designed to provide you a complete hold over the creation.

  • yumidanc

    I really like the plugin offers W3C valid XHTML and CSS functionality.

  • Faisal (Urdu)

    Do you have any demonstration of this code?

  • http://www.netage.co.za Net Age | Web Design

    Multi level navigation can be such a royal pain in the rear, but I must concur that using the left hand side navigation to solve that does make the most sense to me. I still prefer to try and keep things as simple as possible, otherwise people just get overwhelmed, and then they generally leave…

  • http://www.pc-tablet.info Mr. Oizo

    Thanks for this post. When I have multiple categories, I often use a Multi-Level Navigation in my blogs. This is very useful.

  • riesurya

    Simple and useful trick for multi categories. nice to try. Thanks Scott :)

  • Pingback: 35 WordPress Tips and Tricks You Must Know | SmashingHub

  • Oris WilliamsF1

    . I still prefer to try and keep things as simple as possible, otherwise people just get overwhelmed, and then they generally leave…

  • Pingback: 35 WordPress Tips and Tricks that You Must Wants to know! |

  • Pingback: 35 WordPress Tips and Tricks You Must Know | ThemesBank Blog

  • Pingback: 100+ Resources for WordPress Theme Developers - | Web Help 101