Creating A Tricky/Complex Custom Post Type Navigation - Wordpress Solution - Coding

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: http://bit.ly/gQQvDR Single Feature Page: http://bit.ly/gwb1Z0 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

Solution - 1

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 {
display:block;
font-size:10px;
line-height:14px;
}

Hope this is what you wanted. Source: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Solution - 2

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 Aspen, Colorado. You can even put a break tag in there if you want.

Wordpress

Related
Filtering taxonomy archive by custom post type - Wordpress Solution
Order By Multiple Meta Fields - Wordpress Solution
Updating class-snoopy.php widget to http.php - Wordpress Solution
Need Widget to display new users - Wordpress Solution
Further customizing Flickr integration on Autofocus+ Pro Theme? - Wordpress Solution

Type:	Code Example
Category:	Coding
Sub Category:	Code Example
Uploaded by:	Admin
Views:	7