3

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

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)

<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
        );
    }
}
2
  • If someone can guide me through this?
    – June
    Commented Aug 31, 2014 at 19:15
  • is there any way out for this?
    – June
    Commented Sep 1, 2014 at 14:44

1 Answer 1

0

Ended up doing via jquery

jQuery('.menu-item-has-children').each(function(){
    idLi=jQuery(this).attr('id');
    jQuery('#'+idLi+' ul').wrapAll('<div class="slideFromtop">')
});
2
  • Using JS for such things isn’t the best way, I guess... You can easily change the structure of menu using WP filters. Commented Mar 18, 2018 at 15:17
  • Back in 2014 this seems to be far easier and straightforward approach , rather than creating a full walker nav class which may be true today as well
    – June
    Commented Mar 19, 2018 at 5:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.