Seems that nobody has an answer to this question, so I followed @Zlatev advice and created a custom walker class…
Download the plugin from GIT and add it to your theme, add the custom walker below to a include() or directly into your functions.
<?php
/**
* Required plugin
* https://github.com/adgsm/multi-level-push-menu
*/
class Push_Menu_Walker extends Walker_Nav_Menu {
/**
* Start the element output.
*
* @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. May be used for padding.
* @param array $args Additional strings.
* @return void
*/
function start_el( &$output, $item, $depth = 5, $args = array(), $id = 0 ) {
$output .= "<li>";
$attributes="";
$title = $item->title;
$desc = $item->description;
$classes = $item->classes;
/*["classes"] => array(8) {
[0]=> string(0) "" <-- THIS IS THE CUSTOM CLASS
[1]=> string(9) "menu-item"
[2]=> string(24) "menu-item-type-post_type"
[3]=> string(21) "menu-item-object-page"
[4]=> string(17) "current-menu-item"
[5]=> string(9) "page_item"
[6]=> string(12) "page-item-50"
[7]=> string(17) "current_page_item"
}*/
$font_awesome_class=" class="fa fa-". $classes[0] . '"';
! empty( $item->url )
and $attributes .= ' href="' . esc_attr( $item->url ) .'"';
$title = apply_filters( 'the_title', $item->title, $item->ID );
if (!empty ( $classes[0] )) : // If we have a custom class, add the H2 + icon
$item_output = $args->before
. "<a $attributes>"
. $args->link_before
. $title
. '</a> '
. '<h2>'
. '<i ' . $font_awesome_class . '></i>'
. $title
. '</h2>'
. $args->link_after
// . $description <-- Not needed for now...
. $args->after;
else :
$item_output = $args->before
. "<a $attributes>"
. $args->link_before
. $title
. '</a> '
. $args->link_after
. $args->after;
endif;
// Since $output is called by reference we don't need to return anything.
$output .= apply_filters(
'walker_nav_menu_start_el',
$item_output,
$item,
$depth,
$args
);
}
}
?>
Finally call the walker in your theme:
- Update the theme_location
- Remove the container by creating an empty argument
- Call the walker we’ve just created
<div id="push-nav">
<nav>
<h2>Navigation <i class="fa fa-reorder"></i></h2>
<?php wp_nav_menu( array( 'theme_location' => 'menu-3', 'container'=>'', 'walker' => new Push_Menu_Walker()) ); ?>
</nav>
</div><!-- /#page -->