How to add class to link in wp_nav_menu?
Thanks to Sergiu Paraschiv comment the issue was in regards of limiting to 1.
Therefore it should be in function.php:
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
UPDATE
There is a better way actually which gives us much more control and the piece of code is provided by Jeff Starr on this post
NOTE: this isn't adding the current class tho
Create your menu on wp, then remember to click the location in the menu editor then in your function you'd do:
// custom menu example @ https://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
$menu_name = 'nav-primary'; // specify custom menu name
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list = '<nav>' ."\n";
$menu_list .= "\t\t\t\t". '<ul>' ."\n";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
}
$menu_list .= "\t\t\t\t". '</ul>' ."\n";
$menu_list .= "\t\t\t". '</nav>' ."\n";
} else {
// $menu_list = '<!-- no list defined -->';
}
echo $menu_list;
}
Finally we can call our menu:
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
The code above is taken from the post linked above, I thought to include this answer as it appears this question has many visits.
UPDATE 2
Another solution would be (maybe the best):
header.php:
<?php
wp_nav_menu( array(
'theme_location' => 'topnav',
'menu' =>'topnav',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarCollapse',
'menu_class' => 'menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>',
'depth' => 0
) );
?>
function.php:
// register the nav
function register_my_menu() {
register_nav_menu('topnav',__( 'topnav' ));
}
add_action( 'init', 'register_my_menu' );
// let's add "*active*" as a class to the li
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
// let's add our custom class to the actual link tag
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'topnav') {
$classes[] = 'nav-link';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
Wordpress Menu - Add class to anchors
You can do what you need with the WP nav_menu_link_attributes
hook:
add_filter( 'nav_menu_link_attributes', function($atts) {
$atts['class'] = "nav-link";
return $atts;
}, 100, 1 );
...or if you don't like closures:
function add_link_atts($atts) {
$atts['class'] = "nav-link";
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');
Filter menu list items
To avoid using the WordPress menu UI to add classes to the menu list items, you can take advantage of the 'nav_menu_css_class' filter:
add_filter( 'nav_menu_css_class', function($classes) {
$classes[] = 'nav-item';
return $classes;
}, 10, 1 );
How to add class to wp_nav_menu() function
You should try and read the documentation for issues like this as the WordPress documentation is extensive and very good.
https://developer.wordpress.org/reference/functions/wp_nav_menu/
To solve this issue, below 'theme_location' => 'top'
add in 'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center'
. So your final code will be:
<div class="top-bar" id="main-menu">
<?php
$args = array(
'theme_location' => 'top',
'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center'
);
?>
<?php wp_nav_menu($args); ?>
</div>
Wordpress add a class to menu link
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
WordPress - How to add class to top level nav links only
The problem is that the primary-menu
is the complete top menu so this can't work for your menu items. Try this instead:
add_filter( 'nav_menu_link_attributes', 'add_class_anchor_nav_primary', 10, 3 );
function add_class_anchor_nav_primary( $atts, $item, $args ) {
if ( (int) $item->menu_item_parent === 0 ) {
$class = 'dropdown submenu';
$atts['class'] = $class;
}
return $atts;
}
This will add your class to all main links excluding the dropdown links. It works because we're checking if the given item has a parent or not. If not (=== 0), we can say, that this is a non-dropdown link. I've tested it and it works.
How to add active class to wp_nav_menu() current menu item (simple way)
Just paste this code into functions.php file:
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class ($classes, $item) {
if (in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
More on wordpress.org:
- Highlight Current Page in WordPress 3.0 Menus
- Adding
.active
class to active menu item
Related Topics
Creating Advanced Search Query With PHP Mysqli
Laravel Print Array in Blade PHP
Telegram Bots - How to Create Reply Menus With Icons Like Mypokerbot
How to Get Multiple Data from Two Different Table from One Database in PHP
Laravel - How to Join 2 Tables from Different Db Connection
Laravel Convert Query MySQL to Model Query
Regex - Exclude "-" Between Numbers
How to Store Values from Foreach Loop into an Array
Using JavaScript History.Back() Fails in Safari .. How to Make It Cross-Browser
How to Have Dynamic Image as CSS Background
How to Restrict User from Downloading or Saving Pdf File
Change Language of Site With a HTML Button
Failed to Open the System Default Web Browser. Is One Installed - Pgadmin4
How to Change the Background Color of Dropdown List in Select Tag
General Error: 1364 Field 'User_Id' Doesn't Have a Default Value