Wordpress: Dealing with three levels of navigation

Path

As I mentioned in a previous post (WordPress is great but..) there are some issues that can arise when trying to use the WordPress navigation in a way that it was not intended. WordPress handles 2 levels with no issues at all, but three can be complicated.

You have your root level navigation with Home, Services, and About. Each of those pages containing sub pages for instance under Services we will have each service. Each Service has some Examples but we would like to list them in a side bar rather than horizontally in the main navigation.

Wordpress would love to spit it out like this:

  • Home
  • Service
    • Service 1
      • Example a
      • Example b
      • Example c
    • Service 2
      • Example d
      • Example e
    • Service 3

WordPress only carries a parent child relationship. It is unaware of anything greater or smaller.

Meaning Example A has no idea that it is located under Services, However Wordpress will render the correct CSS attributes for current_page_item, current_page_ancestor, and current_page_parent. So Wordpress on some level knows how to do this but has not extended that to its navigation functions.

Since the root navigation knows where it sits and the third level of navigation will only be shown id the current page ID has child pages the issues lie in the second level, more or less the link.

So how can this be resolved? Well it will take a bunch of work, not complicated work but something that should be embedded into Wordpress.


$parent_id = $post->post_parent;
$parent = get_post($parent_id);
  
  if($parent->post_parent){
  	$top_level_id = $parent->post_parent;
  }else if($post->post_parent){
  	$top_level_id = $post->post_parent;
  }else{
  	$top_level_id = $post->ID;
  }
  
  if($parent->post_parent){
  	$children = wp_list_pages("title_li=&child_of=".$parent->post_parent."&echo=0&depth=1");
  	$my_id = $parent->post_parent;
  }else if($post->post_parent){
  	$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0&depth=1");
  	$my_id = $post->post_parent;
  }else{
  	$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0&depth=1");
  	$my_id = $post->post_parent;
  }
  if ($children) { ?>
<div id="subnavigation">
  <ul>
  	<?php echo $children; ?>
  </ul>
</div>

We basically traverse the page IDs setting when needs to be set in order to make the navigation act predictably.

Signup for my mailing list

Receive other rambings like this on design, code, and some times food.