Skip to content

Instantly share code, notes, and snippets.

@RevConcept
Created May 23, 2013 16:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RevConcept/5637429 to your computer and use it in GitHub Desktop.
Save RevConcept/5637429 to your computer and use it in GitHub Desktop.
This is my setup for the Custom Walker Menu we discussed at the AWP meetup. I've included the shortcode setup as well that allows the user to past a simple shortcode that will spit these custom menus out onto the page. See a live version here: http://bojacksonselitesports.com/sports-programs/bo-jackson-football
/* ==========================================================================
Custom Walker Menu for Secondary Navigation Page Templates
========================================================================== */
class Menu_With_Description 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 ) . ' box-wrap one"';
$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 ) .'"' : '';
$attributes .= ' class="button"';
// get user defined attributes for thumbnail images
$attr_defaults = array( 'class' => 'nav_thumb' , 'alt' => esc_attr( $item->attr_title ) , 'title' => esc_attr( $item->attr_title ) );
$attr = isset( $args->thumbnail_attr ) ? $args->thumbnail_attr : '';
$attr = wp_parse_args( $attr , $attr_defaults );
$item_output = $args->before;
// box output
$item_output .= '<div class="box-1">';
// thumbnail image output
$item_output .= '<div class="thumb">';
$item_output .= ( isset( $args->thumbnail_link ) && $args->thumbnail_link ) ? '<a' . $attributes . '>' : '';
$item_output .= apply_filters( 'menu_item_thumbnail' , (isset( $args->thumbnail ) && $args->thumbnail ) ? get_the_post_thumbnail( $item->object_id , ( isset( $args->thumbnail_size ) ) ? $args->thumbnail_size : 'thumbnail' , $attr ) : '' , $item , $args , $depth );
//$item_output .= apply_filters( 'menu_item_thumbnail' , (!isset( $args->thumbnail ) && $args->thumbnail ) ? '<img src="'.bloginfo('template_directory').'/images/img-thumb-default.png" alt="Bo Jackson\'s Elite Sports"' : '' , $item , $args , $depth );
$item_output .= ( isset( $args->thumbnail_link ) && $args->thumbnail_link ) ? '</a>' : '';
$item_output .= '</div>';
// title output
$item_output .= '<h2>';
$item_output .= apply_filters( 'the_title', $item->title, $item->ID );
// close menu title
$item_output .= '</h2>';
// menu description output based on depth
$item_output .= ( $args->desc_depth >= $depth ) ? '<p>' . $item->description . '</p>' : '';
// menu link output
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . 'Details' . $args->link_after;
// close menu link anchor
$item_output .= '</a>';
$item_output .= $args->after;
// close box
$item_output .= '</div>';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
add_filter( 'wp_nav_menu_args' , 'my_add_menu_descriptions' );
function my_add_menu_descriptions( $args ) {
if ( ( $args['theme_location'] != 'primary' ) && ( $args['theme_location'] != 'secondary' ) ) {
$args['walker'] = new Menu_With_Description;
$args['desc_depth'] = 0;
$args['thumbnail'] = true;
$args['thumbnail_link'] = false;
$args['thumbnail_size'] = 'get-in-the-game';
$args['thumbnail_attr'] = array( 'class' => 'nav_thumb my_thumb' , 'alt' => get_the_title(), 'title' => get_the_title());
}
return $args;
}
/* ==========================================================================
Shortcode Setup: Custom Walker Menu
========================================================================== */
// Function that will return our Wordpress menu
function list_menu($atts, $content = null) {
extract(shortcode_atts(array(
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => '',
'theme_location' => ''),
$atts));
return wp_nav_menu( array(
'menu' => $menu,
'container' => $container,
'container_class' => $container_class,
'container_id' => $container_id,
'menu_class' => $menu_class,
'menu_id' => $menu_id,
'echo' => false,
'fallback_cb' => $fallback_cb,
'before' => $before,
'after' => $after,
'link_before' => $link_before,
'link_after' => $link_after,
'depth' => $depth,
'walker' => $walker,
'theme_location' => $theme_location));
}
//Create the shortcode
add_shortcode("listmenu", "list_menu");
/* ==========================================================================
Display The Menu (portion goes in your template file)
========================================================================== */
<?php $menu_shortcode = get_post_meta( $post->ID, 'bj_cmb_menu_shortcode', true ); ?>
<?php echo do_shortcode($menu_shortcode); ?>
/* ==========================================================================
From the Admin, the Client can enter this into a custom field and the menu
will be displayed on the page.
========================================================================== */
[listmenu menu=menu-title-slug]
@RevConcept
Copy link
Author

Matt Try this:

/* ==========================================================================
Custom Walker Menu for Secondary Navigation Page Templates
========================================================================== */

class Menu_With_Description 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 ) . ' box-wrap one"';

        $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        ) .'"' : '';
        $attributes .= ' data-scroll-nav=';


                   $item_output .= '<a' . $attributes . '>' : '';
                   $item_output .= '</a>' : '';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment