Remove <div> wrapper from wp_nav_menu output - wordpress

I'm trying to remove the wrapper from the wp_nav_menu() function.
I've passed container => false to the arguements array and added a hook in my functions.php, but it still shows the wrapper.
function my_wp_nav_menu_args( $args )
{
$args['menu'] = false;
$args['menu_class'] = false;
$args['container'] = false;
$args['container_class'] = false;
$args['show_home'] = true;
return $args;
}
Any ideas why?

Reading the codex: Function Reference/wp nav menu
You may need to set the Theme Location in your functions.php file and then assign your menu to it?
This is what is says in the codex:
In order to remove navigation container, theme location specified in
functions.php and used among arguments in function wp_nav_menu ( eg.
'theme_location' => 'primary-menu' ) must have a menu assigned to it
in administration! Othervise argument 'container' => 'false' is
ignored.
If you need to register a location you can use the following:
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'Your_Theme' ),
) );
Then pass it in the wp_nav_menu() function
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false ) );
Hope this helps!

I have passed null to container and menu is not wrapped in div tag.
wp_nav_menu(
array('menu' => 'Bočni',
'container' => null
)
);

I think the boolean data type it's not available for this Parameters, please read this Function Reference/wp nav menu
So the best way to remove this div wrapper replace it with ul, like this example
wp_nav_menu( array(
'menu' => 'header-nav_menu',
'theme_location' => 'header-nav_menu',
'container' => 'ul', //To replace div wrapper with ul
'menu_class' => 'YOUR CLASS'//Add classes to your ul
)
);

wp_nav_menu(array(
'container' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'footer-1',
));
An existing menu have to be associated to your location ('footer-1' in my example), otherwise, there is always a div wrapper.

In my case "container" => false doesn't work, It only works when you write
"items_wrap" => "%3$s" but it removes all wraps including <ul> if you want to remove <div> and have your menu wrapped in <ul> I recommend to do this way
wp_nav_menu(array(
'theme_location' => 'header_menu',
'menu' => 'header_menu',
'items_wrap' => '<ul>%3$s</ul>',
'container' => false,
'menu_class' => 'nav',
'list_item_class' => 'nav-item',
'link_class' => 'nav-link',
'menu_id' => 'menu-main-menu'
));

Related

Removing WordPress Wrapper Div When container => false Fails

I'm having troubles removing the WordPress wrapper div from my wp_nav_menu(). I've passed container => false to my menu args but the div keeps displaying. I'm using the following arguments:
$defaults = array(
'container' => false,
'theme_location' => 'menu',
'menu_class' => 'main-nav',
);
wp_nav_menu( $defaults );
I have also declared the menu in my functions.php file.
register_nav_menus( array(
'main-nav' => __( 'Main Nav', 'ldsshop' ),
));
I have used these arguments with previous themes with no problems, but in this instance the wrapper keeps displaying, and I'm at a point where I need some extra eyes and help, no doubt I've missed something.
Thanking you all in advance,
Stu :)
Use container empty like this
'container' => '',
So it will like this
$defaults = array(
'container' => '',
'theme_location' => 'menu',
'menu_class' => 'main-nav',
);
wp_nav_menu( $defaults );
It will work, even it's working on my hand.
Update About Solved This Question
Try to the following using array in wp_nav_menu
wp_nav_menu( array(
'theme_location' => 'menu',
'container' => '',
'menu_class' => 'main-nav'
) );
use same '' about container if false not to work
Here is an article finding some helpful
See more in the codex https://developer.wordpress.org/reference/functions/wp_nav_menu/
In my case "container" => false doesn't work, It only works when you write "items_wrap" => "%3$s" but it removes all wraps including <ul> if you want to remove <div> and have your menu wrapped in <ul> I recommend to do this way
wp_nav_menu(array(
'theme_location' => 'header_menu',
'menu' => 'header_menu',
'items_wrap' => '<ul>%3$s</ul>',
'container' => false,
'menu_class' => 'nav',
'list_item_class' => 'nav-item',
'link_class' => 'nav-link',
'menu_id' => 'menu-main-menu'
));

Wordpress - wp_nav_menu container_class not changing the container class

I am passing the arguments array to the header, like this:
<nav class="header__social-menu">
<?php
$args = array(
'theme_location' => 'social-menu',
'container' => 'ul',
'container_class' => 'header__social-list',
'link_before' => '<li class="header__social-item"><a href="#" class="header__social-link">',
'link_after' => '</a></li>',
);
wp_nav_menu( $args );
?>
</nav>
But the container, which is the ul element, is not getting the class "header__social-list" assigned to it, but getting the class "menu" instead.
Is it possible to actually change the class of the container in order to stick with the BEM methodology?
I was able to solved it by adding another agument, called "menu_class", so the code looks like this now:
<nav class="header__social-menu">
<?php
$args = array(
'theme_location' => 'social-menu',
'container' => 'ul',
'container_class' => 'header__social-list',
'menu_class' => 'header__social-list',
'link_before' => '<li class="header__social-item"><a href="#" class="header__social-link">',
'link_after' => '</a></li>',
);
wp_nav_menu( $args );
?>
</nav>
Not sure if i should leave the "container_class" argument there, but it is working with the "menu_class".
This is what the wordpress documentation says about the container argument for menus:
'container' (string) Whether to wrap the ul, and what to wrap it with.
Default 'div'.
So that's to wrap the already generated ul, and container_class is for that wrapper, not for the ul itself.
But you might want to use items_wrap instead:
'items_wrap' (string) How the list items should be wrapped. Default is
a ul with an id and class. Uses printf() format with numbered
placeholders.
see also https://developer.wordpress.org/reference/functions/wp_nav_menu/
You need to set the first string array as primary that is the default name. Don't change the name because it will not work properly.
register_nav_menus(
array(
'primary' => esc_html__( 'Primary Menu', 'wp' ),
)
);

Adding class to li elements in wp_nav_menu

I have problem with wp_nav_menu in wordpress. I want to make structure of Li elements, where all of them will have class "menu-li". But It doesn't work for me. I have this in function.php file:
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
'secondary-menu' => __( 'Secondary Menu' )
));
Then I created Menu in Wordpress admin panel and now I want to add my menu to my theme.
<?php
$defaults = array(
'theme_location' => 'primary-menu',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu-li',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>
It displays all elemnet as li in ul but there is no class "menu-li". How can I add it to all li elements?
The menu_class parameter of wp_nav_menu() controls the class added to the <ul> wrapper element, rather than the individual <li>'s. To add classes to the menu items, you want to use the nav_menu_css_class filter.
Here's how it works (add this to your theme's functions.php file):
add_filter ( 'nav_menu_css_class', 'so_37823371_menu_item_class', 10, 4 );
function so_37823371_menu_item_class ( $classes, $item, $args, $depth ){
$classes[] = 'menu-li';
return $classes;
}
This will add the menu-li class to every menu item.
You can also do this conditionally based on the $item, $args etc. passed to this filter if you like.
If you need add class in custom menu, use next code:
add_filter('nav_menu_css_class','arg_menu_classes',110,3);
function arg_menu_classes($classes, $item, $args) {
if($args->menu == 'FooterMenu') { // name need menu
$classes[] = 'col-6 col-sm-6'; // add classes
}
return $classes;
}

Where/What is the wordpress function that outputs the menus?

Looking at the Wordpress code I am struggling to find where the menus are been put together, (to be rendered).
For example, if I want to output 'menu-1' where is the function/class that creates the output result?
Does it use a class to do the creation? Does it follow a specific pattern?
Walker_Nav_Menu And wp_nav_menu is behind the wordpress Navigation. According to your requirement you need to customize the wp_nav_menu
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
For adding the custom menu option that allows users to add and organize menus, you'll add this in your function.php
add_theme_support( 'menus' );
And then you can paste this code anywhere you want to display the custom menu
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
the wp_nav_menu is the main function that displays menus on the WordPress page with a few arguments stored as an array. Sort_column instructs WordPress to follow the order in the options, and the container_class :.menu-header is the CSS class to style this menu. For displaying multiple menus, you can specify the id, slug, menu name with $id, $slug, $menu

Adding class to menu_class to wp_nav_menu adds class to div instead of ul

I am very new to wordpress themeing . I am trying to create a Twitter Bootstrap menu to my newly created theme as below in header.php page.
$defaults = array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'navbar-collapse collapse',
'menu_id' => 'navbar',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
With the above codes, I am expecting to add a class to navbar-collapse collapse to ul, but instead it produces HTML as below :
<div class="navbar-collapse collapse"><ul><li class="page_item page-item-11"> etc. How can I add class ul ?
Check you've actually registered 'header-menu' via register_nav_menus.
Removing theme_location => 'header-menu' will resolve the issue until you've registered your navigation ID correctly.
You should have this in your functions.php
register_nav_menus( array(
'header-menu' => __( 'Header Menu', 'domain' ),
) );
Try checking out a function that's already been made like this one. It will create the correct syntax for the menu to work.
Due to the fact that no one solved your problem. I want to provide a solution for future users. The solution is in the container parameter of the wp_nav_menu function.
Documentation:
https://developer.wordpress.org/reference/functions/wp_nav_menu/
container string - Whether to wrap the ul, and what to wrap it with.
Default 'div'.
To make parameter menu_class add it`s valuse to correct element, in your case it is ul element, you have to define container parameter as div, like below. Then parameter container_class will have default class 'menu-{menu slug}-container' because it`s not have any value given. container_id parameter also will be empty becouse there is no value given.
$defaults = array(
'theme_location' => 'header-menu',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_id' => 'navbar',
'menu_class' => 'navbar-collapse collapse',
);
wp_nav_menu( $defaults );
Then menu_class and menu_id parameters will be added to the ul element and ul element will look this <ul id="navbar" class="navbar-collapse collapse">.
In case you don`t want to have div container delete container_class and container_id and leave container parameter with ul value like this:
'theme_location' => 'header-menu',
'container' => 'ul',
'menu_id' => 'navbar',
'menu_class' => 'navbar-collapse collapse',

Resources