Last active
November 12, 2017 19:54
-
-
Save srikat/10339752 to your computer and use it in GitHub Desktop.
Displaying custom menu with menu descriptions and icons in a WordPress widget. http://sridharkatakam.com/display-custom-menu-menu-descriptions-icons-wordpress-widget/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* Add walker class that displays menu item descriptions | |
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 ) . '"'; | |
$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 ) .'"' : ''; | |
$item_output = $args->before; | |
$item_output .= '<a'. $attributes .'>'; | |
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; | |
$item_output .= '<br /><span class="sub">' . $item->description . '</span>'; | |
$item_output .= '</a>'; | |
$item_output .= $args->after; | |
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); | |
} | |
} | |
//* Make Font Awesome available | |
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); | |
function enqueue_font_awesome() { | |
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php $walker = new Menu_With_Description; ?> | |
<?php wp_nav_menu( array( 'menu' => 'Side Menu', 'menu_class' => 'menu', 'walker' => $walker ) ); ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* WP menu with menu descriptions and icons in a widget | |
------------------------------------------------------------- */ | |
#menu-side-menu li { | |
margin-bottom: 20px; | |
position: relative; | |
} | |
#menu-side-menu li:last-child { | |
margin-bottom: 0; | |
} | |
#menu-side-menu a { | |
font-weight: bold; | |
border-bottom: none; | |
display: block; | |
padding: 10px 10px 10px 65px; | |
line-height: 1.3; | |
border-radius: 3px; | |
} | |
#menu-side-menu a .sub { | |
font-weight: normal; | |
} | |
#menu-side-menu .current-menu-item a, #menu-side-menu a:hover { | |
background: #f1f9f7; | |
color: #000; | |
} | |
#menu-side-menu a:before { | |
font-family: FontAwesome; | |
font-size: 40px; | |
float: left; | |
font-style: normal; | |
font-weight: normal; | |
text-decoration: inherit; | |
padding-right: 15px; | |
position: absolute; | |
top: 5px; | |
left: 10px; | |
} | |
#menu-side-menu .menu-item-home a:before { | |
content: "\f015"; | |
} | |
#menu-item-71 a:before { | |
content: "\f0a1"; | |
} | |
#menu-item-72 a:before { | |
content: "\f044"; | |
} | |
#menu-item-73 a:before { | |
content: "\f02d"; | |
} | |
#menu-item-74 a:before { | |
content: "\f003"; | |
} | |
#menu-item-76 a:before { | |
content: "\f07a"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment