GuitarAngel.net

When it comes to subnavigation, Wordpress can get sort of quirky. Subnavigation contains links to the child pages of a top level page.

For example, on my website the five top level pages are those linked in the header above this post. Each section's subnavigation (if it exists) is displayed in the sidebar whenever you browse there and those links will stay there as long as you are in that specific section.

By default, if you use the regular wp_list_pages template tag, it will print out ALL page links in a little hierarchy, as you may have noticed. But with a little tweaking to the function, you can achieve the same effect as shown on my site.

The Code Snippet

Using a little trick I found on the WP Codex, I was able to list only the child pages within a certain section and make them stay static:

Note: This will only work with Wordpress 2.5!

<?php if($post->post_parent)
$children = wp_list_pages(array(
    'depth' => 1, 
    'show_date' => '',
    'date_format' => '',
    'child_of' => $post->post_parent, 
    'exclude' => '',
    'title_li' => '', 
    'echo' => 0,
    'authors' => '',
    'sort_column' => 'menu_order, post_title'));
else $children = wp_list_pages(array(
    'depth' => 1, 
    'show_date' => '',
    'date_format' => '',
    'child_of' => $post->ID, 
    'exclude' => '',
    'title_li' => '',
    'echo' => 0,
    'authors' => '',
    'sort_column' => 'menu_order, post_title'));
if ($children) { ?>
<ul><?php echo $children; ?></ul><?php } ?>

You can just drop this snippet right into your sidebar without having to edit it at all. I must note that you can NOT use this code in a sidebar widget, it must be added directly into your sidebar.php code.

As you can see, it uses the built in "wp_list_pages" function with a little twist. In layman's terms, it is telling Wordpress to list the children of the current page's parent (child_of=$post->post_parent) or if that doesn't apply (else statement) then list the current page's children (child_of=$post->ID).

Subpages of Subpages

One thing to note is the depth parameter value. Right now it is set to 1, which means it will show only top level pages as opposed to all of the subpages in the list (which is a paremeter of 0). This also means that if you have a subpage within a subpage then the subpage's subpage will not display unless on the first subpage. Whoa...

For example, let's say in my "About" section I have a subpage named "Interests". Under this "Interests" subpage I have another subpage named "Movies". I only want the link to "Interests" to display when anyone is on the "About" page and NOT "Movies" unless the visitor is actually on the "Interests" page itself. That is what a depth parameter of 1 can allow.

See more explanations of other parameters on the WP Codex.

Conditional Links

The only bits I added to that code for my own site were extra links to pages outside of my Wordpress blog. For example, I wanted to link my Trading Post in my "About" section's subnavigation. Since the above code will only print out Wordpress pages, I used some additional Conditional Tags to modify it:

<?php if($post->post_parent)
$children = wp_list_pages(array(
    'depth' => 1, 
    'show_date' => '',
    'date_format' => '',
    'child_of' => $post->post_parent, 
    'exclude' => '',
    'title_li' => '', 
    'echo' => 0,
    'authors' => '',
    'sort_column' => 'menu_order, post_title'));
else $children = wp_list_pages(array(
    'depth' => 1, 
    'show_date' => '',
    'date_format' => '',
    'child_of' => $post->ID, 
    'exclude' => '',
    'title_li' => '',
    'echo' => 0,
    'authors' => '',
    'sort_column' => 'menu_order, post_title'));
if ($children) { ?>
<ul><?php echo $children; ?>
<?php if (is_page('about') || $post->post_parent==274) { ?>
<li><a href="http://www.guitarangel.net/tcgs/" title="My TCG trading post!">Trading Post</a></li><?php } ?></ul><?php } ?>

With those extra few lines, I am telling Wordpress to show the link to my trading post only if the page is "About" or a child page of "About". The number 274 is the ID number of my "About" page and is required for WP to print it out on the correct subpages.

You can also duplicate the bold text above as many times as you like (within the UL tags) to add more links to additional pages. Just change the page slugs and ID numbers to reflect which parent page you want the link to show up on.

Please remember to keep <?php ?> wrapped around the opening and closing of each function.

Final Notes

I hope this helps anyone who wants to add a bit more usability to their WP blog! If you have trouble, please feel free to post your code in a comment and I will try to help you!

This article is part of my Dynamic Walkthroughs series for tweaking Wordpress.