logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$35
Child-based secondary navigation

I need help creating a side navigation like the one here:

http://egr.vcu.edu/about/facilities/index.html

The function I have:

function bfg_secondary_nav() { 

global $post;

$current_page_parent = ( $post->post_parent ? $post->post_parent : $post->ID ); ?>
<h3><a href="<?php echo get_permalink($current_page_parent); ?>"><?php echo get_the_title($current_page_parent); ?></a></h3>

<ul>
<?php wp_list_pages( array(
'title_li' => '',
'child_of' => $current_page_parent,
'depth' => '0' )
);

</ul>

<?php }


Almost works, but fails to display grandchildren properly. I'd prefer to use wp_nav_menu(); over wp_list_pages(); if possible.

Thanks!

This question has been answered.

royallds | 07/12/12 at 5:56pm Edit


(2) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    07/12/12
    6:07pm
    Luthfi Bintoro says:

    i think you need to change your function to be like this :


    function bfg_secondary_nav() {
    wp_nav_menu( array(
    'container' => 'ul',
    'menu_class' => 'sf-menu',
    'menu_id' => 'topnav',
    'depth' => 0,
    'sort_column' => 'menu_order',
    'fallback_cb' => 'nav_page_fallback',
    'theme_location' => 'secondarynav'
    ));
    }


    and you need to add function nav_page_fallback like this :


    function nav_page_fallback() {
    if(is_front_page()){$class="current_page_item";}else{$class="";}
    print '<ul id="topnav" class="sf-menu"><li class="'.$class.'"><a href=" '.home_url( '/') .' " title=" '.__('Click for Home',THE_LANG).' ">'.__('Home',THE_LANG).'</a></li>';
    wp_list_pages( 'title_li=&sort_column=menu_order' );
    print '</ul>';
    }


    so with this you can create your own menu

    • 07/12/12 6:15pm

      royallds says:

      Thanks for your fast response but that doesn't seem to display anything for me... thoughts?

  • avatar
    Last edited:
    07/12/12
    6:36pm
    Martin Pham says:

    try this


    function bfg_secondary_nav() {
    if(!is_page()) return;
    $args = array(
    'depth' => 0,
    'date_format' => get_option('date_format'),
    'child_of' => 0,
    'title_li' => __('About'),
    'echo' => 1,
    'sort_column' => 'menu_order, post_title',
    'post_type' => 'page'
    );

    wp_list_pages( $args );
    }

    CSS

    .pagenav ul ul,
    .pagenav .current_page_item ul ul,
    .pagenav .current_page_ancestor ul ul,
    .pagenav .current_page_ancestor .current_page_item ul ul,
    .pagenav .current_page_ancestor .current_page_ancestor ul ul {
    display: none;
    }

    .pagenav .current_page_item ul,
    .pagenav .current_page_ancestor ul,
    .pagenav .current_page_ancestor .current_page_item ul,
    .pagenav .current_page_ancestor .current_page_ancestor ul,
    .pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
    .pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {
    display: block;
    }


    More: http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items

    Previous versions of this answer: 07/12/12 at 6:36pm

    • 07/12/12 6:39pm

      royallds says:

      That displays all pages, not just the current page's siblings + children

    • 07/12/12 6:55pm

      Martin Pham says:

      @royallds: I checked and it displayed correctly

      Attached Image

    • 07/12/12 7:33pm

      royallds says:

      i checked it also. it doesnt

      Attached Image

    • 07/12/12 7:33pm

      royallds says:

      i checked it also. it doesnt

      Attached Image

    • 07/12/12 7:38pm

      Martin Pham says:

      :)


      function bfg_secondary_nav() {
      global $post;
      if ($post->post_parent) {
      $parents = get_post_ancestors($post->ID);
      $parent = $parents[count($parents)-1];
      } else
      {
      $parent = $post->ID;
      }

      $args = array(
      'depth' => 0,
      'date_format' => get_option('date_format'),
      'child_of' => $parent,
      'echo' => 0,
      'sort_column' => 'menu_order, post_title',
      'post_type' => 'page'
      );

      $page_nav = wp_list_pages( $args );

      printf('<h3 clss="menu-head">%s</h3><ul class="menu">%s</ul>', get_the_title($parent), $page_nav);

      }

    • 07/12/12 7:47pm

      royallds says:

      Thanks for sticking with it. Here's what I get with that function.

      Attached Image

    • 07/12/12 8:21pm

      royallds says:

      Actually, this is what I get when I removed the CSS from your first post. Closer, but not quite there yet.

      Attached Image

    • 07/12/12 8:37pm

      Martin Pham says:

      Please try this demo http://s.marxcdn.com/wordpress/about

    • 07/12/12 8:40pm

      royallds says:

      that seems to be working perfectly. is that the same code as above?

    • 07/12/12 8:45pm

      Martin Pham says:

      Yes
      This function


      function bfg_secondary_nav() {
      global $post;
      if ($post->post_parent) {
      $parents = get_post_ancestors($post->ID);
      $parent = $parents[count($parents)-1];
      } else
      {
      $parent = $post->ID;
      }

      $args = array(
      'depth' => 0,
      'date_format' => get_option('date_format'),
      'child_of' => $parent,
      'title_li' => '<span class="label">page menu</span>',
      'echo' => 0,
      'sort_column' => 'menu_order, post_title',
      'post_type' => 'page'
      );

      $page_nav = wp_list_pages( $args );

      printf('<h3 clss="menu-head"><a href="%s">%s</a></h3><ul class="menu">%s</ul>', get_page_link($parent),get_the_title($parent), $page_nav);

      }


      CSS

      .pagenav ul ul,

      .pagenav .current_page_item ul ul,

      .pagenav .current_page_ancestor ul ul,

      .pagenav .current_page_ancestor .current_page_item ul ul,

      .pagenav .current_page_ancestor .current_page_ancestor ul ul {

      display: none;

      }



      .pagenav .current_page_item ul,

      .pagenav .current_page_ancestor ul,

      .pagenav .current_page_ancestor .current_page_item ul,

      .pagenav .current_page_ancestor .current_page_ancestor ul,

      .pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,

      .pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {

      display: block;

      }
      .pagenav .label {display:none;}


      Menu structure, please view attachment...

      Attached Image

    • 07/12/12 8:56pm

      royallds says:

      very close now. thank you. here's a screenshot with the problems. if it's easier for you pm me and i'll send you a site dump and the theme

    • 07/12/12 8:57pm

      royallds says:

      screenshot

      Attached Image

    • 07/12/12 9:19pm

      royallds says:

      I've made a few edits have it mostly working now. There's still a javascript issue on the grandchild pages but I'll figure that out on my own. I've voted for you to receive the $35.

This question has expired.



Gabriel Reguly, Hai Bui, Francisco Javier Carazo Gil, Arnav Joy, royallds voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.