Mega Menu using Post Meta

On Edit Page screen, add a metabox called Menu Extras. This walker checks top level menu items for be_nav_menu_extra post meta, and if there is some, includes it next to submenu in dropdown.

Example: University of Alberta, nanoFAB

<?php
/**
* Change Walker for Primary Nav
*
* @author Bill Erickson
* @link http://www.billerickson.net/customizing-menu-arguments/
*
* @param array @args
* @return array
*
*/
function be_primary_menu_args( $args ) {
if( 'primary' == $args['theme_location'] ) {
$args['walker'] = new BE_Nav_Menu_Extras();
}
return $args;
}
include_once( CHILD_DIR . '/lib/functions/nav-menu-extras.php' );
add_filter( 'wp_nav_menu_args', 'be_primary_menu_args' );
view raw functions.php hosted with ❤ by GitHub
jQuery(document).ready(function($){
$('#nav .wrap > ul > li').each(function() {
$(this).find('.right-column, .sub-menu').wrapAll('<div class="sub-menu-wrap" />');
});
});
view raw global.js hosted with ❤ by GitHub
<?php
/**
* Nav Menu Extras
*
* @package BE_Genesis_Child
* @since 1.0.0
* @link https://github.com/billerickson/BE-Genesis-Child
* @author Bill Erickson <[email protected]>
* @copyright Copyright (c) 2011, Bill Erickson
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*
*/
class BE_Nav_Menu_Extras extends Walker_Nav_Menu {
/**
* @see Walker::start_el()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param int $current_page Menu item ID.
* @param object $args
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$extra = get_post_meta( $item->object_id, 'be_nav_menu_extra', true );
if( $extra )
$classes[] = 'has-two-columns';
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $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 .= '</a>';
$item_output .= $args->after;
if( $extra )
$item_output .= '<div class="right-column">' . wpautop( $extra ) . '</div>';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk