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 );
	}
	}

view raw nav-menu-extras.php hosted with ❤ by GitHub

Bill Erickson

Ready to upgrade your website?

A starter theme for building Hybrid WordPress Themes

Custom recipe templates for WP Recipe Maker

Custom importer for WP Recipe Maker

How to Setup ConvertKit with a WordPress Form