Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
added 219 characters in body
Source Link
June
  • 201
  • 1
  • 2
  • 8

EDIT

I have been able to add a wrapper div to description but not to sub-menu and menu description together so I am seeking assistance with adding a wrapper div to menu description and sub-menu(if any)

EDIT

I have been able to add a wrapper div to description but not to sub-menu and menu description together so I am seeking assistance with adding a wrapper div to menu description and sub-menu(if any)

edited tags
Link
fuxia
  • 107.1k
  • 38
  • 255
  • 459

Wrap wordpress description and sub menu in a wrapper

Source Link
June
  • 201
  • 1
  • 2
  • 8

Wrap wordpress description and sub menu in a wrapper

I am trying to add a wrapper to description and sub-menu in wordpress using walker class, Description will only be shown for the first menu so the structure will look like this

<ul id="menu-main-menu" class="primary-nav">
    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children first">
        <a href="http://link" class="menu-image-title-after menu-image-not-hovered">Menu 1</a>
        <div class='MainMenuWrapper'> <!--   NEW WRAPPER STARTS  --->
            <ul class="nav_desc"><li class="first"><img src="http://link/arrow.png"></li><li class="last">Menu description Goes here.</li></ul>
            <ul class="sub-menu">
            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page first"><a href="http://link" class="menu-image-title-after menu-image-not-hovered"><img width="84" height="46" src="http://link/sub_menu_bg1.png" class="menu-image menu-image-title-after" alt="Image Kitchen">Kitchen</a></li>
            </ul>
        </div>    <!--   NEW WRAPPER ENDS  --->
    </li>
</ul>

This is the code I am currently using

class Description_Walker extends Walker_Nav_Menu
{
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';

        $output .= "<li id='menu-item-$item->ID' $class_names>";

        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        // insert description for top level elements only
        // you may change this
        
        $description = ( ! empty ( $item->description ) and 0==$depth  )
            ? '<ul class="nav_desc"><li><img src="'.get_bloginfo( 'template_url' ).'/images/arrow.png"></li><li>' . esc_attr( $item->description ) . '</li></ul>' : '';

            // $description = ( ! empty ( $item->description )  )
            // ? '<span class="nav_desc">' . esc_attr( $item->description ) . '</span>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $description
            . $args->after;

        // 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
        );
    }
}
1
2