Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Creating A Tricky/Complex Custom Post Type Navigation WordPress


I've been slicing a design for a WP theme and realized that I have a bit of an issue. Have a look at the following two pages:

Features Page:

Single Feature Page:

On both pages there is a secondary navigation near the bottom. You'll notice that on the second page I need to change the color of the current page's nav element to that secondary navigation. But, since the navigation also needs to have and associated location printed below it, I'm not sure the best way to build this.

Is there a way to append content to the navigation which can be displayed below the nav element? Is there a better way to accomplish this? I can't seem to wrap my head around it.

Thanks for the help

Answers (2)


AdamGold answers:

When you are at the Appearance > Menus Site you need to look at the top right and you will notice a “Screen Option” tab. Click it and you will get the option to display several other input fields for each menu item, among them a checkbox to show the description.

To edit the output of the content, open your functions.php and paste:

class description_walker extends Walker_Nav_Menu
function start_el(&$output, $item, $depth, $args)
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';

$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

$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 ) .'"' : '';

$prepend = '<strong>';
$append = '</strong>';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

if($depth != 0)
$description = $append = $prepend = "";

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

Now, add 'walker' => new description_walker() to your wp_nav_menu.

Now, for styling this output, just play with the CSS:

.nav li a span {

Hope this is what you wanted.


Rich Staats comments:

wow, this is interesting. Do you know If I can somehow trade out $description for a custom field, so that location can be controlled from within the custom post type page?

AdamGold comments:

How do you want to fetch the description? I mean, let's say you have a custom post type named "navigation". You want me to build a code that for each navigation item, let's say "Name" it will fetch the content of the post "Name"?


Rich Staats comments:

The more I think about it, the answer you initially gave is perfect. thanks a lot.


Denis Leblanc answers:

If you create a custom menu from the menu tab you can wrap the locations in a span tag directly in the label field. Ex: Brooke & Edoard <span>Aspen, Colorado</span>. You can even put a break tag in there if you want.