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.

  1. Bjarni says:

    Do you have a link of it in action?

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

  3. Dali Burgado says:

    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

  4. technosurvivor says:

    nice post. . thanks :D

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

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

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

  8. Rick says:

    Great tip. An elegant solution to a common problem.

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

  10. nakliyat says:

    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.

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

  12. bev says:

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

  13. won says:

    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.

  14. Scott Ellis says:

    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!

  15. veteriner says:

    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.

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

  17. pen tablet says:

    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.

  18. nakliyat says:

    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.

  19. Fahad (Make|Money|Adsense) says:

    can u please provide us the live demo of it?

  20. ajay says:

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

  21. Pompeii Tours says:

    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?

  22. contms says:

    Nice try, very useful codes.

  23. talonecl says:

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

  24. talonecl says:

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

  25. yumidanc says:

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

  26. Faisal (Urdu) says:

    Do you have any demonstration of this code?

  27. 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…

  28. Mr. Oizo says:

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

  29. riesurya says:

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

  30. Oris WilliamsF1 says:

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

Trackbacks/Pingbacks »

  1. 35 WordPress Tips and Tricks You Must Know « Design Works says:
  2. Page Sensitive Multi-Level Navigation | WordPress World says:
  3. 35 WordPress Tips and Tricks that You Must Wants to know! | says:
  4. 35 WordPress Tips and Tricks You Must Know | ThemesBank Blog says:

Tweetbacks »