Creating Two-Tiered Conditional Navigation in WordPress

Here is a common navigational scheme, with parent pages on top and child pages (if they exist) on bottom:

twotier

We’ll need code to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.

Here is the PHP:

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

<?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 && is_page()) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>

And here is the CSS:

* {
	margin:0;
	padding:0
	}

#nav {
	background:#577da2;
	border-bottom:1px solid #FFF;
	height:32px;
	}

#nav li {
	margin-right:25px;
	}

#nav li, #subnav li {
	float:left;
	list-style:none
	}

#nav a, #nav a:visited {
	color:#FFF;
	text-decoration:none;
	font-weight:bold
	}

#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
        {
	background:#295887
	}

#subnav {
	background:#e6eef7;
	border-top:2px solid #577da2;
	border-bottom:2px solid #cad8e6;
	height:28px;
	}

#subnav li {
	border-right:1px solid #295887;
	padding:0 7px;
	}

#subnav a, #subnav a:visited {
	color:#295887;
	text-decoration:none;
	font-weight:bold
	}

#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
	text-decoration:underline
	}

That’s it!

If you’re wondering why the CSS seems overly verbose, it’s to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.

  • http://3oneseven.com milo

    Cool, helps a lot, this is by far the best solution, just one q:
    does it work with category children as well?

    • http://www.oleksabublik.kiev.ua oleksabublik

      I was wondering about categories too. I’ve tried replacing posts with categories everywhere in the code but that did not work. Any ideas or solutions? Thanks.

      • Dan

        Yes, This is really nice.

        Especially it is completely php driven, and no javascript.

        But it would have been complete if it could do the same for WordPress categories as well..

        Anybody figured out how to do it?

  • Pingback: Weekly Links - February 16th | Vandelay Website Design

  • Pingback: moneyblog » Weekly Links - February 16th

  • http://hningslog.org Hning

    Should i use a javascript just like superfish in premium news theme? Or only the script aboves? Thanks before darren. Ops, when mimbro pro will be release? I’ve take a look several premium news theme, but i thought mimbo has a unique value, very very user friendly.

  • Pingback: Two Tier Dynamic Navigation For Wordpress

  • http://germworks.net/blog Jermayn Parker

    The one area I struggle with is the whole navigation for WordPress (as stated in my blog) and how it can be integrated as a CMS properly. So what do we do back-end for the two-tiered conditional navigation to work? Do we organise it by the page parent or page order?

    Thanks and sorry if this seems a little off topic or simple question

  • Darren

    So what do we do back-end for the two-tiered conditional navigation to work?

    Simply create pages (and subpages) and the nav code from the article will scale accordingly — that ease of use is what makes WP a great CMS for small and medium sized sites.

  • Pingback: WordPress Hack: Creating a Two-Tiered Navigation Menu

  • http://readywpthemes.com readywpthemes

    Great trick. Thank you…

  • Pingback: Wp Wordpress » Blog Archive » WordPress Hack: Creating a Two-Tiered Navigation Menu

  • Pingback: Links for 2008-03-12 [del.icio.us] : BiliÅŸim & Teknoloji Haberleri | BilisimTekno.NET

  • Said Salameh

    Hi Darryn

    Thanks for the code, great stuff.

    Just would like to know how to make the php code return a three tiered navigation.

    Once again, thks heaps for your tutorials

    Regards
    Said

  • Said Salameh

    Opps for the type on your Name

    Regards
    Said

  • Pingback: Mastering Your WordPress Theme Hacks and Techniques

  • Pingback: 精通Wordpress系列教程- 1: 精通Wordpress主题Hacks与技巧 | 帕兰映像

  • people

    Wow!! Amazing tip :)
    mmm… it’s possible the same thing with categories and subcategories?

  • Pingback: A Vertitable Tsunami of Goodness « Feet up, eyes closed, head back

  • http://www.moon-blogger.com Jacky

    Great tutorial,thanx

  • Pingback: paidnetpedia.com

  • Pingback: WordPress Hack: Creating a Two-Tiered Navigation Menu | [Blog Tutorials]

  • http://digital-musings.com Vikram

    Thanks Darren. This is a superb tip. I wanted to do the same for my categories list.

    Is there a way I can change the code to display categories instead of pages as mentioned in this post.

    Would really appreciate it if you could suggest something as I am not too good at php and cant really make out how to display categories instead of pages. Also, what corresponding changes would take place in the CSS code?

    Thank you!

    • http://www.landingnet.co.uk Matt Parkinson

      Was thrilled when this worked! Great Stuff!
      Sadly it turns out I also need this to apply to the Categories and Sub-Categories rather than Pages….grrr
      Did anyone find a solution I’ve been looking for ages now?
      Thanks

  • http://liamdempsey.com Liam Dempsey

    Hi Darren – Using your generously supplied code, I have a problem where the second level of navigation is displayed on the 404 and search results pages where there were no successful results for a search. Any ideas on why that might be happening? Any insight into how it might be remedied?

    • Scott

      Hi Liam, Your question is pretty old, but I’m wondering if you were able to solve the problem. I’m experiencing what I believe is the same thing. On a 404 page, the entire navigation (parents and children) are being jammed into the sub-navigation. Any help would be appreciated!
      Thanks

      • Binti

        Yeah, I’m having the same problem. If it’s a 404 or a search page with no result it breaks and lists all the pages.

      • http://www.icon22.com Jan Ligaard

        Did anyone figure this one out?

        • http://www.parkersweb.net Andrew Parker

          I know this is some time ago but thought I’d just share my answer to this.

          If you modify the line:

          if ($children) { ?>

          to be:

          if ($children && is_page()) { ?>

          it seems to work. Hope that helps.

  • Pingback: When To Use Magazine-Style Themes For Blogs? | How-To | Smashing Magazine

  • Pingback: Top 5 WordPress Navigation Menu Tutorials

  • Pingback: 5个Wordpress导航菜单教程 | 帕兰映像

  • Pingback: WP Limits » Blog Archive » 7 Links to Launch the Site

  • Pingback: When To Use Magazine-Style Themes For Blogs? | [w3b]ndesign

  • http://www.neowster.com Neowster

    Thanks for this great plugin. Facing the same problem as Liam Dempsey. Any idea how this can be solved? Additionally, possible to make the subpage appear on hover?

    Thanks

  • Aim

    Hi, i know this is going to sound stupid, but where in the template do i place the above php? Thanks for your help.

    • Mangew

      In the header.php I suppose

  • Pingback: WordPress Developer’s Toolbox | Developer's Toolbox | Smashing Magazine

  • Pingback: Crear menu de navegación de dos niveles para tus secciones « Xyberneticos

  • Pingback: links for 2008-09-17 | orioa

  • Pingback: WP开发者资源-2.3: WordPress分类和导航菜单 | 帕兰映像

  • Pingback: Modifichiamo il menu del nostro Wordpress con uno più web 2.0! - Geekissimo

  • Pingback: WordPress Developer’s Toolbox | rafdesign

  • http://www.zainals.com Moe

    Keep up the good work mate :)
    thanks .

  • http://www.designerportraits.com.au Nabil

    my blog theme has the header script looking like this

    <meta http-equiv=”Content-Type” content=”; charset=” />

    » Blog Archive

    <meta name=”generator” content=”WordPress ” />

    <link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
    <link rel=”alternate” type=”application/rss+xml” title=” RSS Feed” href=”" />
    <link rel=”pingback” href=”" />

    <body >

    <a href=”/”>

    <a href=”/”>Home

    not sure what to change.

  • http://www.designerportraits.com.au Nabil

    what do i change in the below code to get this to work.

    <meta http-equiv=”Content-Type” content=”; charset=” />

    » Blog Archive

    <meta name=”generator” content=”WordPress ” />

    <link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
    <link rel=”alternate” type=”application/rss+xml” title=” RSS Feed” href=”" />
    <link rel=”pingback” href=”" />

    <body >

    <a href=”/”>

  • Dan

    Hi, great tutorial –

    was just wondering how you managed to get it so that the dividing rule between links on your secondary navigation is omitted after the final link (in this case ‘Locations’)?

    Thanks!

  • Ben Armstrong

    Where do I put this code?

    Thanks,
    Ben

  • Pingback: AndySowards.com :: Web Development Nerdy Daily Links For 09/27/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • http://divers-watch.net simon

    Thanks for the php etc.. installed and worked first time…

    was wondering how to have a third tier???

  • http://wordpressmodder.org WordPress Modder

    Great sharing of code, thanks so much. I made one little addition because my pages were no longer showing in the correct order. I changed this code…

    …to this…

    Hope that helps others:)

    • http://www.cg-hq.com matthew moore

      i was wondering …is there a way to get your code to put image for the right end and left end and middle ? I could not figure out how to get it to look that way with images.. .or where to put that in the CSS.

      this is what i am trying to do ..thanks

      http://www.cg-hq.com/navbar.jpg

  • http://wordpressmodder.org WordPress Modder

    …uh, the code tags appear to not be working as expected….let’s try again…

    I changed this…

    (‘title_li=&depth=1′);

    to this…

    (‘sort_column=menu_order&title_li=&depth=1′);

  • Pingback: Top 5 WordPress Navigation Menu Tutorials | indirazzi.com

  • Pingback: Top 5 WordPress Navigation Menu Tutorials | How To WordPress

  • Pingback: Extend Wordpress, 5 tips and tricks - Part 1

  • http://wpforsale.com Scott Bernadot

    Great post, Darren! You just helped me out of a jam. Thank you!

  • Pingback: Wordpress Araçları - Ä°ngilizce | indirazzi.com BETA

  • Pingback: Crear menu de navegación de dos niveles at Blog Borchani Studios

  • Pingback: WordPress Developer’s Toolbox - 山歌好比春江水

  • Pingback: WordPress 开发者工具箱1 | Ruijin Ubuntu Blog 生活中的每一点点滴滴......

  • Pingback: WordPress 开发者工具箱

  • Pingback: 精通WordPress主题制作技巧

  • Pingback: 精通Wordpress系列教程- 1: 精通Wordpress主题Hacks与技巧 - pi4.cn 屁事网

  • Pingback: 精通WordPress主题制作技巧 - xun`s blog

  • Pingback: 逐浪·网络 » Blog Archive » WordPress 开发者工具箱

  • http://www.thailandrealestatemagazine.com/ John

    Can the same menu effect be achieved with categories, maybe using get_category_parents?

    What I would like to achieve is a menu style similar to the JoomlaPanel menu at http://joomlapanel.com/, but with categories rather than pages.

  • http://KenalaiArabia.com Azmanar

    I can’t seem to make it work. It doesnt become 2-tier but 1-tier where the subpage link appeared next to the parent page.

    I have this code in the header.php .

    <a href="" title="" id="home">Home

    Where do I modify to become the 2-tier code?

    Thanks for any help. Your response greatly appreciated.

  • http://KenalaiArabia.com Azmanar

    <a href="" title="" id="home">Home

  • http://KenalaiArabia.com Azmanar

    The code doesnt appear in my comment here: Try again.

    <a href=”" title=”" id=”home”>Home

  • Pingback: - WordPress 开发者工具箱(上)【联讯网】

  • Pingback: WordPress Developer’s Toolbox | Fusuy.com || Webmaster Accessary Platform

  • Pingback: cssframework » WordPress 开发者工具箱【完整版】

  • http://slimwebsite.cn qin

    great article, thx for your tips!

  • http://www.ringartdesign.com Leigh

    Hey -
    Loved this tutorial…and it works perfectly! However, when I tested it in different browsers (ie – Safari) the parent page didn’t stay highlighted. Any ideas?

    Thanks!

  • http://www.vigrxplus-reviewed.com/blog/ Mens health Blog

    Really nice tutorial to implement navigational menus just like a full blown CMS. If used correctly with proper CSS, no one find the site is based on wordpress. I was thinking about switching to joomla just for this type of navigation. But it is not a blog engine. So I hesitated. Today I found this post. I’m already started changing my blog navigation. I know it can be done, but going thru all wodepress codex and API will be highly time consuming for a seasonal developer like me.

  • tom

    how to keep from listing child pages of index page?

  • Pingback: 20 WordPress Tricks to Improve Your Blog

  • Ramses

    Nice code, thanks :)

    is there a way to center the text in the bar? have tryed different types of code in the css but no luck.

    Regards

  • http://www.puquestionpaper.com Harminder Singh

    thank u

  • Marc

    Hey Darren,

    Is it possible to create a two-tiered navigational menu in wordpress where the parent is a page and the children are specific categories?

    Thanks.

  • Pingback: 20 Trucchi Per Migliorare Wordpress

  • Pingback: Crear menu de navegación de dos niveles para tus secciones at Blog Borchani Studios

  • http://www.mikejohnsondesign.com Mike

    That was too easy. Thanks!!

  • Pingback: 101 Techniques for a Powerful CMS using WordPress | Noupe

  • Pingback: WordPress-CMS Hacks and Tricks | Why? Nowhy! DFdou's Blog

  • Pingback: Wordpress Blog Services - 101 Techniques for a Powerful CMS using WordPress

  • Pingback: 101 Techniques for a Powerful CMS using WordPress | DataViking

  • http://twitter.com/joconnell Joseph

    This worked very nicely for me – thanks for sharing!

  • Pingback: 101 Techniques for a Powerful CMS using WordPress

  • http://www.swiftsquad.com Jonah

    This is fantastic. Works awesome for what I was trying to emulate.

    Quick question. My “parent” links are in the header, while my “child” links are in the sidebar. Works fantastic. My one question was if there is a way to get the “parent” link also in the sidebar so that if they want to get back to the parent page they don’t have to click on the links in the header. Does that make sense?

    Here is the site I am working on.

    http://ccsf.calvaryprescott.com

    • Darren

      I’m releasing a project (“framework”, I guess) in the next couple weeks that includes nav code that also pulls the parent link with the rest of the sidenav. Stay tuned.

      • http://www.swiftsquad.com Jonah

        Darren,

        Did you release this project? Working on something that it is more crucial on, hoping that you posted it and I missed it. Thanks.

        Jonah

  • Shannon

    Let’s say I’m trying to make this work with Mimbo 3.0… what exactly should I NOT change to maintain the built-in dropdown menu?

  • Pingback: 20 WordPress Tricks to Improve Your Blog | brainstorming magazine | use the brain to get ideas

  • Pingback: 101 Techniques for a Powerful CMS using WordPress | Cosa Nuestra Tropical Lounge

  • Anthea

    Thanks so much for this, super simple to understand and a cinch to implement. I really appreciate it!

  • Pingback: 101 Techniques for a Powerful CMS using WordPress | Quest For News, A TUTORIAL Base

  • http://www.linkedin.com/in/hammansamuel Hamman Samuel

    Great post, thanks so much, just what I’ve been looking for

  • Pingback: 70 Very Useful Wordpress Hacks & Tricks » De Web Times - Sharing Useful Resources.

  • Pingback: 零食屋 » Blog Archive » 5个Wordpress导航菜单教程

  • Pingback: » 5个Wordpress导航菜单教程 | 零食屋

  • http://www.jamesallencorporateservices.com DoktorThomas

    D~
    Thanx for increasing my understanding of how to initiate navigation for child pages.
    I did not code character for character but used only those parts for the result I wanted.
    Your tut was very helpful.
    ~DT

  • http://www.davidsaundersdesign.com David

    It simply doesnt work for me. I have copied and pasted the code exactly and am getting duplication of the parent pages in both tiers of the navigation. Any Ideas?

  • http://www.samirkamble.com Samir

    Superb thinking of giving it a try soon. found it at the right time.

  • Pingback: 11 Trik WordPress Conditional Tags

  • Pingback: 5个Wordpress导航菜单教程 | 帕兰映像

  • blackjack

    Good!!! But for the categories ????
    We can to see the code for the categories,please
    Thank you

  • Phil

    hi

    great menu system — just one query — how do you CENTER the top and submenu items in the horizontal list rather than being left aligned?

    also – instead of a background colour used to highlight the selected parent link – -how do you use a colour for the link text instead which stays with that same colour even if a child link is selected?

    thanks

    phil

  • saisat

    Hi,

    Can you help me how the create the same menu for category & sub category……

    Regards,
    SaiSat

  • Pingback: Top 5 Tutoriais Menú de Navegación para WordPress | Ajuda Wordpress em Português

  • http://www.zoopmedia.com ZoopMedia

    Thanks for the tutorial. It seems like this type of navigation is becoming pretty common on various websites and blogs.

  • marty

    thx for this, but it seems like the subnav breaks for me. Cant see why :S

    What year was this tut posted?

  • http://www.allaboutindia.org/ all about india

    i am wondering if you have some tips for drop down thesis nav bar too? i am searching it from past few days ..dint find any single easy post

    • postrophe

      Hi,

      Currently there are ( “current background color” and “current parent background color” ) that works with Thesis 1.8 menu and WP-menu(3.x) for the top level Tabs, That’s all.

      For my test site (http://pierrecote.fondationcem.org/) I have achived that using the ” WordPress nav menu ” and 6 lines of CSS.

      First (1) level highlighting ( white ). Second (2) level highlighting ( yellow ). Third (3) level highlighting ( orange )

      1 – Highlighting the ( top categories Tabs ) while on a “single post” of my top categories.

      .current-post-ancestor a {background: #FFFFFF;border-bottom-color:#FFFFFF;}

      2a – Highlighting the ( subcategories ) while on a “single post” of my child/subcategories.

      .sub-menu .current-post-ancestor a {background:#F0EEC2;}

      2b – Highlighting the ( parents and child/subcategories ) while on a child/subcategories. ( need to define a category for the appropriate posts )

      .cat_galerie-2010 .current-menu-parent a {background:#F0EEC2;}
      .cat_galerie_2011 .current-menu-parent a {background:#F0EEC2;}

      3 – Highlighting the ( parents and child/subcategories ) while on a “single post” of my child/subcategories. ( need to define a “CSS Class” (post edit) for the appropriate posts ) – here I target a “CSS Class” and it’s appropriate menu-item created by WordPress )

      .postgalerie2010 .menu-item-776 a {background:#FFD596;}
      .postgalerie2011 .menu-item-785 a {background:#FFD596;}

      This does not play well with IE.

      Thesis generates ” cat-item-X “, “children”, “current-cat”, “current-cat-parent”, but I could not achived anything with those, and, anyway I wanted to organise my pages/categories my way.

      Pierre

  • http://hyper-metrix.com F1LT3R

    Nice, that’s the simplest way of doing it I have seen so far.

  • Chris F.

    Thank you thank you thank you! I was struggling for about an hour thinking about how to do this sub-navigation and your article was perfect. Thank you!

  • Pingback: WordPress Hack : Creating a Two-Tiered Navigation Menu

  • Pingback: WordPress Developer’s Toolbox | 9Tricks.Com - Tips - Tricks - Tutorials

  • http://www.cgwhat.com arnel

    Thanks This helped me

  • Pingback: The code to display categories Two-Tiered Conditional Navigation in Wordpress « Graphic Design Blog

  • http://www.icon22.com Jan Ligaard

    Just wondering if anyone ever found out how to resolve the issue with the menu being duplicated when you make a search for something that is not on the site. Any help would be appreciated.

    J

  • http://www.russelpea.com Stickers muraux

    Thanks for this tip. I’ll have to try this later

  • http://www.nrgdesign.net LeD

    This is great menu for a PHP, not a manually customized java. Thanks for the input.

  • Pingback: 101 Techniques for a Powerful CMS using WordPress « Temas e Dicas para Wordpress

  • http://www.charlottecoleman.co.uk Charlotte

    Ooh thanks for this post, the php has helped me no end!

  • Pingback:   WordPress Developer’s Toolbox  by Oshoamy

  • Pingback: Creating Two-Tiered Conditional Navigation in Wordpress

  • Pingback: (摘)精通Wordpress系列教程一 « 李小西的博客

  • James

    Maybe a solution to the problem that Liam Dempsey asked about.

    Change the code at line 8 from

    if ($children) { ?>

    to

    if ($children && !is_404()) { ?>

    Seems to work fine for me now.

    Cheers

    • Binti Brindamour

      Thanks, that works great for 404 pages. How do you do that for empty search results as well?

      • Matt

        Hi I’m having the same problem, Search pages are duplicating the menu items. Some help on this would be great…

        Thanks

      • Matt

        Just figured it out.

        replace the line with

        if ($children&is_search()&is_404()) { ?>

        Matt

  • Pingback: wordpress主题的制作和使用技巧 | 一起走过的日子

  • Pingback: geedebook » 11 Trik WordPress Conditional Tags

  • http://www.adrienbe.com Adrien

    Hi :)

    I’ve got a problem with this method :P

    If i write a news thread on my “test_a” category i doesn’t see the “test_a” category same with the thread on my “navi” i’ve got just the “home” option in category

    //

    i got 3 category to try :

    1.Home
    2.test_a with two sub category : test_a1 and test_a2 with a small text
    3.test_b with two sub category : test_b1 and test_b2 with a small text

    do u know this problem ? :)

  • http://www.lucamercury.com/ Alex Righetto

    thank you man! bright solution

  • http://www.201020k.com Casey E. Palmer

    Thanks for this – very helpful in making the site that much more refined :)

  • Pingback: 101 Techniques for a Powerful CMS using WordPress « WPhub.biz

  • Sophie

    Creating Two-Tiered Conditional Navigation in WordPress was a very helpful post. I’ m wondering if there is a way to do this with categories? I know how to get the top level parent categories the top row, but I’m unsure how I might have only child pages show in the second line – if there are child pages as you’ve done for pages here.

    • http://www.mindbloggy.com ravi

      Hi,

      @sophie i tried this code for “Categories” and it seems to work.

      <?php
      $current_category = single_cat_title("", false);
      $category_id = get_cat_ID($current_category);

      if(is_category($current_category))
      {$children = wp_list_categories("title_li=&child_of=".$category_id."&echo=0");}
      //else {$children = wp_list_categories("title_li=&child_of=".$category_id."&echo=0");}

      if ($children && !is_404()) {
      if($children!="No categories”){
      ?>

      Thanks for this wonderful post :)

      Ravi

      • Sean

        Has anyone found a working solution for this with categories rather than pages?

  • http://www.theodin.co.uk phil

    Very useful resource, thanks for sharing. Im trying to create a bespoke menu system on a wordpress platform, this will definatley set me on the right track, Thanks!

  • maltin

    Thanks for this little bit of golden code. I have it working almost perfectly… with one exception.
    I’m using along with the “a page of posts” template found here:

    http://codex.wordpress.org/Pages#A_Page_of_Posts

    This allowed me to filter out posts based on a “category” field that was assigned in the custom fields of the page. In short, I can assign posts to a specific category, and those post will only show up a pages that also have the same category assigned.

    All works well, until you click on a single post, then the navigation defaults back to home. It there anyway to have the nav stick to the categories that the post is assigned to?

    Thanks…

  • Pingback: Wordpress Kullanım ve geliştirme kaynakları | web tasarım ve magazin

  • Pingback: Wordpress Kullanım ve geliştirme kaynakları | SohbeTCix.NeT | Chat Sohbet Muhabbet Odaları

  • Pingback: Progress 09/06/2010 « Tara Jane Irvine

  • Pingback: 20 WordPress Tricks to Improve Your Blog « Penchenk First

  • Pingback: Content Experience Manager » Welcome

  • Pingback: 精通Wordpress系列教程- 1: 精通Wordpress主题Hacks与技巧 - 天津SEO

  • Pingback: The Comprehensive Guide for a Powerful CMS using WordPress – Part one: 101 Techniques for a Powerful CMS using WordPress | Web Site Designers

  • http://www.davidsaundersdesign.com David

    Great article Darren,

    Just wondering is there going to be any update on how to create a 3 tier dynamic navigation?

    Cheers,

  • Thorsten

    Thanks for the great work! Helped me alot to solve that problem quickly!

  • http://www.muschamp.ca/ Muskie

    A long time ago, say 2005 I integrated a WordPress blog into my existing hand coded site which had tabs along the top. At the time WordPress was 1.something and I created my own theme that left the static navigation at the top, there are only three sections with 3 to 5 subsections but there are lots of sub-pages after that. I created my blog at blog.muschamp.ca and have been updating it for five years now. I recently upgraded to WordPress 3.0.1 and then while looking around at tips and what not found your site. How much work do you think it would be to convert all my static site to be inside WordPress now that it is a more full featured CMS?

    Secondly how bad would the redirects be from blog.muschamp.ca/everything… to whatever the new URL would be, I guess I’d have to move my installation. It seems like too much work, but I’m glad you through this example up. I also have another subdomain or two further complicating my life.

    Cheers,

    PS Everything is easier starting fresh, my own site and theme give nothing but headaches… Currently BirdFeeder has busted my feeds again…

  • Pingback: 精通Wordpress主题Hacks与技巧

  • Ricky

    What a f**kin ledgend! This works like a charm!

  • Oliver

    Great tutorial and method!

    Any chance of telling us how to apply this to a vertical nav where subpages appear below each parent page – I have applied the above method but the subpages appear below the entire menu…. tried tinkering with php but with no luck

    Any help would be HUGELY appreciated….

  • http://morris-roots.com(clientsite) Gray

    Hi Darren,

    Brilliant tute. I’m wondering if theres an easier way to do the above, as I think i’m already using a script similar to the one above, but have added an exclude statement to not have certain pages in the dropdown.

    Without continually going into the code everytime a new page is created, is there a way that an unexperienced person can exclude pages?

    i’m soon to hand over the project on completion and want to know if the client can do this…

    I look forward to your response. Thanks!

  • Jan

    Super easy, thanks. I was trying to figure out how to do this with WP’s new menu…old school is sometimes better.

  • Mangew

    If I want the Homebutton to be a part of the menu as well, any ideas?

  • Pingback: WordPress Kullanım ve geliştirme kaynakları | web tasarım ve internet magazin

  • http://schecterhellraiserguitars.com Doug ‘the Hellraiser’ Jackson

    Beautiful, I’m totally new to this and it worked easily!

  • Phil

    hi Darren

    I was wondering how to point a TOP LEVEL nav item to a SUB MENU page? the two tier system is working great but I would like to have TOP level buttons which when clicked go to the 1st of the CHILD pages that are associatd with thta particular Top Button.

    So the Top Button has no active page of it’s own – it merely points to the first Child Page — how do I do that?

    thanks

    Phil

  • http://www.klmedien.de dozy

    Edited to get a thrid tier.

    post_parent;
    $parent = get_post($parent_id);

    if($post->post_parent){
    if($parent->post_parent){
    $child = wp_list_pages(“depth=1&title_li&child_of=”.$parent->post_parent.”&echo=0″);
    $child2 = wp_list_pages(“depth=1&title_li&child_of=”.$parent->ID.”&echo=0″);
    } else {
    $child = wp_list_pages(“depth=1&title_li&child_of=”.$parent_id.”&echo=0″);
    $child2 = wp_list_pages(“depth=1&title_li&child_of=”.$post->ID.”&echo=0″);
    }

    } else {
    $child = wp_list_pages(“depth=1&title_li&child_of=”.$post->ID.”&echo=0″);
    }

    if($child){
    echo “”.$child.”";
    }
    if($child2){
    echo “”.$child2.”";
    }
    ?>

    • http://www.klmedien.de dozy

      sorry bad copy&paste

      $parent_id = $post->post_parent;
      $parent = get_post($parent_id);

      if($post->post_parent){
      if($parent->post_parent){
      $child = wp_list_pages(“depth=1&title_li&child_of=”.$parent->post_parent.”&echo=0″);
      $child2 = wp_list_pages(“depth=1&title_li&child_of=”.$parent->ID.”&echo=0″);
      } else {
      $child = wp_list_pages(“depth=1&title_li&child_of=”.$parent_id.”&echo=0″);
      $child2 = wp_list_pages(“depth=1&title_li&child_of=”.$post->ID.”&echo=0″);
      }

      } else {
      $child = wp_list_pages(“depth=1&title_li&child_of=”.$post->ID.”&echo=0″);
      }

      if($child){
      echo “”.$child.”";
      }
      if($child2){
      echo “”.$child2.”";
      }

      • David

        Where does this code go into?

        I am new to wp and php (have sufficient html and css experience).

        does it replace the original two tier code, come after it or something in between?

        tried various variation..none worked. (the code was showing on the site and the menu was still working as 2 tier).

        regardless, thanks for both the original and the edited version.

  • http://www.papernapkindesign.com Eric Davis

    First off, I am loving this code! Works perfectly.

    I noticed in the other comments someone else mentioned this and I didn’t know if there was a workaround to showing the subnav when you hover over the main page link. Works for me right now but I have this strong, strong feeling the client will want it to display on hover.

    Thanks ahead of time for any help!

  • Pingback: 精通Wordpress教程: 精通Wordpress主题Hacks与技巧

  • Pingback: Creating Two-Tiered Conditional Navigation in Wordpress « KaixersofT { ScriptBlocK } Weblog

  • Pingback: WordPress: Tutorials and Resources for Designers and Developers | Freelance Website Designer / Coder

  • http://thongtinduhocmy.com du hoc my

    Dear,

    I followed exactly your code but I don’t know why I could not do it.

    Please kindly advise me.

    Regards

  • Alex

    Is there any way to make the parent page show up in the navbar only as link text, but without there being a link?

    ie, in your example, say if I wanted “about us” to show on the menu, but not be “clickable” as a link?

  • http://www.creativedefines.me Mark Skowron

    Thanks so much! I installed it and it worked like a charm. Great suggestion!

    • nn

      kk

  • http://jamesdaher.com JJ

    This is exactly what I would like to do. Forgive me, but where do I edit the php?
    Thanks,
    J

  • Christian

    WOW !!! After 5 hours of massive struggles this finally worked!! YAY!!! :D

  • Andy

    Hi. Which CSS command is that for defining the colour of the dropdown menu- mine also has a strange feather effect I’d like to get rid of, but if possible I don’t want to replace the whole Nav CSS with this one, because I’d have to go through it all recoding all the colour.

  • http://vonlind.com Chad Von Lind

    This rocked the perfect amount of rocking that I needed. Thanks.

  • Pingback: Show WordPress Child Pages Alongside Parent Page — Chad Von Lind

  • Pingback: The Comprehensive Guide for a Powerful CMS using WordPress – Part one: 101 Techniques for a Powerful CMS using WordPress | Wpfail.com

  • Kamran

    Good Morning All There

    Thanks very excellent work, but i have a problem for you genius guys and laddeis i am using custom menu on my WP site and this script is not working with custom menu i want the same result for my web site navigation menu please can you provide me the exact script to achive this.

    Thanks

  • Pingback: The Comprehensive Guide for a Powerful CMS using WordPress – Part one: 101 Techniques for a Powerful CMS using WordPress

  • Pingback: 20 WORDPRESS TRICKS TO IMPROVE YOUR BLOGMIg33 PC And Mobile Tools | MIg33 PC And Mobile Tools

  • Thomas

    Is it possible to show only “child level 2″?

    As it is now my “child level 3″ also shows and I don´t want it. How can I fix it?

    Thanks for a nice solution!
    Thomas

  • b

    Is it possible to position the sub nav “centered” underneath the top level / parent menu. I am looking at a main menu which has a left margin of around 300px, so I have room here to position the sub menu underneath each top level item. Thanks, great tut.

  • jjk

    Thanks for this! :) All the others used plugins/pointless amounts, this has worked perfectly!

  • wgoodman

    Is it possible to order the nag?

  • Paola

    Hello,

    Thanks for this! I was going mad trying to do a menu and I found this wonderful menu but I was wondering if there is any change to have it responsive?

  • Martin de Lao

    in fact, i am alex.

    I want to share this to add to the css code.
    Those changes make appear the straight line who separates subchilds (or subpages) correctly.

    Places | (border) from the second element of the list to the last one.
    fisrt-child function (the first element) has no | (border) because it is the first one.

    Works from one element to (n+1) elements.
    (that’s called mathematical induction -discrete maths)

    hope it helps.
    apologies my english, please.

    replace:
    #subnav li {
    border-right:1px solid #295887;
    padding:0 7px;
    }

    with this:
    #subnav li:first-child {
    /* border-left:1px solid #295887;*/
    padding:0 7px;
    }

    #subnav li:nth-child(n+2) {
    border-left:1px solid #295887;
    padding:0 7px;
    }

  • Bv

    Morning All,
    Hopefully this is still active – i could really use some help. I’m a noob at this – trying to get a two tier navigation as describe above but frankly can’t find where to even start manipulating.

    This tute doesn’t mention anywhere in particular to edit, so i’m not sure if i’m just slow and haven’t picked up on a default file or if it’s infact theme specific.

    I’m using the brunelleschi theme as a base and child theme to manipulate otherwise.

    Anything would be a huge help. Thanks guys/gals