Wordpress - Generate a Menu that Displays Child Pages using wp_list_pages() with the New Menu Functionality in WordPress 3.0?

I created a Widget named Page Sub Navigation (clever I know) that is working for me.

If you install this, you can just drag the widget to one of your widget areas and BAM it works.

<?php
/*
Plugin Name: Page Sub Navigation
Plugin URI: http://codegavin.com/wordpress/sub-nav
Description: Displays a list of child pages for the current page
Author: Jesse Gavin
Version: 1
Author URI: http://codegavin.com
*/

function createPageSubMenu()
{
  if (is_page()) {
    global $wp_query;

    if( empty($wp_query->post->post_parent) ) {
      $parent = $wp_query->post->ID;
    } else {
      $parent = $wp_query->post->post_parent;
    }

    $title = get_the_title($parent);

    if(wp_list_pages("title_li=&child_of=$parent&echo=0" )) {
      echo "<div id='submenu'>";
      echo "<h3><span>$title</span></h3>";
      echo "<ul>";
      wp_list_pages("title_li=&child_of=$parent&echo=1" );
      echo "</ul>";
      echo "</div>";
    }
  }
}


function widget_pageSubNav($args) {
  extract($args);
  echo $before_widget;
  createPageSubMenu();
  echo $after_widget;
}

function pageSubMenu_init()
{
  wp_register_sidebar_widget("cg-sidebar-widget", __('Page Sub Navigation'), 'widget_pageSubNav');
}
add_action("plugins_loaded", "pageSubMenu_init");
?>

Or if you just want the juicy parts...

if (is_page()) {
  global $wp_query;

  if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
  } else {
    $parent = $wp_query->post->post_parent;
  }

  if(wp_list_pages("title_li=&child_of=$parent&echo=0" )) {
    wp_list_pages("title_li=&child_of=$parent&echo=1" );
  }
}

UPDATE

I found another plugin that does essentially the same thing (and maybe does it better, I don't know). http://wordpress.org/extend/plugins/subpages-widget/


you could do a css hack to do this (2 ways that I would try)

1 this is the easiest way I can think of do make the css display the items in the subnavigation.

.current-menu-ancestor ul {display:inline;}
.current-menu-parent ul (display:inline;}

2 assuming that your theme supports body classes you could create a nav menu for each "sub nav", and set them to display beneath the main navigation - then edit your stylesheet to only show the subnav div's using something like this:

.child-menu-about, .child-menu-leadership {display:none;}
body.page-id-YOUR_ABOUT_PAGE_ID .child-menu-about {display:inline;}
body.category-YOUR-CATEGORY-SLUG  .child-menu-leadership {display:inline;}

Tags:

Menus