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',
Related
I have built WP templates before but I used to build them from scratch and I didn't have any issues like this. This time I decided to use html5blank boilerplate. Now I have this issue in the wp_nav_menu() where WordPress overrides the attributes I try to add in the items_wrap:
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'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 class="nav navbar-nav">%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
The WordPress docs state that the items_wrap should be assigned properly as <ul id="%1$s" class="%2$s">%3$s</ul>. There's also this filter function below that should supposedly replace the string values but there are no docs that I could find whatsoever that show an example of how do I approach it.
function my_wp_nav_menu_args($args = '')
{
$args['container'] = false;
return $args;
}
Don't know if I got it right – do you want the ul element contain the classes "nav" and "navbar-nav"? Then you only need to change "menu_class" within your array:
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu_class' => 'nav navbar-nav'
)
);
I solved this by removing item_wrap completely from the array and assigning in the menu_class .
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'
));
Working on Wordpress menu: with Bootstrap
My ul li gets wrap within Ul and creates Div.
Screenshot attached:
It seems it automatically adds classes to menu li and and prevents the bootstrap styles and classes
My wp menu function :
/**
* Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
*/
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Try changing in the theme template the nav menu function like this :
<?php
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => '', // <- This empty = no container
'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 );
?>
Source : https://codex.wordpress.org/Function_Reference/wp_nav_menu
Take a look at the container index of the defaults array.
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
I'm working on a new wordpress site and I'm building it with the Foundation framework. I'd like to add the class "main" to the links in the navigation that is built with wp_nav_menu. Eventually, I'll probably want to add the class "has-flyout" to others. Any idea on how to do this? I'm assuming I need to extend Walker (or can I do this with 'items_wrap'?), but that seems like overkill.
Currently, I have:
wp_nav_menu( array(
'theme_location' => 'primary_navigation',
'container' =>false,
'menu_class' => '',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'items_wrap' => '<ul class="nav-bar">%3$s</ul>'
));
You could use:
wp_nav_menu( array(
...
'menu_class' => 'main-menu',
...
And in your CSS (if that is what you want) access it like so:
ul.main-menu li { background: white; }
To add your "flyout" list-items maybe you could look into superfish? That system automatically adds "sf-with-ul" classes to list-items containing dropdowns.