Editing WordPress Templates Cookbook (section)

== Sub-navigation within pages ==

When landing on a content section page, load a sub-navigation menu dynamically using pages that have that top-level content section page as their parent.

Example: http://rsrt.dbarchowsky.com/about-rsrt/

* Create the top-level page (as a WordPress "page", not a WP "post"). The page can have any sort of content.
* Create 2nd-level pages and assign the top-level page as their parent.
* Create a template for the sub-navigation menu, i.e. `page-navmenu.php`.
* Include the page navigation menu inside the loop. 
<syntaxhighlight lang="php">
get_template_part('page-navmenu');
</syntaxhighlight>
* Inside the sub-navigation menu template:
:* Get the id of the parent page: 
<syntaxhighlight lang="php" highlight="4,8">
$top_parent_id = 0;
if ($post->ancestors) {
    //  Grab the ID of top-level page from the tree
    $top_parent_id = end($post->ancestors);
}

//get the top menu parent ID. If this is a top menu page, the page will not have a parent
$parent_id = (($top_parent_id>0)?($top_parent_id):($post->ID));
</syntaxhighlight>
:* Fetch and loop through results
<syntaxhighlight lang="php">
<?php
$pagemenu = new WP_Query("post_parent={$parent_id}&post_type='page'&orderby=menu_order&order=ASC&showposts=20");
if ($pagemenu->have_posts()) while($pagemenu->have_posts()): $pagemenu->the_post(); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</syntaxhighlight>
:* To test for the item representing the page that's currently loaded in the browser to treat its link differently:
<syntaxhighlight lang="php">
/* outside the loop get the current page id */
$currentPageID= ($post->post_parent==$top_parent_id)?($post->ID):($post->post_parent);

/* (start of the loop code would go here) */

	/* inside the loop, check the id of the menu item against the current page id */
	$currentMenuItemID = get_the_ID();
	if ($currentMenuItemID == $currentPageID) {
		/* treat the link to indicate that this is the current page */
	}
	else {
		/* all other links treated normally */
	}


</syntaxhighlight>