Grow your CSS skills. Land your dream job.

WP Navigation with Child Pages

  • # March 3, 2010 at 10:04 pm

    I have run into a wall…

    I am trying to create navigation that goes three layers deep (figured that a diagram would be easier to understand):

    [Parent A] [Parent B] [Parent C]

    [Child Page A-1] [Child Page A-2] [Child Page A-3]

    [Grandchild Page A-1-1] [Grandchild Page A-1-2] [Grandchild Page A-1-3]

    The first row has link to the parent pages. When you are on one of these pages the sub page link are not displayed. When you click or hover over [Parent A] I would like links to its children to be displayed. If you then click on the link to the child page its children will be displayed ([Grandchild Page A-1-1]).

    Using the following code I have the first two steps down but I cannot seem to figure out how to get the third level to display.

    Code:
      < ?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) { ?>

    < ?php }; ?>

    Any suggestions would be greatly appreciated!

    # March 6, 2010 at 11:58 am

    Does anyone know if it is possible to list grandchild pages in a separate ul element?

    <ul>Top Level Pages</ul>

    <ul>Child Pages</ul>

    <ul>Grandchild Pages (should the grandchild’s parent be selected)</ul>

    # March 8, 2010 at 2:25 am

    Found a temporary work around but is is not very elegant. If I come up with a better solution I will post it here.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".