Happy Evening, I was trying to filter few default elements of WordPress using wp_nav_menu()
and trying to add element according to my style sheet - please refer the below code details on usage and expected.
Function Call:
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<?php wp_nav_menu(); ?>
</nav>
Current Result:
<div class="menu-backend-menu-container">
<ul id="menu-backend-menu" class="menu">
<li id="menu-item-566" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-529 current_page_item menu-item-566">
<a href="https://www.zony.ooo/users/data/" aria-current="page" data-ps2id-api="true">Data</a>
</li>
<li id="menu-item-571" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-571">
<a href="http://www.zone.ooo/users/blog/" data-ps2id-api="true">Blog</a>
</li>
Expected result
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href="https://www.zony.ooo/users/data/"><i class="mdl-color-text--blue-grey-400 material-icons" activerole="presentation">data</i>Data</a>
<a class="mdl-navigation__link" href="https://www.zony.ooo/users/blog/"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">blog</i>Blog</a>
</nav>
It did try following options but ended with a wrong result. Any help would be grateful.
wp_nav_menu(array( 'menu' => '',
'container' => 'a',
'container_class' => '',
'container_id' => '',
'menu_class' => 'mdl-navigation__link',
'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' => ''
));
You can use walker menu for this purpose. https://developer.wordpress.org/reference/classes/walker_nav_menu/ . For adding classes, you can add it in the walker code.
Remove this :
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<?php wp_nav_menu(); ?>
</nav>
Replace it by :
$defaults = array(
'theme_location' => 'YOUR MENU THEME LOCATION',
'container' => 'nav',
'container_class' => 'demo-navigation mdl-navigation mdl-color--blue-grey-800',
'echo' => false,
'fallback_cb' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo wp_kses( wp_nav_menu( $defaults ), '<nav><a>' );
EDIT
I just saw that you have i
tags with attributes.
You will have to use a walker as suggested before ( OR JS
or jQuery
but this is another scope. )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.