MDBitz Development Resources

Until the release of WordPress 3.0 due out later in the year, creating a sub navigation is still a somewhat obscure and tricky task. To hopefully shed some light on how to create a Sub Navigation for your own needs I am going to walk-through how you can output a pages child or sub pages. In simple terms how to display a second level navigation in your sidebar.

How to get Sub Pages

In WordPress the easiest way to get the a page’s child pages is to use the get_pages function. This function allows you to specify that you want the children of a page by using the child_of and parent parameters. When called this function returns an array that you can utilize to iterate over and output the child pages.

$child_pages = get_pages('child_of='. $post->ID; . '&parent=' . $post->ID;);

The $post variable is used in WordPress templates to denote the current post or page. We utilize the ID property to specify we want returned all pages that are children of the current page.

How to output the pages in a list

To output a list of the sub pages we can iterate over the children and output the page titles and links in a list by using the get_page_link function and the ID and post_title properties of the returned Page object.

echo '<ul class="subNav">';
    foreach( $child_pages as $c_page ) {
    echo '<li><a href="' . get_page_link($c_page->ID) . '">' . $c_page->post_title . '</a></li>';
}
echo '</ul>';

The full example

Using the above code we will be executing the code on all website pages including posts and categories. To limit the execution to only pages we can utilize the is_page function. As we want to display the secondary navigation when we are on the parent page or child page we will need to check the current page to determine if we are on a root page or child page by using the post_parent property. Using this we can determine if we need to get the children of the current page or the children of the page’s parent. Doing so allows us to consistently output a Sub Page Navigation as can be seen here.

if( is_page() ) {
    $the_ID = $post->ID;
    $i_page = $post;
    if( $post->post_parent ) {
       $the_ID = $post->post_parent;
       $i_page = get_page($the_ID);
    }
 
    $child_pages = get_pages('child_of='. $the_ID . '&parent=' . $the_ID);
 
    if( count($child_pages) > 0 ) {
        echo '<li class="widget"><h2><a href="' . get_page_link($the_ID) . '">' . $i_page->post_title . '</a></h2><ul>';
        foreach( $child_pages as $c_page ) {
            echo '<li><a href="' . get_page_link($c_page->ID) . '">' . $c_page->post_title . '</a></li>';
        }
        echo '</ul></li>';
    }
}

WordPress has many nice built in features and helper functions for us to use in our websites. Some of the basic conditional functions like is_page, is_single, and is_home are perhaps the most versatile and useful to developers and site owners. These functions simply return true or false for if you are on a page, post, or the home page respectively. However they allow you to easily define custom sidebars and content blocks depending on where the user is on your site.

A basic example would be that you have decided that on your home page you would like to display a random post to the user. However when the user is looking at a post you want to display a post in the same category of the post being viewed. To accomplish this you can utilize the conditional tags is_single, and is_home. The logic shown below simply tests if the current page being displayed is the home page if so it outputs a random post, otherwise if it is a single page (post) it outputs a post from the same category of the current post being viewed.

<?php
// check if on home page
if (is_home()) {
    $rand_posts = get_posts('numberposts=1&orderby=rand');
     foreach( $rand_posts as $rpost ) :
?>
 
        <div>
            <h3 ><a href="<?php echo get_permalink( $rpost->ID ); ?>" target="_self"><?php echo get_title($rpost->ID); ?></a></h3>
            <div><?php echo get_post_meta($rpost->ID, 'teaser', true); ?></a></div>
            <a href="<?php echo get_permalink( $rpost->ID ); ?>" target="_self">Learn More Now &raquo;</a> 
	</div>
 
<?php	
    endforeach;
// test for single post
} else if (is_single()) {
 
     // get post categories
    $categories = get_the_category();
    $cats = array();
    foreach( $categories as $category ) {
             $cats[] = $category->cat_ID
    }
 
     $rand_posts = get_posts(array( 'numberposts' => 1, 'orderby' => 'rand', 'category__in' => $cats, 'exclude' => $post->ID) );
     foreach( $rand_posts as $rpost ) :
 
 
?>
 
        <div>
            <h3 ><a href="<?php echo get_permalink( $rpost->ID ); ?>" target="_self"><?php echo get_title($rpost->ID); ?></a></h3>
            <div><?php echo get_post_meta($rpost->ID, 'teaser', true); ?></a></div>
            <a href="<?php echo get_permalink( $rpost->ID ); ?>" target="_self">Learn More Now &raquo;</a> 
	</div>
 
<?php	
    endforeach;
} 
?>

This is one example of how you can utilize these tags. You could use them to determine if ads should be shown or which ones, changing layouts, or any number of ways.

Resources

• WordPress Codex: Conditional Tags