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)
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
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
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.
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>