Wordpress add a class to menu link - php

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' => ''
)
);
}

Related

Super Fish Menu in wordpress

I have made theme in WordPress where I am using Super Fish menu problem is it is working perfectly but when I make it responsive to mobile view it disappear, but on html it is working perfectly. I am using following codes. I also tried bootstrap_navwalker but I could not manage to put data-type in my <ul>.
if ( function_exists('wp_nav_menu') ) {
wp_nav_menu( array(
'theme_location' => 'primary',
'sort_column' => 'menu_order',
'menu_class' => 'sf-menu',
'fallback_cb' => 'default_menu'
));
}
Following is html code which is working perfectly good.
<nav class="nav">
<!--Sf-menu-->
<ul class="sf-menu" data-type="navbar">
<li>
Home
</li>
<li class="active">
About
<ul>
<li>
News
</li>
<li>
</ul>
</li>
</ul>
<!--End Sf-menu-->
</nav>
I checked many posts even some here but all talk about putting in wordpress but now about making it responsive even some tutorials also show how to put on wordpress but not how to make mobile menu. Thanks for help
After playing a lot with nav_walker got solution from other post where he used simple 'item-wrap' to wrap and change ul and add data-type=navbar attribute. Now it is working perfectly. Thank you very much for you guys help.
if ( function_exists('wp_nav_menu') ) {
wp_nav_menu( array(
'theme_location' => 'primary',
'sort_column' => 'menu_order',
'items_wrap' => '<ul id="%1$s" class="%2$s sf-menu" data-type="navbar" >%3$s</ul>',
'fallback_cb' => 'default_menu'
));
}
In items_wrap I added my data-type="navbar" so all is working perfectly.

Font awesome with wp_nav_menu

I'm trying to take this code from a html site and put it into my theme via the wp_nav_menu function:
<div class="bottom">
<!-- Social Icons -->
<ul class="icons">
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Github</span></li>
<li><span class="label">Dribbble</span></li>
<li><span class="label">Email</span></li>
</ul>
So far I have the written text displaying in the right place but I'm unable to get the classes to display the actual icon instead of text. I would like it to look exactly as the code that is pasted above. Here is the current function I'm using.
<div class="bottom">
<?php if ( has_nav_menu( 'social-media' ) ) {
wp_nav_menu(
array(
'theme_location' => 'social-media',
'container' => 'false',
'container_id' => '',
'container_class' => '',
'menu_class' => 'icons',
'depth' => 1,
'fallback_cb' => '',
)
);
}
?>
</div>
I greatly appreciate any help you can provide.

Wordpress wp_nav_menu coming extra div tag

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'.

Wordpress Change how Navigation Menu Renders

I need to add a P tag surrounding the menu items text, in between the A tags in wordpress.
It currently renders like this:
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I need it like this:
<div class="menu">
<ul>
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p></li>
</ul>
</div>
What file do I edit to do this?
Quick Fix:
1.) Under Appearance, select Menus.
2.) Change the Navigation Label to be: <p>LABEL</p>
Permanent fix:
Depending on your theme this will vary...
1.) head over to Appearance, select editor and scroll down untill you find Header (header.php)
2.) find this code:
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
'menu_class' => 'nav-menu',
'items_wrap' => '<ul id="top-navigation" class="left">%3$s</ul>',
'container' => false,
'fallback_cb' => 'codon_link_to_menu_editor',
)
);
?>
and change it to:
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
'menu_class' => 'nav-menu',
'items_wrap' => '<ul id="top-navigation" class="left"><p>%3$s</p></ul>',
'container' => false,
'fallback_cb' => 'codon_link_to_menu_editor',
)
);
?>
Not sure if this works for you, it worked for me when using the theme "codon"

Wordpress: add custom ID to ul in wp_nav_menu

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

Categories