Digital design and other shiny toys

Web dev karma

Posted on by Paul

The new Zaviour website uses WordPress, an excellent open-source Content Management System. It’s a complex system, but the fact that so many developers share their knowledge helps clueless newbies like me. To return the favour I’m sharing a small code block you may find useful:

Displaying WordPress sub-pages and the parent item using wp_list_pages() function

The Zaviour site is split into pages, with links to these displayed in the primary navigation block. These top-level pages define the main site sections. In the image below we’re in the Zaviour Services section, so that item is highlighted:

Zaviour website section menus

To give a section more than one item we add sub-pages. In the image above the Zaviour Services page has five sub-pages:

  • Introducing CloudQast
  • CloudQast: Features and benefits
  • CloudQast: What can it do for you?
  • CloudQast in action
  • Zaviour Films

So, when we’re in this section we need to show the sub-pages in the secondary navigation block on the left hand side of the page. The WordPress documentation contains examples of sub-page listing functions, but not quite what I needed. As well as displaying sub-pages I also needed to show the parent page, preferably using the wp_list_pages() function. After some head-scratching I came up with the following:

<?php
/*If the page is a child of another page.*/
if($post->post_parent) {
/*We create a page list containing just the parent page, saving it as $firstPage.*/
$firstPage = wp_list_pages("title_li=&include=".$post->post_parent."&echo=0");
/*We then create a page list containing all the child pages of the parent. This will include the current page.*/
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
}
/*Else, the page is not a child of another page.*/
else {
/*We create a page list containing just the current page, saving it as $firstPage.*/
$firstPage = wp_list_pages("title_li=&include=".$post->ID."&echo=0");
/*We then create a page list containing all the child pages of the current page.*/
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}
/*If we actually created a list of child pages.*/
if ($children) { ?>
<ul>
<?php
/*If $firstPage exists, show that single item list first. This adds the top level page to the navigation list.*/
if ($firstPage) {
echo $firstPage;
}
/*Now list the child pages.*/
echo $children; ?>
</ul>
<?php } ?>

The code first checks to see if the current page is a child of another page. If so, we create a page list containing just the parent page and save it as $firstPage. We then create a page list containing all the child pages and save this as $children.

However, if the page is not a child of another page we must be on the parent page in this section. Therefore, we can generate a page list containing just the current page and save it as $firstPage. We can then create a page list containing all the child pages of the current page and save it as $children.

The $firstPage and $children variables have been created with appropriate values, so we can now echo them on the page to display a section menu containing both the child pages and the parent item, in the correct order.

I’m not claiming this is the only way to display both sub-pages and the parent page, but it seems to do the trick. If you find it useful or can think of improvements add a comment.

Comments are closed.

Read the comments policy