WordPress – Automatically adding submenu items

Generally submenus are being added under menu items and are not separated from the navigation menu or a customized menu.

But if you need to display submenu items at a different spot, that is a different approach and we need to get ourselves into coding.

We’ve already dealt with the main function handling menus : Customize Menus

Once again there are several solutions including using a specific menu manually, or using javascript and CSS hidden tags. But we want to do it cleanly so we have to dive into the code as below. Take note that there are 2 interessant options and the Walker class is not the best one.

 

Automatically populate a menu with submenus items – Walker class

 

Here is the customized class :


/** * Take control on submenus * */ class submenus_walker extends Walker_Nav_Menu { function start_lvl( &$output, $depth = 0, $args = array() ) { // do nothing. } function end_lvl( &$output, $depth = 0, $args = array() ) { // do nothing. } function end_el( &$output, $comment, $depth = 0, $args = array() ) { // do nothing, and no </li> will be created } // add main/sub classes to li's and links function start_el(&$output, $item, $depth, $args = array(), $id = 0) { global $wp_query; //only sub menus items if ($depth >= 1) { /*do not add anything to the link*/ $indent = ''; $class_names = $value = ''; $output .= ''; /*keeping link attributes*/ $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; //append and prepend nothing $prepend = ''; $append = ''; $description = ''; $item_output = ''; $item_output .= '<a'. $attributes .'>'; $item_output .= $item->title; $item_output .= '</a>'; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

and the code to add within your page :

<?php 
//display the submenu :
   $defaults = array(
  'container'       => false,
  'echo'            => false,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
  'walker'          => new submenus_walker      
    );

 echo wp_nav_menu( $defaults );

?>  

Now using wp_list_pages

This just simplier an straightforward, so why scratching our head ?

Add the code within your page :

<?php
  if($post->post_parent) {
      $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
  } else {
      $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  }

  if ($children) { 
      echo '<ul>'. $children .'</ul>'; 
   } 
?>

Here we display the submenu items under the parent page but also on all children pages matching the same parent.
You can modify the look by adding some classes and other tags.
By default the class page-item is added to every li tag.

We could also use the $post->post_parent variable within our Walker class above, but do you really wish to use it ?

More details :

wp_list_pages

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: