The following are a few simple tips for customizing Wordpress and working with parent pages, including a custom navigation based on which page you’re on, and adding a link to the parent page to make a sort of “breadcrumb” in your heading.

Breadcrumb headings

This is something I needed for a recent project. I wanted to show, in the page heading, the parent page and the current page. It was for ecommerce purposes, to show the department along with the product name like this:

On the “Towels” department page: Bathware » Towels

On the product page: Towels » New England Terry-cloth

This would show a link to the previous page and just the title for the page title, all within the <h1> page heading. I wrapped the title with a span for CSS styling.

<?php global $wp_query; // breadcrumb
    if( empty($wp_query->post->post_parent) ) {
        the_title();
    } else {
        // pages with a parent
        $parent = $wp_query->post->post_parent;
        $parent_title = $wpdb->get_var("SELECT post_title FROM $wpdb->posts WHERE ID = $parent");
            echo '<a href="/?p=' . $parent . '" title="Back to ' . $parent_title . '">' . $parent_title . '</a>';
            echo ' » <span>';
            the_title();
            echo '</span>';
    }
?>

Explanation of the code

The first “if” is what happens when the parent page field in the database is “empty”, meaning the page has no parent. In this case we just use the_title() as usual. The “else” says, “if this page has a parent, echo (or print) something else,” so here is where it gets a little more involved.

The first echo is setting up the link with /?p= as the base page link and $parent in there as the ID# of the parent page for the url. Then $parent_title gives us the name of the page in the link’s title attribute and as the name of the link.

Why not an actual breadcrumb?

There is a plugin out there to do a full breadcrumb, but this particular design is a very clean, simple one and I felt a breadcrumb link apart from the heading would clutter things too much. At the same time, I wanted it to be easy for someone to find the department page if they happened to land on a product page from somewhere else. I didn’t want anyone to have to go looking for a breadcrumb, search or other navigation.

This worked out best, having just the parent link right there with the page title. If someone wanted to go up another level in the site they could then go over to the main menu quite easily.

Conditional navigation based on the parent page

Next, we set up a menu to only appear on a page if we’re on its parent page. So, using the example above, the links to Towels and New England Terry-cloth would only appear when we’re on the Bathware page.

This is a sample of a menu I did a couple of years ago.

In the image above, the submenu in blue only appears when the visitor is on its parent page, Books. Here’s a sample of the code I used to do this:

<ul id="nav">
     <?php wp_list_pages('depth=1&title_li='); ?>
</ul>
<?php if(wp_list_pages("child_of=$post->ID&echo=0")) { ?>
     <ul id="nav-sub">
        <?php wp_list_pages("title_li=&child_of=$post->ID&sort_column=menu_order");?>
     </ul>
<?php } ?>

Explanation of the code

The first string of code is the main navigation, the top-level parent pages. The next part says essentially this: “If this page has children, show the child pages in a list here.” This sub-nav could be anywhere on the page, completely independent of the main navigation, including the sidebar or footer.

This works differently than specifying depth=2 on the wp_list_pages() function. You could use CSS to make the sub-nav appear on hover, but in this instance the sub-nav is static and simply doesn’t appear except when needed.