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
Related
I want to add a div between the links in my Wordpress menu (not on the ends, just in between). I am using the following code to bring in my menu:
html
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
functions.php
/* Register 'primary' navigation */
function wptutsplus_register_theme_menu() {
register_nav_menu( 'primary', 'Main Navigation Menu' );
}
add_action( 'init', 'wptutsplus_register_theme_menu' );
The output I'm looking for is the following:
link 1
<div class="divider"></div>
link 2
<div class="divider"></div>
link 2
This is how you get result https://www.screencast.com/t/APLrCeHCxLU.
You can try following code:-
wp_nav_menu( array( 'container_class' => 'main-nav','theme_location' => 'primary','after' => '<div class="divider"></div>') ) );
I do have two menus in my Wordpress-Page which are called
Mainmenu(Primary Menu)
Footer
I associated the "Mainmenu" to the header of the website. I want the footer of the Wordpresspage to look exactly like the header, only difference should be the Links in it. It should not be taken from the "Mainmenu", but from the menu called "Footer". The function of the Header looks like this:
echo '<nav id="rtp-primary-menu" role="navigation" class="rtp-nav-wrapper' . apply_filters( 'rtp_mobile_nav_support', ' rtp-mobile-nav' ) . '">';
rtp_hook_begin_primary_menu();
/* Call wp_nav_menu() for Wordpress Navigaton with fallback wp_list_pages() if menu not set in admin panel */
if ( function_exists( 'wp_nav_menu' ) && has_nav_menu( 'primary' ) ) {
wp_nav_menu( array( 'container' => '', 'menu_class' => 'menu rtp-nav-container clearfix', 'menu_id' => 'rtp-nav-menu', 'theme_location' => 'primary', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) );
} else {
echo '<ul id="rtp-nav-menu" class="menu rtp-nav-container clearfix">';
wp_list_pages( array( 'title_li' => '', 'sort_column' => 'menu_order', 'number' => '5', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) );
echo '</ul>';
}
rtp_hook_end_primary_menu();
echo '</nav>';
The Theme i am using is rtPanel. Can anyone tell me how i simply can change this function in the way that it will load its content from the Menu called "Footer" and not from the Primary Menu which is "Mainmenu"?
Please dont worry about the CSS and everything, i will take care about this. I really just want to now how i have to change this function to load the "Footer"-Menu in it and not the Primary-Menu(Mainmenu).
As an Attachment how it look in the menu:
Thank you very much advance!
This is really simple, in fact when you start developing wordpress theme this might be one of the very first items you need to learn.
You need to register a menu location for footer seciton. You can learn more in codex
register_nav_menu( 'footer', __( 'Footer Menu', 'theme-slug' ) );
This will register the menu for you. Since you already have the menu location just find the location parameter. We're going to use that in the following code. For now assume it 'footer' like the above one. And the code for the footer menu according to your referenced code-
echo '<nav id="rtp-primary-menu" role="navigation" class="rtp-nav-wrapper' . apply_filters( 'rtp_mobile_nav_support', ' rtp-mobile-nav' ) . '">';
//rtp_hook_begin_primary_menu(); // we better disable this hook as it intends for the header primary menu
/* Call wp_nav_menu() for Wordpress Navigaton with fallback wp_list_pages() if menu not set in admin panel */
if ( function_exists( 'wp_nav_menu' ) ) {
wp_nav_menu( array( 'container' => '', 'menu_class' => 'menu rtp-nav-container clearfix', 'menu_id' => 'rtp-nav-menu', 'theme_location' => 'footer', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) );
} else {
echo '<ul id="rtp-nav-menu" class="menu rtp-nav-container clearfix">';
wp_list_pages( array( 'title_li' => '', 'sort_column' => 'menu_order', 'number' => '5', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) );
echo '</ul>';
}
//rtp_hook_end_primary_menu(); // we better disable this hook as it intends for the header primary menu
echo '</nav>';
Notice the theme_location parameter in wp_nav_menu() function? This is the one which plays behind to get you menu correctly.
Now play around with CSS and you might get what you intend.
Hope this might help you.
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 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' => ''
)
);
}
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