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 .
Related
I currently have a subsite set up with a shared navigation menu from the primary site. I'm using this function to switch to the main site whenever the menu function is called.
global $blog_id;
$current_blog_id = $blog_id;
function theme_nav()
{
switch_to_blog(1);
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="main-menu">%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
switch_to_blog($current_blog_id);
}
this is generally working but i'd like the links in the menu to be relative to the subsite, and not the primary site root. so site.com/subsite/products instead of site.com/products
i thought about writing a js script that updates the links when the page loads to insert the subsite into the link. is there a better way to do this?
Im having problems using the wp_nav_menu() function to get a defined menu and remove the ul and li default classes and replace with entirely custom classes. How can this be achieved?
I hope you're fine. If you look at the source of wp_nav_menu, you see the list of arguments that it accepts:
$defaults = array(
'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>',
'item_spacing' => 'preserve',
'depth' => 0,
'walker' => '',
'theme_location' => '',
);
Given the explanation you provided, i think 'items_wrap' will solve your problem.
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',
anybody knows the blank theme html5 for wordpress? well i'm using this theme and i'm trying to add some style to the current page but i don't know how.
this is the function that the theme has:
function html5blank_nav()
{
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
thank you very much!
See your question is not clear enough!! The above code is for styling the nav menus,
Here you can change the menu class, the container and lot more!!
I want to add text here within the anchor tag of the wordpress menu. So the menu structure would be
<ul>
<li><a href="#">Item1<br>
<span class="sub-text">text here<span></a>
</ul>
The "Item1" and "text here" will be dynamic. That is it can be edited from the wordpress back end.
I am using the wordpress function wp_nav_menu to show the menu. Below is the code.
$defaults = array(
'theme_location' => 'primary',
'menu' => '',
'container' => false,
'container_class' => '',
'container_id' => '',
'menu_class' => 'nav navbar-nav',
'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' => -1,
'walker' => ''
);
wp_nav_menu( $defaults );
Please help.
You need a custom Walker to achieve that:
$walker = new Menu_With_Description;
wp_nav_menu( array(
'theme_location' => 'primary',
'walker' => $walker
) );
Tutorials all over the place on the web, e.g.: http://www.wpbeginner.com/wp-themes/how-to-add-menu-descriptions-in-your-wordpress-themes/