Ask your WordPress questions! Pay money and get answers fast! (more info)

Need a Custom Walker Class for a tabbed Mega Menu WordPress

  • REFUNDED

Hi,
i need a Custom Walker Class for Worpress Mega menu . The $link_css_class comes from a custom field in my menu and should be output in div.vertical-tabs-content. I don't know how I can leave the hierarchical structure to create the vertical tabs content container area for my tab-content.

This is my html.


<ul>
<li><a href="#">Topic 1</a>
<div class="drop-down-large">
<!-- vertical tabs container -->
<div class="vertical-tabs-container">
<div class="container-fluid space-0">
<div class="col-sm-3 col-md-2 clearfix space-0">
<!-- vertical tab -->
<div class="vertical-tabs">
<!-- active -->
<a class="active" href="#menu-item-426">Subtopic 1</a>
<a href="#menu-item-326">Subtopic 2</a>
</div>
</div>
<div class="col-sm-9 col-md-10 space-0">
<!-- vertical tabs content container -->
<div class="vertical-tabs-content-container">
<!-- this is vertical tabs content 1 -->
<div id="menu-item-426" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
<!-- this is vertical tabs content 2 -->
<div id="menu-item-326" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li><a href="#">Topic 2</a>
<div class="drop-down-large">
<!-- vertical tabs container -->
<div class="vertical-tabs-container">
<div class="container-fluid space-0">
<div class="col-sm-3 col-md-2 clearfix space-0">
<!-- vertical tab -->
<div class="vertical-tabs">
<!-- active -->
<a class="active" href="#menu-item-626">Subtopic 22</a>
<a href="#menu-item-526">Subtopic 22</a>
</div>
</div>
<div class="col-sm-9 col-md-10 space-0">
<!-- vertical tabs content container -->
<div class="vertical-tabs-content-container">
<!-- this is vertical tabs content 1 -->
<div id="menu-item-626" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
<!-- this is vertical tabs content 2 -->
<div id="menu-item-526" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
...

and my custom walker so far

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"sub-menu\"><div class=\"drop-down-large\"><div class=\"vertical-tabs-container\"><div class=\"container-fluid space-0\"><div class=\"col-sm-3 col-md-3 clearfix space-0\"><div class=\"vertical-tabs\">\n";
}

function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "$indent</ul>\n";
}

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$link_css_class = get_field( 'image', $item->ID );
$output .= $indent . '<li' . $id . $value . $class_names . '> <img src="' . $link_css_class . '">';

$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 ) . esc_attr( $item->ID ) . '"' : '';
//HERE IT IS



$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;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}


Thanks in advance

Answers (2)

2016-09-27

IndiTheme - answers:

I have create mega menu for my theme. Please see here http://moozakue.inditheme.com/
I use horizontal tab in mega menu. I think my code can be use just need little change for vertical tab.


Andre comments:

Hi,
thanks for your answer. I think that could be possible. How are you create the content for your tabs? I have some costum fields (with ACF) in Appearance -> Menus, where I want to create the content for the tabs, and can i use my custom fields with your megamenu?


IndiTheme - comments:

I am not using ACF. I am using custom field and custom functions/class. Here is my menu page screenshot.
https://postimg.org/image/efwzy3zxp/90c3529a/

I am populate post for sub menu from "format post", "category", and "tags".


Andre comments:

Ok, I see. I do not know exactly if it would work with your theme. Do you see a way to extend the Custom Walker Class?
Thx


IndiTheme - comments:

Can i try in your theme? Please if you don't mind send your theme file to my mail. I will try now.
my mail: [email protected]
Thanks


Andre comments:

k, i send you a mail.

best
Andre


IndiTheme - comments:

Thanks. I will waiting your mail.


IndiTheme - comments:

Hi Andre,
I am not receive your mail until now. Can you resend?
Thanks


Andre comments:

Hi,
ok sent the mail again.
Strange, I have the mail sent yesterday without any problems, maybe you look in your spam folder. My email address is: [email protected]

best
Andre


IndiTheme - comments:

Ok. I got it. I will try now.
Thanks


Andre comments:

Hi,
What about your try, any progress?
best
Andre

2016-09-30

Arnav Joy answers:

Hi ,
Can you show me your site and send me files too please ??

my mail is : [email protected]


Andre comments:

Hi Arnav,
There is no page online, just my local dev. i send you a mail with my theme so far .

Andre