$30

WordPress Hierarchical Pages help needed

Monster Coder | 05/06/10 at 3:28am | Edit

(5) Possible Answers Submitted...

• 
  Last edited:
  05/06/10
  3:43am
  Andrzej Zglobica says:

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

  • 05/06/10 3:48am
    
    Monster Coder says:

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

  • 05/06/10 4:00am
    
    Andrzej Zglobica says:

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

  • 05/06/10 4:46am
    
    Monster Coder says:

    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

• 
  Last edited:
  05/06/10
  3:44am
  Buzu B says:

  Interested on doing it.

  • 05/06/10 3:48am
    
    Buzu B says:

    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.

• 
  Last edited:
  05/06/10
  6:06am
  Oleg Butuzov says:

  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
  

  Previous versions of this answer: 05/06/10 at 4:46am | 05/06/10 at 4:51am | 05/06/10 at 4:51am

  • 05/06/10 3:50am
    
    Oleg Butuzov says:

    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);
    
    
    
    ?>
    
    

  • 05/06/10 3:52am
    
    Oleg Butuzov says:

    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.

  • 05/06/10 3:56am
    
    Oleg Butuzov says:

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

  • 05/06/10 3:59am
    
    Oleg Butuzov says:

    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 } ?>
    
    

  • 05/06/10 4:48am
    
    Monster Coder says:

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

• 
  Last edited:
  05/06/10
  4:15am
  Anders Hassis says:

  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>

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

  Previous versions of this answer: 05/06/10 at 3:59am | 05/06/10 at 4:00am | 05/06/10 at 4:15am

  • 05/06/10 4:17am
    
    Monster Coder says:

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

• 
  Last edited:
  05/06/10
  4:25am
  Ben Huson says:

  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.
  
  (PS. This is a plugin that I wrote)

  Previous versions of this answer: 05/06/10 at 4:24am | 05/06/10 at 4:25am

This question has expired.

Current status of this question: Completed

Top Experts (+)

• 
  Denzel Chia$1863 earned (plus $171)
• 
  Utkarsh Kukreti$1758 earned (plus $127)
• 
  Rashad Aliyev$1443 earned (plus $37)
• 
  John Cotton$1438 earned (plus $139)
• 
  Christianto $1346 earned (plus $251)

Top Donors (+)

• 
  Sinoun Chea$29 given (pure donation)
• 
  Dan | gteh $12 given (pure donation)
• 
  Lawrence Krubner$36 given (pure donation)

Top Supporters (+)

• 
  jpvilain$40 given
• 
  ahonshaw$30 given
• 
  Josh Cranwell$30 given