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

WordPress Hierarchical Pages help needed WordPress

  • SOLVED

hello,
I am in trouble while making a hierarchical page menu of wordpress. There will be one top menu and one left menu. Top menu will include the top-most pages and left menu should list children of active menu. please check my structure:

<blockquote>Structure:</blockquote>
Page 1
Subpage 1.1
Subsubpage 1.1.1
Subsubpage 1.1.2
Subpage 1.2
Page 2
Subpage 2.1
Subpage 2.2
Subsubpage 2.2.1
Subsubpage 2.2.2
Page 3
Subpage 3.1
Subpage 3.2


<blockquote>Navigation:</blockquote>


Topmenu: <strong>Page 1</strong> Page 2 Page 3

Left menu:

Subpage 1.1
Subpage 1.2


AGAIN:

Topmenu: Page 1 Page 2 Page 3

Left menu:
<strong>Subpage 1.1</strong>
Subsubpage 1.1.1
Subsubpage 1.1.2
Subpage 1.2

AGAIN:

Topmenu: Page 1 Page 2 Page 3

Left menu:
Subpage 1.1
<strong> Subsubpage 1.1.1</strong>
Subsubpage 1.1.2
Subpage 1.2

AGAIN:

Topmenu: Page 1 Page 2 Page 3

Left menu:
Subpage 1.1
<strong>Subpage 1.2</strong>


Note: Bold are active link.

If anyone interested to help me solving please answer or PM me. Contact me if you need to negotiate about bonus :).


please check the image attached. I actually don't need the top menu. it is for example. I just need the left menu which should be according to the top menu :).

where the hell the image goes? please check this link:
http://i39.tinypic.com/2rn7tj5.jpg

Answers (5)

2010-05-06

Oleg Butuzov answers:

css

ul.nav li {
margin:5px;
display:block;
width:100%;
}

ul.nav li a { font-style:italic; display:block; }
ul.nav {
width:200px;
margin:0 auto;
}

ul.nav ul {
margin-left:10px;
display:none;
}

ul.nav li.current_page_item ul,
ul.nav li.current_page_ancestor ul,
ul.nav li.current_page_parent ul {
display:block;
}

ul.nav li a { color:#000;}



php code for sidebar-page-nav.php (witch can be included to the page tempalte as <?php get_sidebar('page-nav');?>)

<?php

if ((count($post->ancestors) > 0)
&& ($data = array_reverse($post->ancestors))
&& !is_null($data[0])){

$data = wp_list_pages('title_li=&echo=0&child_of='.$data[0]);
} else {
$data = wp_list_pages('title_li=&echo=0&child_of='.$post->ID);
}

if (strlen($data) != '') {?>
<ul class='nav'><?php echo $data; ?></ul>
<?php } ?>


it dosn't require any plugin. all of this is native wp core functionality.

last update - 11:51 gmt 2
fixed typo in php code


Oleg Butuzov comments:

left is a bit different sorry.

<?php
if ((count($post->ancestors) > 0) && ($data = array_reverse($post->ancestors)) && !is_null($data[0])){

$menu = wp_list_pages('title_li=&echo=0&child_of='.$data[0]);

} else {

$menu = wp_list_pages('title_li=&echo=0&child_of='.$post->ID);

}

echo str_repalce(array('current_page_ancestor','current_page_parent','current_page_item'),array('current','current','current'), $menu);

?>


Oleg Butuzov comments:

and css shoud be something like

/* indicate active branche links */
li.current a { font-weight:bold;}

but in practice its not always like in your example. here need few additional fixes for css and code i posted.


Oleg Butuzov comments:


#parentmenu ul {marginl-left:10px;}


Oleg Butuzov comments:

sorry i havn't saw images.

i am using this styles (with left menu)


ul.nav li {
margin:5px;
display:block;
width:100%;
}


ul.nav li a { font-style:italic; display:block; }


ul.nav {
width:200px;
margin:0 auto;
}
ul.nav ul {
margin-left:10px;
display:none;
}

ul.nav li.current_page_item ul,
ul.nav li.current_page_ancestor ul,
ul.nav li.current_page_parent ul
{
display:block;
}

ul.nav li a { color:#000;}


and my menu

<?php
if ((count($post->ancestors) > 0) && ($data = array_reverse($post->ancestors)) && !is_null($data[0])){
$data = wp_list_pages('title_li=&echo=0&child_of='.$data[0]);
} else {
$data = wp_list_pages('title_li=&echo=0&child_of='.$post->ID);
}


if (strlen($data) != '') {
?>
<ul class='nav'>
<?php echo $data; ?>
</ul>

<?php } ?>


Monster Coder comments:

I guess you are close. let me test on my actual site. i will update you shortly.

thanks

2010-05-06

Andrzej answers:

Hey,
Do you just need a structure of the menu or also CSS?


Monster Coder comments:

hello,
i will just need indention on sub pages and css class will be enough.

thanks


Andrzej comments:

Do you want to place the left nav on the sidebar? I mean, should the nav ideally be a widget?


Monster Coder comments:

no need to be widget. a template function in functions.php file will be enough so that I can call it from page.php of theme.

thanks

2010-05-06

Buzu B answers:

Interested on doing it.


Buzu B comments:

Hi.

I'm interested on solving your problem regarding the menus. Please let me know when the deadline would be and if you need CSS too or just the structure.

Buzu.

2010-05-06

Anders Hassis answers:

No CSS in this solution.

Install the following plugin (snippet): http://www.webspaceworks.com/resources/wordpress/30/
Download link here: http://www.webspaceworks.com/downloads/fold_page_list.php.zip
Just unpack it, drop it in the plugins/ folder and activate.

In the header, use the following code:
<div id="menu">
<ul>
<?php wp_list_pages(array('title_li' => '', 'depth' => 1)); ?>
</ul>


In the sidebar:
<?php
/*
* Take care of the hierarchical tricky bit with the menu
*/
if (function_exists('_wswwpx_page_get_ancestor_ids')) {
$g_page_id = $wp_query->get_queried_object_id();
$ancestors = _wswwpx_page_get_ancestor_ids($g_page_id);
$args = "child_of=".$ancestors[1] ."&sort_column=menu_order&title_li=&depth=2";
} else
$ancestors[1] = 1;
?>
<div id="sidebar">
<ul>
<?php
if (function_exists('wswwpx_fold_page_list'))
wswwpx_fold_page_list ($args, true);
else
wp_list_pages($args);
?>
</ul>
</div>


<em>args</em> takes the same arguments as wp_list_pages() if I recall correctly. The first part, header goes one level (depth=1), the sidebar goes two levels (depth=2)


Monster Coder comments:

your example expanding other parents' child. I don't want that. child of current parents should be expanded.

2010-05-06

Ben Huson answers:

Another plugin solution for the left menu...

List Pages at depth allows you to display a list of pages starting at a certain depth which means you can easily show secondary level navigation.

http://wordpress.org/extend/plugins/list-pages-at-depth/

The list_pages_at_depth() function works exactly like the WordPress list_pages function but accepts an extra parameter 'startdepth'. All that's need to add the secondary navigation to your sidebar is:

<ul>
<?php list_pages_at_depth( array( 'startdepth' => 1, 'title_li' => '' ) ); ?>
</ul>


The plugin also provides a widget if you want to do it that way.

<em>(PS. This is a plugin that I wrote)</em>