Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

2-level vertical page navigation WordPress


Hey, I am looking for a simple 2-level vertical page navigation. If a parent has children show only children of current parent. It sounds so basic but I couldn't find a solution via google and I don't have the skills to write conditional queries for wp_list_pages.

Thanks for your help.


Answers (3)


Ivaylo Draganov answers:

Check out this article on
[[LINK href=""]][[/LINK]]

I think it's just what you need in terms of PHP code. You'd have to apply some CSS to make it appear vertical.

Thorsten Schraut comments:

This approch is exactly what I am looking for. I will check it out tomorrow. Thx for sharing.

Ivaylo Draganov comments:

I see that you are considering using the CSS method suggested by Baki Goxhaj. This approach relies on CSS to visually hide the unwanted links. And that's a good & simple technique as long as you don't mind having the actual items in the HTML. But if you want to have only the current page's children in the HTML, then PHP hacking is the way to go.


Thorsten Schraut comments:

I will check out both methods. Simple is good for the project I need to include the menu in. For learning more about PHP I reckon your links are the way to go. Still I am wondering why there isn't a simpler solution provided by Wordpress for such a basic need?

Ivaylo Draganov comments:

<blockquote>Still I am wondering why there isn't a simpler solution provided by Wordpress for such a basic need?</blockquote>

I guess it's because Wordpress arose as a blogging tool and there simply wasn't a high demand for such functionality.

I hope you saw the link at the bottom of the article at which points to [[LINK href=""]]an even better way of accomplishing this type of navigation[[/LINK]] written by fellow WP expert Michael Fields.

Thorsten Schraut comments:

YEAH!!! Mission accomplished! The Micheal Fields walker is working like a charm. Exactly what I needed. Cheers mate and thanx for your help.



Dan | gteh answers:

Try this:

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

Thorsten Schraut comments:

This is the kind of solution I am looking for but this code shows all the children at the same time like the worpdress page widget. I need a solution that only shows the children of a selected parent. How do you hide the other children?

> menuitem 1
> menuitem 2 (selected)
>> child 1 of menuitem 2
>> child 2 of menuitem 2
>> child 3 of menuitem 2
> menuitem 3
> menuitem 4

(asuming all menuitems have children)


Baki Goxhaj answers:

I would use suckerfish CSS menu, align it vertically and show the children of the actual page by CSS on hover or on current.

Makes sense?

Thorsten Schraut comments:

No plugin solutions pls.

Baki Goxhaj comments:

No, it's not a plugin, it's an CSS approach to muliti-level menus.

Thorsten Schraut comments:

Ups sorry. I will look into it, but it sounds like the kind of menu TwentyTen uses horizontaly. Children should be visible permanently if parent is selected.

Baki Goxhaj comments:

Yes, that can be controlled by CSS. See here: - a site I have developed. The left menu, with the selected item children shown, uses wp_list_categories() and CSS - no php hacks. The exact same things can be applied to wp_list_pages().

Thorsten Schraut comments:

No hacks sound really good. So all I will have to do is to check out the suckerfish method and than apply it to wp_list_pages? Will try that tomorrow as well. Thx :)