Often times while developing your WordPress website or blog you may encounter a situation where you want to display a submenu containing a multi-level hierarchical structure of child pages based on the current parent page. In order to display the hierarchical relationship properly style wise you will need to code a cascading tiered UL layout using CSS to represent the separation of depth. In this tutorial we will teach you how to display and style a WordPress parent specific hierarchical child page (subpage) menu system using PHP and CSS.

Step 1: Create the WordPress Parent Specific Hierarchical Child Page (Subpage) Menu

In the first step of this tutorial we will need to create the WordPress parent specific child page (subpage) menu and set up the proper hierarchy depth necessary. Add the code below wherever you intend to display your subpage menu, such as in the sidebar.

PHP

<nav class=”subpage-menu”>
  <ul>
    <?php
      $submenu = wp_list_pages("title_li=&include=".$post->post_parent."&echo=0&depth=3");
      $submenu .= wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0&depth=3");
      echo $submenu;
    ?>
  </ul>
</nav>

Items to Note:

• The $submenu is being built with the parent page displayed as well as all the child pages.
• You can adjust the depth of the hierarchy by editing the number 3; keep in mind that for purposes of this tutorial we are styling the depth in the next steps according to a depth level of 3.
• After adding this code to your WordPress site you should be able to view the non-styled UL list.

Step 2: Initial Styling of the WordPress Subpage Menu using CSS

In the next step of this tutorial we will begin to style the initial top level depth of the WordPress subpage menu.

CSS

.subpage-menu{ width: 100%; float: left; }
.subpage-menu ul{ width: 100%; float: left; padding: 0; margin: 0; list-style: none; }
.subpage-menu ul li{ width: 100%; float: left; padding: 0; margin: 0; }
.subpage-menu ul li a{ display: block; font-size: 18px; text-decoration: none; padding: 10px 20px; }
.subpage-menu ul li a:hover{ text-decoration: underline; }

Items to Note:

• The CSS styling provided is only meant to be used as a base; you may need to modify and adapt this to fit your needs.
• The main styling is centered around the A tag; you can adjust the font size as well as the padding and/or add your own CSS selectors.
• You will not see any separation of the hierarchy depths until the next 2 steps.

Step 3: Depth Level 2 Styling of the WordPress Subpage Menu using CSS

In the next step of this tutorial we will begin to style the WordPress subpage menu’s hierarchy depth level 2.

CSS

.subpage-menu ul ul li a{ font-size: 15px; padding: 10px 20px 10px 40px; }

Items to Note:

• Feel free to adjust the font size as well as the padding and/or add your own CSS selectors.
• You will now start to see the separation of the hierarchy depths.

Step 4: Depth Level 3 Styling of the WordPress Subpage Menu using CSS

In the final step of this tutorial we will style the WordPress subpage menu’s hierarchy depth level 3.

CSS

.subpage-menu ul ul ul li a{ font-size: 13px; padding: 10px 20px 10px 60px; }

Items to Note:

• Feel free to adjust the font size as well as the padding and/or add your own CSS selectors.
• You will now see the separation for all of the hierarchy depths.

Full Code

PHP

<nav class=”subpage-menu”>
  <ul>
    <?php
      $submenu = wp_list_pages("title_li=&include=".$post->post_parent."&echo=0&depth=3");
      $submenu .= wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0&depth=3");
      echo $submenu;
    ?>
  </ul>
</nav>

CSS

.subpage-menu{ width: 100%; float: left; }
.subpage-menu ul{ width: 100%; float: left; padding: 0; margin: 0; list-style: none; }
.subpage-menu ul li{ width: 100%; float: left; padding: 0; margin: 0; }
.subpage-menu ul li a{ display: block; font-size: 18px; text-decoration: none; padding: 10px 20px; }
.subpage-menu ul li a:hover{ text-decoration: underline; }
.subpage-menu ul ul li a{ font-size: 15px; padding: 10px 20px 10px 40px; }
.subpage-menu ul ul ul li a{ font-size: 13px; padding: 10px 20px 10px 60px; }

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.