If you’ve been following the recent trends with premium WordPress themes, you’ve probably noticed that the two-tiered navigation menu has become extremely popular. An example of this is the popular Revolution WordPress themes. This style of menu can be used in a variety of ways, but the most common seems to be to display your children pages in a menu below your blog’s parent pages.

If you’ve wondered how to hack your existing WordPress theme to accomplish something along these lines, Darren Hoyt has taken the time to explain this in his post Creating Two-Tiered Conditional Navigation in WordPress. Here is the PHP you’ll need:

<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
<?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 id="subnav">
<?php echo $children; ?>
<?php } else { ?>
<?php } ?>

Once you’ve got the code in place, you’ll want to style it to look the way you want it to.

Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Follow Kyle on Twitter @KyleEslick!

  1. Fernando says:

    Nice hack, I’ll traslate the tip in my blog 😉

  2. jbj says:

    Thank you for the tip!
    If anyone is interested, I wrote a similar article for creating à dropdown menu for categories/sub-categories.
    The article is in French and can be read here.

  3. Patrick says:

    This works great for my site where I have a “services” parent page and a several child pages with detailed information on each service.

    I stripped out the “pages” element so it only displays the children as subnav li’s as my horiztonal header navigation has the pages links.

    however – how can I maintain an active menu state on the parent when viewing a child page as well as an active state on the child?

    this is my main nav in the header to acheive active links on the parent pages for each section:

    <li class=””>

  4. Sophie says:

    Thanks for this really usefull hack I will modify my template with this.

  5. Good stuff. I really like WP3, it’s so flexible.

Trackbacks/Pingbacks »

  1. Crear Menú de navegación de dos líneas |Ayuda Wordpress says:
  2. 100+ Killer Wordpress Resources | Steffan Antonas' Blog says:
  3. links for 2009-02-13 - Patrick :) says:
  4. 10 Extremely Useful WordPress Hacks And Tips | Tweeaks Design says:

Tweetbacks »