I need to use custom items_wrap format but it seems like it doesn't work at all.
<?php wp_nav_menu( array(
'menu_class' => 'menu',
'menu' => 'mobile-menu',
'theme_location' => 'main-navigation',
'container' => false,
'items_wrap' => '<ul data-role="listview">%3$s</ul>' ) ); ?>
The OUTPUT
<div class="menu">
<ul>
<li class="page_item page-item-2">Sample Page</li>
</ul>
Problem is that in output <ul> doesn't have data-role assigned as it should have.
Anyone have an idea why this function doesn't get the parameter right?
You could try this code:
<ul class="menu">
<?php wp_nav_menu( array(
'menu' => 'mobile-menu',
'theme_location' => 'main-navigation',
'container' => false,
'items_wrap' => '%3$s' ) ); ?>
</ul>
Related
I need the nav menu structure like the following.
<ul class="side-menu-list">
<li>Parent Page 1
<ul>
<li>Traditional Braces</li>
<li>Lingual Braces</li>
<li>Invisalign</li>
<li>Temporary Anchorage Devices</li>
<li>Surgical Orthodontics</li>
<li>TMJ Treatment</li>
<li>All About Retainers</li>
<li>Emergency Treatment</li>
</ul>
</li>
</ul>
<ul class="side-menu-list">
<li>Paent Page 2
<ul>
<li>Early Treatment/Prevention</li>
<li>Two-Phase Treatment</li>
<li>Hometown Smiles Gallery</li>
</ul>
</li>
</ul>
Which means every parent page and its sub pages should be wrapped in a ul. So iam looking for a custom walker menu so that every main menu and its sub menus will be wrapped in a ul tag dynamically.
// Register two menus
// Go to Menus and add menu items to each menu
// call the wp_nav_menu function twice.
// this goes in functions.php
register_nav_menus( array(
'primary' => __( 'Primary', 'text-domain' ),
'secondary' => __( 'Secondary', 'text-domain' )
) );
<ul class="side-menu-list">
<li>Parent Page 1
// display the menu on front end
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_id' => 'primary',
'container_class' => 'primary',
'menu_class' => 'ul-class' ) );
</li>
</ul>
<ul class="side-menu-list">
<li>Parent Page 1
wp_nav_menu(
array(
'theme_location' => 'secondary',
'depth' => 2,
'container' => 'div',
'container_id' => 'secondary',
'container_class' => 'secondary',
'menu_class' => 'ul-class' ) );
</li>
</ul>
I have a problem to set two ul in wp_nav_menu.
i have set like following code in html. i want to set in wp_nav_menu.
my code is.
<div class="collapse navbar-collapse menu-header-menu-container" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Athletes</li>
<li>Coach</li>
<li>Colleges</li>
<li>Contact Us</li>
</ul>
<ul class="user-action hidden-xs">
<li>Seach</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
So anyone can help me how to set two ul in wp_nav_menu.
First thing you need to do is register the 2 menus in the functions.php file.
function register_menus() {
register_nav_menus(
array(
'menu-1' => __('Primary Menu'),
'menu-2' => __('Secondary Menu')
)
);
}
add_action('init', 'register_menus');
Then in the WordPress dashboard under Appearance > Menus create the menus.
Be sure to set the theme locations to 'Primary Menu' and 'Secondary Menu'.
Place the following code where you want the menus to display (most likely header.php).
<?php wp_nav_menu(array('menu' => 'menu-1', 'container' => '<ul>', 'menu_class' => 'nav navbar-nav')); ?>
<?php wp_nav_menu(array('menu' => 'menu-2', 'container' => '<ul>', 'menu_class' => 'user-action hidden-xs')); ?>
If someone else has issues to fetch the right menu, you can try to exchange 'menu' to 'theme_location'.
<?php wp_nav_menu(array('theme_location' => 'menu-1', 'container' => '<ul>', 'menu_class' => 'marquee__inner')); ?>
what i want to achieved is this
<div class="someclass"> // in place of <ul>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
.
.
.
</div>
This is the patter which is used by semantic UI for horizontal menu
I have achieved this much
<div class="ui secondary menu">
Services
Portfolio
Shop
</div>
by using code
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
But i want to add
class="item"
to
Services
Please guide..
thankx
Finally I able to do this..
<div id="menu1" class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
<script>
jQuery( "#menu1 a" ).addClass( "item" );
</script>
You can use 'menu_class'=> 'item'
Example:
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
Read the codex about function wp_nav_menu, you're using it wrong, do something like this:
echo strip_tags(wp_nav_menu(
'items_wrap' => '<div id="%1$s" class="%2$s">%3$s</div>',
'menu_class' => 'myclass ui',
'echo' => false,
), '<a>');
In wordpress admin > appereance > menus, you can define classes for each link. Just make sure you've turned it on at the screen options.
But you can also do something like this to add a class.
Thankx Fermolina for your answer unfortunately it give me this output which dosent work
Code use
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'test-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
OUTPUT no class in
<div class="ui secondary menu">
Home
</div>
I've got a nav function in functions.php:
function html5blank_nav()
{
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => false,
'menu_class' => 'nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
And it's called in header.php with:
<?php html5blank_nav(); ?>
And my output is:
<div class="nav">
<ul>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-4">Test page</li>
</ul>
</div>
But What I was trying to achieve was this structure:
<ul class="nav">
<li>Sample Page</li>
<li>Test page</li>
</ul>
I thought that setting container=false would get rid of the containing divs, and that setting menu_class='nav' would add the nav class to the ul as it states here: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Why isn't it recognising my settings?
from the Codex:
In order to remove navigation container, theme location specified in functions.php and used among arguments in function wp_nav_menu ( eg. 'theme_location' => 'primary-menu' ) must have a menu assigned to it in administration! Otherwise argument 'container' => 'false' is ignored
I have a HTML coded navigation menu which has CSS style and cool animation.
Now i wants to add this CSS and structure in Word Press. I have tried and also used in wp_nav_menu() .But result is so far. How could i use this CSS in Word Press.
CSS also included and working fine if i am using statically navigation HTML.
$defaults = 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 id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
Wants to add this css in Wordpress navigation menu
<ul class="menu">
<li class="current-menu-parent">Home
<ul class="sub-menu">
<li class="current-menu-item">Background Color</li>
<li>Background Color With Fullwidth Slider</li>
<li>Clean Style</li>
<li>Clean Style With Fullwidth Slider</li>
<li>Background Image</li>
</ul>
</li>
<li>Pages
<ul class="sub-menu">
<li>About</li>
<li>Full Width</li>
<li>Gallery</li>
<li>404 Page</li>
<li>Sitemap</li>
</ul>
</li>
</ul>
Is not so dificult to do that. You need to declare the class of the menu in array.
here is an exemple:
<?php $defaults = array(
'theme_location' => '',
'menu' => 'TopMenu',
'container' => 'ul',
'container_class' => 'topmenu-{topmenu slug}-container',
'container_id' => 'topmenu',
'menu_class' => 'topmenu',
'menu_id' => 'topmenu-{topmenu slug}[-{increment}]',
'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' => ''
); ?>
<?php wp_nav_menu( $defaults ); ?>
In this "topmenu" is the css class. I believe that from here you will be able to customize your menu.
Hope it help's you!
If you need a css sample, just let me know!