I am trying to alter the wp_nav_menu to output the html like the below example.
<div class="menu">
<ul id="menu">
The original output
<div class="menu">
<ul>
I cant do it with jQuery or javascript, Its have to be php code
wp_nav_menu accepts the key menu_id in its options array. Set it to the ID you want, e.g:
wp_nav_menu(array(
'menu_id' => 'menu'
));
You can explicitly set the id in the html by defining items_wrap, and make sure walker is not set to some custom function:
wp_nav_menu( array(
'theme_location' => 'main-menu'
'items_wrap' => '<ul id="menu" class="%2$s">%3$s</ul>',
'walker' => '',
));
This is incomplete info; 1st attempt to use:
'fallback_cb' => false,
If you menu doesn't appear, that means you have not created any menu and that means its taking the fallback function take care for that.
So go and create a menu first. :D
Giving the ul an id that's the same as the class of its container is asking for trouble, but this should work:
<?php
function showMenu(){
$args = array(
'menu_id' => 'menu'
);
wp_nav_menu($args);
}
showMenu();
?>
The WordPress Codex has a page detailing all options for the wp_nav_menu() function: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Related
When I try to add a new menu to template file, a new div will comes automatically, I dont konw how this comes. Now I want to get without this div.
HTML :
<nav class="clear-after" id="header-menu">
<!-- __toggle -->
<div id="main-menu-toggle"></div>
<!-- __level 1 -->
<div class="menu">
<ul>
<li class="page_item page-item-22">Blog</li>
<li class="page_item page-item-8 page_item_has_children">Company</li>
<li class="page_item page-item-20">Contact</li>
<li class="page_item page-item-6 current_page_item">Home</li>
<li class="page_item page-item-18">Services</li>
</ul>
</div>
</nav>
PHP CODE :
<nav id="header-menu" class="clear-after">
<!-- __toggle -->
<div id="main-menu-toggle"></div>
<!-- __level 1 -->
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container'=>'',
'container_class' => '',
'items_wrap'=>'%3$s',
'menu_id' => 'main-menu'
));
?>
</nav>
I want to get like below. need to add a ID & Class and remove the div
<div class="menu">
How can i solve this...
The actual html output contains items with the page_item class. This means Wordpress shows the page fallback menu. The fallback menu contains <div class="menu"> by default in the output.
See the 'fallback_cb' => 'wp_page_menu', option in the default settings from the Wordpress reference. Setting this option to false will disable the fallback menu, but you still need a menu set up in the Wordpress backend.
To fix this, just add a menu in the Wordpress backend via "Appearance > Menu's" and be sure to check the box containing the theme location (in your case probably "Main menu") while you do that. Wordpress then won't use the fallback menu anymore, and your options will apply.
You can recognize the correct menu in the html output by the class menu-item being added to the menu items instead of page_item.
Probably you can try this -
$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 );
please check more about wp_nav_menu on wordpress site
You'll need this.
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => 'div',
'container_class' => 'menu',
'items_wrap' => '<ul>%3$s</ul>'
));
Well, the question is TOO OLD, but that may be of help to someone else if he search for a way to remove the extra DIV (like me).
The solution is the 'fallback_cb' argument. When no menu is specified for that theme location, the fallback function gets called. Then, probably the 'container' argument doesn't exist for that callback function or it isn't passed, but this results in an EXTRA DIV.
So the solution in that case would be to make 'fallback_cb' empty string and force the admin to create and associate a menu to that 'theme_location'.
I use WordPress 4.1.1 and want to apply custom CSS class to the root ul element. To render my menu I use wp_nav_menu function:
<?php wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'my-menu')); ?>
According to the Codex, I use menu_class option to customize ul class. Unfortunately, I have the following markup:
<div class="my-menu"><ul>.....</ul></div>
The root ul element does not have my-menu class.
I like to configure wp_nav_menu() to only output the li elements, allowing me to put any markup I need on the ul
<ul class="my-menu">
<?php
$args = array(
'menu' => 'top-menu',
'container' => false,
'items_wrap' => '%3$s'
);
wp_nav_menu($args);
?>
</ul>
are there any chances to make output of wp_nav_menu look like:
<ul class="..." data-uk-nav="">?
Whole thing is about adding that data-uk-nav filed to <ul> element, but I can't figure it out.
In WordPress, the menu is created by calling wp_nav_menu. wp_nav_menu, has lots of parameters, one of which is the wrapper for the menu.
$args= array(
'items_wrap' => '<ul id="%1$s" class="%2$s" data-uk-nav="">%3$s</ul>',
...
);
wp_nav_menu( $args );
Where the items_wrap value is just the default with your "data-uk-nav" attribute added.
This will do the trick:
<?php wp_nav_menu( array( 'items_wrap' => '<ul id="%1$s" class="%2$s" data-uk-nav="">%3$s</ul>' ) ); ?>
http://codex.wordpress.org/Function_Reference/wp_nav_menu
I have been trying to theme my navigation to use the twitter bootstrap. I want it to look like the demo example of a fixed top banner as seen here http://getbootstrap.com/examples/navbar-fixed-top/
I have got it working but I do not like the way I have got it working!
wp_nav_menu(
array(
'container_class' => 'main-nav navbar-collapse collapse',
'theme_location' => 'primary',
)
);
The code above builds my navigation, as you can see besides the default I have added navbar-collapse and collapse so it styles it according to bootstrap. This is not really the issue. The issue is when this piece of code then generates the menu I do not know how to add a class to the UL it creates so below is how I have done it.
$(document).ready(function(){
if($("#menu-menu-1").length !== 0){
$(".menu").addClass("nav navbar-nav");
} else {
alert("no navigation system");
}
});
This works by detecting the UL when the code has made it because it has an id of #menu-menu-1 then it adds the necessary classes and it all works.
Finally the question!
Is there a way to do this more efficiently because this method is very Quick Fix style and doesn't seem like a trustworthy permanent method. the alert was just there for testing purposes so I knew if the script was running
wp_nav_menu() has options for both menu_id and menu_class. To add both to your menu, you would do something like the following:
$menu_args = array(
'theme_location' => 'primary',
'container_class' => 'main-nav navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'menu-menu-1'
);
wp_nav_menu( $menu_args );
I need your help. I need to add a specific class on the link that wordpress generates in the menu.
What should I edit?
The HTML output in my case is:
<nav class="nav" role="navigation">
<ul>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8">Sample Page</li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9">Prova sample</li>
</ul></nav
the code in the header file that generate the menu is:
<!-- nav -->
<nav class="nav" role="navigation">
<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->
You can do it through admin panel also
In Appearance > Menus, click the Screen Options tab
Under Show advanced menu properties, check CSS Classes
Now expand any menu item to reveal the CSS Classes (optional) text
input.
Enter your class name and save your menu to apply the class to the
menu item
http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item
Adds a class <a class=>
https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes
function add_specific_menu_location_atts( $atts, $item, $args ) {
// check if the item is in the primary menu
if( $args->menu == 'primary' ) {
// add the desired attributes:
$atts['class'] = 'menu-link-class';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );
After creating some WordPress sites based on the Bootstrap framework, i've come up with a solution of easily manipulating the WordPress navigation output by initializing the classes you want. This will make sure your enduser will not be needed to add all the custom classes when the client add's a new menu item.
Maybe it could help someone;
https://github.com/nickkuijpers/WordPress-Extended-Bootstrap-Nav-Walker
Try edit html5blank_nav() function, in functions.php file
// HTML5 Blank navigation
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' => ''
)
);
}