0

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.com/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!

2 Answers 2

3

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.)

3
  • Hi Chip... actually I am not trying to wrap the menu in a container. I am trying to add a div which basically contains a menu button before the ul. The reason I am doing this with a function is because I am only going to have that inserted under 2 conditions. 1- if the menu type defined by the user is a flexnav in the theme settings api. 2- only if the screen resolution is less than 480px. That info was not necessary for my question so I left it out
    – shawn
    Commented Jul 16, 2012 at 6:49
  • btw, in that fiddle.. notice that you can click the arrow to show sub-menu? then there is an arrow for a second 'group-forums' sub-sub-menu? for some reason my js is triggering a close event on the level above. I've been stuck on that one problem for soooo long now. If you can take a peek and maybe give me a hint? this is all for my custom oneology theme :)
    – shawn
    Commented Jul 16, 2012 at 6:56
  • Hi, @shawn, can you update your question with this clarification? IMO, it completely changes the nature of the question. (Also, I don't think you can do what you want to do, short of writing your own walker.) Commented Jul 16, 2012 at 13:13
0

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>','' );
}

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.