Multiple page menus in WordPress using parent pages

Last updated on November 28, 2011. Tags: navigation menu, WordPress page list

In my previous post, I discussed how to have two or more static pages' navigation menus in your WordPress theme by having several page lists (wp_list_pages()) and using the include argument to indicate which page link goes to which navigation menu. This method, however, would require the webmaster to know how to tweak WordPress. Another disadvantage is that if you tweak your theme every now and then, there is a greater chance that you ruin it in some way (of course, this is the least concern if there is no need to add new static pages that often).

Supposed you are developing a WordPress-powered website with several static pages' navigation menu for a client who knows how to blog but is not familiar with customizing WordPress. You would want him/her to be able to select which page goes to which navigation menu without the need to tweak the theme, or perhaps you know how to customize WordPress themes but does not want to bother tweaking it whenever you add or remove a new page.

You can create multiple page menu without tweaking the theme frequently (after you implemented the tweaking discussed in this tutorial, at least) by using the parent-child relationship that you can setup among the pages.

Creating the "container" pages

The first thing that we need to do is to create the "container" pages. Think of how many navigation menus you want in your website and that's the number of container pages that you should create, one container page per menu. These pages will not be used in anyway except to control which page goes to which menu. You can give these pages titles based on the location of the corresponding menu e.g., /top-navigation/, /sidebar-top/ and /sidebar-bottom/, or based on the type of page that will go in each menu e.g., /info/, /products/ and /services/.

Publish these pages and record their post IDs somewhere (notepad, sheet of paper, up to you). For example, the post IDs of /top-navigation/, /sidebar-top/ and /sidebar-bottom/ pages are 1, 4 and 9 respectively. We will use these post IDs in the succeeding parts of this article.

Creating the navigation menus

Next, we create the navigation menus by placing three copies of the following WordPress code:

<?php wp_list_pages(); ?>

... in two or more different locations in your theme. You can treat an existing page menu as if it is one of the newly created menu and modify it as will be discussed in the next paragraph. For example, one in the horizontal navigation on top and two on the sidebar: /top-navigation/, /sidebar-top/ and /sidebar-bottom/ as already stated in the previous part. This tutorial assumes that you know how to customize navigation menus using CSS so we will no longer cover the format of your menus.

Then, modify the PHP code of your page navigation as follows:

<?php wp_list_pages('child_of=1&sort_column=menu_order&title_li'); ?>  <!-- menu top-navigation -->

<?php wp_list_pages('child_of=4&sort_column=menu_order&title_li'); ?>  <!-- first menu in sidebar -->

<?php wp_list_pages('child_of=9&sort_column=menu_order&title_li'); ?>  <!-- second menu in sidebar -->

Notice how we used the post IDs 1, 4 and 9 in the code above? We assign the container pages; one for each navigation menu. The child_of argument forces the wp_list_pages to list only the navigation links of the child pages of the page indicated by the post ID. For example, child_of=4 will list only the child pages of /sidebar-top/.

Testing the navigation menus

To test if our navigation menu works, create a few dummy pages and assign them as child pages to the container pages. For example, you want the pages "About", "FAQS" and "Contact Us" to appear in the horizontal navigation on top, then assign it as child pages under /top-navigation/. If you did everything in the two earlier parts of this post as discussed, then these pages should appear in the horizontal navigation and will have URL as something like www.domain.com/top-navigation/about/.

My recommendation is to have at least two dummy pages per menu. You can then decide later if you want to delete these dummy pages or convert them into actual pages.

Hide the container pages

The URL www.domain.com/top-navigation/about/ would arise the curiosity of some visitors as to what lies in the "folder" www.domain.com/top-navigation/ and try to visit it by simply removing the last part of the URL. This practice known as URL backtracking.

Note that the URLs shown in this tutorial assumed that you are using the custom permalink structure /%postname%/. If you are using the WordPress default URL setting wherein the URLs end with a post ID, then backtracking should not be your problem.

While visitors cannot find anything valuable by visiting the container pages, it is a good idea to prevent them entirely from visiting these pages. To disable access to container pages, insert the following code in the header.php of your theme somewhere between the <head> and </head> tags.

<?php if ( is_page(1) || is_page(3) || is_page(9)) { ?>
<meta name="robots" content="noindex"/>
<meta http-equiv="refresh" content="0;url=http://www.domain.com/" />
<?php } ?>

The code above will prevent search engines from indexing the container pages. It also automatically redirects the visitors to the home page when they try to access a container page.

However, depending on the speed of the visitor's computer and internet connection, the container pages might be visible for a few seconds before the effect of redirect kicks-in when a visitor tries to access it. While we cannot prevent this, we can make the container pages less prominent and less obvious.

To make the container pages less prominent, edit the container pages one by one. On each container page, ensure that the content area is blank, and the allowed comments and trackbacks are unchecked. Then, replace the page title, for example "top-navigation" with a period (.), ellipsis (…) or non-breaking space ( ) but do not replace the permalink slug. Using dot or ellipsis will replace the title of the page, both on top of the content area and in the browser's top bar, with the said characters, while using non-breaking space will make the title blank.

Conclusion and Delimitations

After configuring this, you or your client's designated webmaster can now assign which pages appear to a particular navigation menu by simply assigning pages as child pages to the container page that corresponds to that menu.

This technique has some limitations. First, it can help only control which pages go to which among the preset navigation menu. It does not allow users to create new navigation menu without tweaking the WordPress theme. Second, there is no way (at least, none that I know of) of removing the slug of the container pages in the URL of the child pages while maintaining the desired arrangement of pages among several navigation menus.

This tweak was tested on WordPress 2.8.5 and 2.9.1. It is likely to work in closely similar versions but you might want to try it regardless of the WordPress version you are using.

Posted by Greten on May 22, 2010 under WordPress

Share and Enjoy:

Post Comments

Comment Rules and Reminders

The links to the commentator's e-mail do not have nofollow tag. However, I will be very strict in approving comments.
When you comment, please say something that indicates that you indeed read my post. If your comment is a general statement that can fit to any blog post about any topic, it will be regarded as spam.
What you write in the name field may include keywords to your website provided that (1) it's only up to four words long and (2) at least one of these four words is your first name or nickname. I rather reply to Bob or to Joe Smith than to Online Marketing Tips.
Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.
Fields marked with asterisks (*) are required. Your email will never be displayed in public.