WordPress: Dynamic Sub-Page Navigation
by Nathan Rice
The more and more I study the WordPress architecture, the more and more convinced I become that WordPress is a great choice for use as a feature rich Content Management System (CMS). Basically, WordPress can be used, not only as a blog platform, but as software to manage the content of any website, with or without a blog. Because WP added the ability to use “Pages” to hold relatively static content, and because WP includes functions to call and display the content of those pages just about any way you can think of, all it takes is a good WordPress theme to get the job done.
But where WordPress lacks as a CMS is the ability to further exploit the sub-page system. Not so much in their use, but in their application to the actual website design.
However, this plugin did wonders for people looking to take advantage of the hierarchal structure of pages and sub-pages by allowing only the “parent” pages to be displayed on the homepage. And if a “parent” page has children, and that page’s link is clicked, then the child pages will “fold” down, displaying “deeper” options (much like the features of the more mainline CMS out there).
But There’s a Problem
I’m not here to just give props to a cool plugin. You see, I had a client who wanted the original “parent” list across the top of the page (just under the header image) and when one of the “parent” page links was clicked, he wanted the “sub-pages” to display as a list in the sidebar. As far as I could tell, there was no way to do that with the Fold Page List plugin. So, I went searching. I promise, if I could find the original website I got this from, I’d give a link. As it turns out, I can’t find it. Sorry 
First thing to do is just list your pages. Be sure to make it top-level only!
<?php wp_list_pages(‘title_li=&depth=1′); ?>
Then, I used the code I found (with a few modifications, I’m sure):
<?php
global $wp_query;
if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
} ?>
<?php if(wp_list_pages(“title_li=&child_of=$parent&echo=0″ )): ?>
<div id=”submenu”>
<ul>
<?php wp_list_pages(“title_li=&child_of=$parent” ); ?>
</ul>
</div>
<?php endif; ?>
Without getting too technical, I’ll explain roughly what all that means.
if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
}
This code checks to see if the current page (the active page) as a parent. If it does NOT have a parent … it assigns the current page ID as the “parent”. If it DOES have a parent, it assigns the parent ID as the “parent”. The reason this is necessary is for top-level parents. If we simply used the parent ID to assign the “parent”, then if a top-level parent was active, the “parent” variable would be empty and we wouldn’t get our sub-page list.
<?php if(wp_list_pages(“title_li=&child_of=$parent&echo=0″ )): ?>
<div id=”submenu”>
<ul>
<?php wp_list_pages(“title_li=&child_of=$parent” ); ?>
</ul>
</div>
<?php endif; ?>
This last part is pretty simple. All it checks for is IF there are any sub-pages (in a very rudimentary way). If it does have sub-pages, then it lists them (along with a title and some div wrappers for style).
One Limitation
I didn’t spend too much time doing research on this, but as far as I can tell, this only works 2 levels deep (top-level and 2nd level). If you have 3 levels of sub-pages, this won’t work (or at least won’t work like it’s supposed to). Sorry, but all I needed was 2 levels, so that’s all I developed it for
Download the Source
Click Here to download the source for this script
So, if you are looking for a quick and dirty way to use WordPress as a CMS, this little bit of code can go a long way. I’ve used it several times since the time I developed it, and I plan on using it many times in the future!
Next week, I’m writing a tutorial on how to do the same thing we did here, but with categories and sub-categories. Don’t miss it!
