horizontal parent navbar with vertical children in sidebar

Hi

I just thought I’d share this as it took me a couple of hours to work it out and I couldn’t find a post that directly addressed it.

So you are dealing with pages not posts and you want a horizontal navbar (eg subject 1, subject 2, subject 3) so that when you are in (eg) subject 1 all of its children are visible in the sidebar and subject one remains highlighted as does the relevant child.

In the header.php put the following code:

<ul id="">
<?php wp_list_pages('depth=1&title_li='); ?>

And style in your css for a horizontal nav bar.

This lists the top level pages.

For the side navbar you put

<?php
  if($post->post_parent)
  $children =
wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
  else
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  if ($children) { ?>

<ul>
  <?php echo $children; ?>
  </ul>
  <?php } ?>

into the relevant sidebar.php

This lists the children of the top level page, even if you are in the
children.

Then the css styles into your css file (the classes are automatically generated by WP.
I’ve coloured orange for visibility!):

li.current_page_item {background-color: #F4610F; color: white;}
/*styles the children*/
	li.current_page_parent {background-color: #F4610F; color: white;}
/*styles the parents*/

It’s all pretty much covered here

Hope this saves someone some time…