logo

$30
WordPress Hierarchical Pages help needed

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:

Structure:

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


Navigation:



Topmenu: Page 1 Page 2 Page 3

Left menu:

Subpage 1.1
Subpage 1.2


AGAIN:

Topmenu: Page 1 Page 2 Page 3

Left menu:
Subpage 1.1
Subsubpage 1.1.1
Subsubpage 1.1.2
Subpage 1.2

AGAIN:

Topmenu: Page 1 Page 2 Page 3

Left menu:
Subpage 1.1
Subsubpage 1.1.1
Subsubpage 1.1.2
Subpage 1.2

AGAIN:

Topmenu: Page 1 Page 2 Page 3

Left menu:
Subpage 1.1
Subpage 1.2


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

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


(5) Possible Answers Submitted...

  • avatar
    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

  • avatar
    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.

  • avatar
    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

  • avatar
    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.

  • avatar
    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