I'm fairly new to Wordpress and am trying to do something very specific. I am currently using the awesome html5blank to create my custom theme. I am using the native menus for my nav tabs. I am currently using background-image's to make my nav tabs images instead of text but that is posing problems with what I'm trying to achieve w/ css and making it responsive.
I want to be able to add <img> tags( different image for each <li> ) in my <li>'s via HTML.
As far as I've been able to find and read up, I need to create a custom structure in this found in my function.php file?
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' => ''
)
);
}
Please let me know what else I need to provide to make this question make more sense and help you get me on the right track. Thanks in advance.
It does not work that way. There are few options to do it:
Use CSS background. Each menu item will have some shared classes, also a unique class name you can work with, enough for you to add different background image for each. Read the Codex for more.
Well, if you REALLY need to add inline <img>, it doable but I would not recommend. Go to Appearances > Menus, and add a custom link to menu, and insert your <img> tag into the Navigation Label box.
OR simply don't use wp_nav_menu(), hard code your menu instead.
Related
Im starting with wordpress and I have a problem with a menu Im doing. In functions.php, I have this:
register_nav_menus(array(
'principal' => 'principal_bar'
));
Very simple. Now, in my header.php, I have this:
wp_nav_menu(array(
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'theme_location' => 'principal',
'menu_class' => 'nav navbar-nav navbar-right'
));
As you can see, Im (trying) to use bootstrap classes in my menu. The thing is that when I edit my menu in the wordpress visual interface, the menu_class of my menu is removed (in Inspector, the ul ends with no class), and obviously the visual aspect of my menu is totally broken. My answer, Did I miss something? All tutos give the same way to do menus, but mine is not taking the classes at all. Am I doing something wrong here? Or is a problem bootstrap-wordpress? I am really confused right now... Thank you very much for your help...
You missing some properties in you items_wrap, should be:
wp_nav_menu(array(
'container' => false,
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'principal',
'menu_class' => 'nav navbar-nav navbar-right'
));
I'm doing some maintenance on a website. I thought it was easy but I can't display submenu. The costumer said that the template was developed for them so probably the submenu feature was not included in it.
I don't know much php (actually I know very few) and I can't find a solution on google. I can use html and css pretty well to style it but before I need it to display.
here is the code I have in the header.php:
<span id="toggle_nav" class="icon-menu"></span>
<?php wp_nav_menu( array( 'theme_location' => 'main-navigation', 'container' => false, 'menu_id' => 'nav', 'menu_class' => '', 'link_after' => '', 'depth' => 1, 'fallback_cb' => false ) ); ?>
Thanks in advance,
Daniele
The comment from Ash Patel was indeed the right solution:
'depth' => 1
to
'depth' => 0
I'm using a theme and added the polylang plugin to make the site multilingual. And it's quite confusing to make the menu multilingual.
wp_nav_menu( array(
//'theme_location' => 'header-menu',
'theme_location' => '',
'menu' => 'id',
'orderby' => 'menu_order'
));
In my header I have this wp_nav_menu() function. When using this option 'theme_location' => '' the order of the menu is correct but is not switching when clicking on the second language flag. Using this option: 'theme_location' => 'header-menu' changes menu when clicking on the flags but the menu items aren't in the correct order. In the wp dashboard under appearence menus there are two menus and the polylang settings for these seems to be correct. Anyone knows what's causing the problem and how to fix it?
Problem solved. I was using a theme which had this line of code in it's functions.php:
register_nav_menus( array(
'primary' => __( 'Primary Navigation', '<theme_name>' ),
) );
So I had to use:
'theme_location' => 'primary'
in the wp_nav_menu function.
Hi I have a problem with wordpress navigation tools. What I want to do is remove the containing class.
According to the documentation by setting 'containter' => false removes the containing class.
But the problem is when I have done so, nothing happened.
<?php wp_nav_menu( array( 'theme_location' => 'header-menu',
'container' => false
) ); ?>
But when the menu is displayed it is still enclosed inside a tag.
Do yo guys have an idea how to fix it?
I found the problem. I forgot to set Header Menu in the functions.php and in the admin panel as well.
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'footer-menu' => __( 'Footer Menu' ),
)
);
Make sure to use both and that in the admin panel the menus are set to the correct menu container.
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.