How do I go about inserting a custom div before the wp_nav_menu() adds the ul?

The problem is that the script is inserting my 'div menu button' after the nav ul instead of before it.

I am trying to do this via a function because the basic idea is that on some of my menus I need to insert a div with a 'menu' button for users to click on to fire a dropdown.

*I had to modify my code below because the editor keeps removing my div code from displaying. Suffice it to say I am using a proper opening and closing div

Here is a link to 'proper' code as I can't figure the editor out on stack.

function tumble_menu( $args = array() ) {
    /* Default arguments */
    $defaults = array(
        'container'         => 'ul',
        'menu_class'        => 'nav',
        'menu_id'           => 'top_nav',
        'theme_location'    => 'top-menu',
        'echo'              => true,
        'before'            => '',
        'after'             => '',
        'link_before'       => '',
        'link_after'        => '',
        'depth'             => 1,
        'sort_column'       => 'menu_order',
        'walker'            => ''
        );
    $defaults   = apply_filters( 'tumble_nav_default_args', $defaults);
    $args       = wp_parse_args( $args, $defaults );


$main_menu = wp_nav_menu( $args );


}
function tumble_add_menu_wrapper($html, $begin, $end) {
    // wrap our original HTML with the new tags
    $html = $begin . $html . $end;
    return $html;
}
add_filter( 'tumble_menu_wrap', 'tumble_add_menu_wrapper', 10, 3 );
function tumble_do_menu_wrapper() {
    $html = tumble_menu();
    echo apply_filters( 'tumble_menu_wrap', $html, 'div class="menu-button">Menu/div>','' );
}

Update My question was a little confusing. I was not trying to wrap the navigation in a div element, but rather was trying to insert a self contained div prior to the navigation ul element being output.

Somehow the wp_nav_menu() function is not allowing this. If I use a 'standard' html element instead, then my wrapper function works perfectly. I would like to learn someday why this simple php logic works, but not with wp_nav_menu() but I suppose that is a question for another day.

Thanks Chip for the info!

How do I go about inserting a custom div before the wp_nav_menu() adds the ul?

The problem is that the script is inserting my 'div menu button' after the nav ul instead of before it.

I am trying to do this via a function because the basic idea is that on some of my menus I need to insert a div with a 'menu' button for users to click on to fire a dropdown.

*I had to modify my code below because the editor keeps removing my div code from displaying. Suffice it to say I am using a proper opening and closing div

Here is a link to 'proper' code as I can't figure the editor out on stack. https://gist.github/3120416

function tumble_menu( $args = array() ) {
    /* Default arguments */
    $defaults = array(
        'container'         => 'ul',
        'menu_class'        => 'nav',
        'menu_id'           => 'top_nav',
        'theme_location'    => 'top-menu',
        'echo'              => true,
        'before'            => '',
        'after'             => '',
        'link_before'       => '',
        'link_after'        => '',
        'depth'             => 1,
        'sort_column'       => 'menu_order',
        'walker'            => ''
        );
    $defaults   = apply_filters( 'tumble_nav_default_args', $defaults);
    $args       = wp_parse_args( $args, $defaults );


$main_menu = wp_nav_menu( $args );


}
function tumble_add_menu_wrapper($html, $begin, $end) {
    // wrap our original HTML with the new tags
    $html = $begin . $html . $end;
    return $html;
}
add_filter( 'tumble_menu_wrap', 'tumble_add_menu_wrapper', 10, 3 );
function tumble_do_menu_wrapper() {
    $html = tumble_menu();
    echo apply_filters( 'tumble_menu_wrap', $html, 'div class="menu-button">Menu/div>','' );
}

Update My question was a little confusing. I was not trying to wrap the navigation in a div element, but rather was trying to insert a self contained div prior to the navigation ul element being output.

Somehow the wp_nav_menu() function is not allowing this. If I use a 'standard' html element instead, then my wrapper function works perfectly. I would like to learn someday why this simple php logic works, but not with wp_nav_menu() but I suppose that is a question for another day.

Thanks Chip for the info!

• menus
• filters

2 Answers 2

How do I go about inserting a custom div before the wp_nav_menu() adds the ul?

That's what the 'container' array key defines: the element that contains the menu.

The menu will always output as a <ul>, wrapped in a container of the type specified by the 'container' array key: either a <div> (default), by passing 'div'; <nav>, by passing 'nav'; or none, by passing false.

So, if you want to wrap your nav menu in a <div class="menu-button">, use the following array arguments:

array(
    'container' => 'div',
    'container_class' => 'menu-button'
)

(Though, again, 'div' is the default value, so you can omit it if you want.)

Here is the solution. Props to @SergeyBiryukov

Changes required turning echo to false and adding in the return $main_menu.

function tumble_menu( $args = array() ) {
    /* Default arguments */
    $defaults = array(
        'container'         => 'ul',
        'menu_class'        => 'nav',
        'menu_id'       => 'main_menu',
        'theme_location'    => 'main-menu',
        'echo'          => false,
        'before'        => '',
        'after'         => '',
        'link_before'       => '',
        'link_after'        => '',
        'depth'         => 1,
        'sort_column'       => 'menu_order',
        'show_container'    => false,
        'walker'        => '',
        );
    $defaults   = apply_filters( 'tumble_nav_default_args', $defaults);
    $args       = wp_parse_args( $args, $defaults );
    $main_menu = wp_nav_menu( $args );
    return $main_menu;
}
function tumble_add_menu_wrapper($nav_menu, $begin, $end) {
    // wrap our original HTML with the new tags
    return $begin . $nav_menu . $end;
}

add_filter( 'tumble_menu_wrap', 'tumble_add_menu_wrapper', 10, 3 );

function tumble_do_menu_wrapper() {
    $html = tumble_menu();
    echo apply_filters( 'tumble_menu_wrap', $html, 'div class="menu-button">Menu/div>','' );
}