Wordpress Menu Navigation

1-header.php

<nav class="container_12">
<?php 
  //Counter
  $i=0;

  //An array that will eventually contain the correct top-level navigation items in it
  $menu_arr = array();

  //Loop though all the nav items in Wordpress
  foreach ( wp_get_nav_menu_items('Nav')  as $key => $item ) {
    //Depending on the item type, determine if it is currently selected
    $is_current = 
      ( $item->object == 'page' &&  is_page($item->object_id) ) ||
      ( $item->object == 'custom' && ( is_home($item->object_id) || is_category() || is_single()  ) );

    //Create an array representation of this nav item
    //that includes some important properties we will need.
    //The first item needs a special grid class to be positioned correctly
    $this_nav_item = array(
      'url' => ($item -> url),
      'title' => ($item -> title),
      'grid_class' => (($i==0) ? 'grid_2 prefix_1' : 'grid_2'),
      'is_current' => $is_current
    );

    if($item -> menu_item_parent == 0){
      //Only add top-level items to the main array
      $menu_arr[$item->ID] = $this_nav_item;
    }else{
      //If a sub-page is the current page, find the parent page and make it selected instead
      if($is_current ) $menu_arr[$item -> menu_item_parent ]['is_current']= true;
    }

      //Increment the counter
      $i++;
  }
  
  //----------------------

  //Find the first item in the array
  $firstItem = array_shift(array_values($menu_arr));

  //If we don't know where we are, then just make the first item as the current one
  if(!is_home() && !is_page()) $firstItem['is_current'] = true;

  //Var to stick some output HTML into
  $menu_html="";

  //Loop through the array we created above...
  foreach ($menu_arr as $key => $item) {

    //If the item is the current one, add a class to make it visibly selected
    $selected = $item['is_current'] ? ' class="nav-current"' : '';

    //Build up the needed output
    $menu_html.= '<div class="' . $item['grid_class'] . '"><a href="' . $item['url'] . '"'.$selected.'>' . $item['title'] . '</a></div>';
  }
    
  //Output the final menu HTML
  echo $menu_html; 
?>
</nav>

2-header-output.htm

<nav class="container_12">
  <div class="grid_2 prefix_1"><a href="http://chris-barr.com/" class="nav-current">Blog</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/photos/">Photos</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/videos/">Videos</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/projects/">Projects</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/about/">About</a></div>
</nav>

3-sidebar.php

<aside id="sidebar">
  <nav>
<?php
  
  //Get all the menu nav items
  $menuItems = wp_get_nav_menu_items('Nav');

  //Some vars we will use later
  $currentParentObjId;
  $currentParentMenuId;

  //Loop through all the menu items
  foreach($menuItems as $menuItem) {

    //Look for the menu item that matches the page we are currently on
    if($menuItem->object_id == $post->ID && $menuItem->object == $post->post_type) {
      
      //When we find it, save same data about it's parent item in the menu
      $currentParentObjId = $menuItem->object_id;
      $currentParentMenuId = $menuItem->menu_item_parent;
      
      //Exit the loop since we've found what we are looking for
      break;
    }
  }

  //----------------------
  
  //Create an empty array to use for the sidebar menu
  $menu_arr = array();

  //Add the first item, "All", to the array
  //since this doesn't actually exist in the Wordpress menu
  array_push($menu_arr, array(
    'url' => get_permalink($post->post_parent),
    'title' => "All",
    'is_current' => ($post->post_parent == 0)
  ));

  //----------------------

  //Counter
  $i=0;

  //Loop though all the nav items again
  foreach ( $menuItems as $item ) {

    //Determine if this item is for the page we are currently on
    $is_current = $item->object == 'page' &&  is_page($item->object_id);

    //Create an array representation of this nav item
    //that includes some important properties we will need.
    $this_nav_item = array(
      'url' => ($item -> url),
      'title' => ($item -> title),
      'is_current' => $is_current
    );

    if($item -> post_parent == $currentParentObjId){
      //Only add the children for the current page to the main array
      $menu_arr[$item->ID] = $this_nav_item;
    }else if($item -> post_parent !== 0 && $item -> menu_item_parent == $currentParentMenuId){
      //If we are on a sub-page add the siblings to the main array
      $menu_arr[$item -> ID ] = $this_nav_item;
    }

    //Increment the counter
    $i++;
  }

  //----------------------

  //Var to stick some output HTML into
  $menu_html="";

  //Loop through the array we created above...
  foreach ($menu_arr as $key => $item) {

    //If the item is the current one, add a class to make it visibly selected
    $selected = $item['is_current'] ? ' nav-current' : '';

    //Build up the needed output
    $menu_html.= '<a href="' . $item['url'] . '" class="alt-link-color'.$selected.'">' . $item['title'] . '</a>';
  }
  
  //Output the final menu HTML
  echo $menu_html;

?>
  </nav>
</aside>

4-sidebar-output.htm

<aside id="sidebar">
  <nav>
    <a href="http://chris-barr.com/photos/" class="alt-link-color nav-current">All</a>
    <a href="http://chris-barr.com/photos/weddings/" class="alt-link-color">Weddings</a>
    <a href="http://chris-barr.com/photos/engagements/" class="alt-link-color">Engagements</a>
    <a href="http://chris-barr.com/photos/portraits/" class="alt-link-color">Portraits</a>
    <a href="http://chris-barr.com/photos/bridals/" class="alt-link-color">Bridals</a>
    <a href="http://chris-barr.com/photos/africa/" class="alt-link-color">Africa</a>
    <a href="http://chris-barr.com/photos/2010-photo-project/" class="alt-link-color">2010 Photo Project</a>
  </nav>
</aside>

5-index.php

<?php
  $isPageWithSubpagesOrASubPage = 
    is_page()  && (
      get_pages('child_of='.$post->ID) || (
        end($post->ancestors) != 0 && 
        get_pages("child_of=".end($post->ancestors))
      )
    );

  //Show the sidebar if this is a page/sub-page
  $showSidebar = $isPageWithSubpagesOrASubPage;

  if ($showSidebar) :
?>
<div class="grid_3 push_9">
  <?php get_sidebar(); ?>
</div>
<?php endif; ?>

<div class="<?php echo $showSidebar ? 'grid_9 pull_3' : 'grid_12'; ?>">
  <div id="content">
    <!-- Content goes here -->
  </div>
</div>