Subscribe!
RSS
  • Moshu
  • Prairie
  • WordPress
  • The combined blog: about WordPress, the Canadian Prairies and myself
    The Journey to full time blogging


Creating a two level menu with Pages – part 1

Since the Pages were introduced to WordPress more and more themes are using this feature to create top horizontal menus to display several links to Pages like About us, Contact, Archives, Downloads etc. This blog is also using it. Look up :)

This is relatively easy, you just need to insert the wp_list_pages template tag in the header and style it accordingly. Using the depth parameter (set to =1) the children Pages will be excluded from showing up there.

The complication starts when you also would like to have children Pages of the Main Pages – and you would like to display them in the sidebar in such a way that clicking on parent Page ABC would have displayed only its children, while when clicking on Page XYZ – only its sub-Pages would be displayed in the sidebar.

Here is a relatively simple way to do it:

Download the FoldPage plugin from Webspace Works.
Unzip, upload, activate it in the usual way, as you do with any other plugin.

Let’s say in the header.php of your theme there is the code for displaying the Pages:

<?php wp_list_pages('depth=1&sort_column=menu_order&title_li='); ?>

replace it with the plugin’s tag

<?php wswwpx_fold_page_list ('depth=1&sort_column=menu_order&title_li='); ?>

With this code we display only main Parent level Pages (depth=1), their order will be defined by the numbers you type in your admin panel into the Page order field, and there will be no “Pages” title for the list. Of course, you will have to do some CSS magic to display the list horizontally ; e.g. you could add to the stylesheet for this div’s list – display: inline;

Next, we go to our sidebar.php and will insert the code to display the children Pages (or sub_Pages) of the respective parent Pages. Since I am not a coder I have searched the WordPress Forums, which is a golden mine for all kind of clever code snippets posted by PHP gurus and came up with the following working code:

<?php
  $thispage = $wp_query->post;
if($thispage->post_parent!=0)
{
wswwpx_fold_page_list("title_li=&child_of=".$thispage->post_parent);
}
else
{
wswwpx_fold_page_list("title_li=&child_of=".$thispage->ID);
}
?>

This will display the children Pages when on the parent, and will also show the “sibling” sub-Pages while browsing on any of them.
We have covered the basics in this part, next we will take care of the CSS for the two lists: I want the top menu to stay highlighted when on a Page and even when we navigate to the sub-Pages. We may also add some separate highlighting for the children Pages.

To see it in action, here is a Demo blog: the About Page has two children.

Go to Part 2 of this article.


31 Responses

  • Happ268 ·

    This was a very good article! Thank you.

  • Frances ·

    Excellent article. Very helpful. Many thanks

  • Lew ·

    Awesome article! It was extremely helpful and I appreciate the time you put into it. Very helpful.

  • Steenone ·

    Thank you for the great article…answered some recent questions for me!

  • Mark ·

    A really interesting article…Thanks

  • vicky ·

    Hi, is it any possible to show only siblings when browsing on a subpage and show the same siblings when you navigate in one of them

  • vicky ·

    I’m talking for second level navigation

  • Susan ·

    Hi, I was just wondering if you had the chance to post part 2 of this tutorial? :-)

  • Moshu ·

    Hi Susan, thank you for asking :)
    Actually, what I planned for part 2 was more the styling part, how to display the list(s) horizontally and, eventually, highlighting the page/Page you are on.

    It’s just that lately too much is going on in the real life.

  • Bob Wylie ·

    Hi

    Just found your article. Great so far.

    I am trying to do a similar thing, check out my dev blog at http://www.go-integrate.co.uk

    I have sub pages for Fixtures / Results (only so far – dev blog), and that then brings up the sub-pages in the right sidebar, however, it also shows the parent pages too. How can I show only child pages?

  • Moshu ·

    The method described above should display ONLY the subPages of each Page you are on.
    (To be honest I never checked whether the plugin works with WP 2.5.1 or not)

  • Bob Wylie ·

    Moshu

    I found the problem, it was to do with the &amp notation,

    wswwpx_fold_page_list(“title_li=&child_of=”.$thispage->post_parent);
    }
    else
    {
    wswwpx_fold_page_list(“title_li=&child_of=”.$thispage->ID);

    and it worked

  • bw ·

    Since this plugin requires modifying the templates anyway, you could also just use this in the side bar:

    < ?php post_parent)
    $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
    $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
    if ($children) { ?>

  • PH ·

    Hey great article, many thanks !
    I would like to know if it is possible to achieve the same goal with categories (associated with the plugin “FoldCategories”) ?

  • Moshu ·

    I don’t know, PH.
    Never tried it with the FoldCategories plugin… but it should work on the same principle.

    Maybe I should check it and write another post about it. Thanks for the idea!

  • Baudry ·

    Hello,

    I have a suggestion for dummies like me, I think for person who understand html and would like to learn php, it’s very good to make a short code in php and the same in html.

  • ertongshu ·

    Very impressed,thanks for your remarks and suggestions.

  • John ·

    Interesting article you’ve written.

  • sergio sedas ·

    Interesting article. However, I am unable to display your “demo” page. I get the infamous 404 Error.

    Could you give us your demo page.

    Best regards. And thanks for your help.

  • Moshu ·

    Oops, sorry. I am working on that demo site – and moved. You can see the menu here:
    http://www.transycan.net/devdemo/

  • Julie ·

    Very good article. Thanks

  • Hilary Meurer ·

    I am having the same issue as Bob Wylie, that I do not want to have the parent pages to appear in the second menu, just the child pages. Unfortunately, his posted solution did not work … I got a syntax error.

    Anyone else know how to fix this?

  • Moshu ·

    Whose posted solution?
    What I described in the post, is shown here:
    http://www.transycan.net/devdemo/
    About = parent page, and it never shows up in the sidebar.
    Try clicking on About or its child – the title of “About” is never shown in the sidebar!

  • Pdesign ·

    Thank you for the great article, Very helpful.

  • Mike ·

    Very helpfull!!!!

6 Trackbacks/Pingbacks

  1. Playing with WordPress » Static frontpage - combined with dynamic content
  2. Playing with WordPress » Creating a two level menu with Pages - part 2
  3. Playing with WordPress » Pages and Categories
  4. WordPress puzzles « Another Potting Shed
  5. My Blog
  6. linking it | My Blog

RSS feed for comments on this post.   TrackBack URI

Leave a Reply

Do something different
with your WordPress site!

Build SILOS and get in Google's Goodbooks
Here is how to make them LOVING your site:

Silo Manual

GET YOUR FREE REPORT NOW!
(click on the silos!)

Get the free siloing manual
and beat your competition today!




  • Make and save money!
Hassle-free blog setup in minutes   Click here to join Easy Video Producer
RAP Bank   Text Link Ads