chris barr

With my recent site redesign, I also transitioned the backend to now use WordPress and so far it’s been pretty good to me. Although at first I really had to fight it to get the custom theme to do what I wanted, namely with the navigation. My goal seemed simple at first, but WordPress instead provided me with a challenge. I just wanted the following abilities:

• Have top level navigation items
• Only some of those pages would have sub-pages
• When viewing a page with sub-pages, the related top-level navigation item would remain highlighted
• The sub-pages would have an “All” page listed at the top – which would not be the same name as the actual page
• All of this should be easily modified using the WordPress Menus feature on the admin control panel.
• Have custom code output without using some of the predefined WordPress HTML output for menus

This took a lot of trial and error to behave the way I wanted, but in the end it worked.  I’m not saying this is the best way to achieve this, but it is a way to do it.  The code below is on Github, so please feel free to make any improvements where you see fit. I commented the code fairly well, so all my descriptions of what is going on will be in there.

So first off, here’s a screenshot of how my WordPress menus are set up in the admin control panel. Click to see it full-sized.

Next, the following code went in my header.php file to create the main navigation you see at the top of this page.

That would output the header navigation, like so:

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

Now, let’s move on to the sidebar.php file. This would generate the sidebar HTML you see on my photos page.

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

The sidebar code above generates HTML like this:

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

And finally, my index.php file contains this code which will determine if the sidebar should be shown or not.

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

If you’re curious about some of the grid_2 and container_12 CSS classes, those are from the 960 Grid Framework which this site uses.

And there you have it! That’s how I made my menu navigation.  Let me know in the comments here or on GitHub if you have any suggestions or improvements to add.