WordPress: Dynamic Sub-Page Navigation

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; ?>

See Also
black retractable pen on opened book beside red and white go get'em-printed coffee cup

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!

Picture of Nathan Rice

Nathan Rice

Nathan is a blogger and freelance web designer, specializing in WordPress theme development. He runs his own blog at NathanRice.net ranging in topics from web design, to WordPress tips, and is a contributer at Performancing, The Blog Herald, and WordPressThemes.com.

RECENT ARTICLES

TRENDING AROUND THE WEB

7 counterintuitive habits that can actually make you more successful, according to psychology

7 counterintuitive habits that can actually make you more successful, according to psychology

Global English Editing

If you recognize these 7 signs, you were raised by parents who lacked compassion for you

If you recognize these 7 signs, you were raised by parents who lacked compassion for you

Parent From Heart

8 things a man will do when he wants out of a relationship (but doesn’t have the courage to admit it)

8 things a man will do when he wants out of a relationship (but doesn’t have the courage to admit it)

Hack Spirit

4 Zodiac signs that find happiness in the simplest things, not in wealth

4 Zodiac signs that find happiness in the simplest things, not in wealth

Parent From Heart

7 subtle signs someone is wealthy but doesn’t feel the need to prove it

7 subtle signs someone is wealthy but doesn’t feel the need to prove it

Global English Editing

Men who become more stubborn and difficult as they get older usually display these 8 habits

Men who become more stubborn and difficult as they get older usually display these 8 habits

Hack Spirit