I am using wp_nav_menu($args)
and I want to add my_own_class
CSS classname to the <li>
element for getting the following result:
<li class='my_own_class'><a href=''>Link</a>
How to do that?
This question is related to
wordpress
I added a class to easily implement menu arguments. So you can customize and include in your function like this:
include_once get_template_directory() . DIRECTORY_SEPARATOR . "your-directory" . DIRECTORY_SEPARATOR . "Menu.php";
<?php $menu = (new Menu('your-theme-location'))
->setMenuClass('your-menu')
->setMenuID('your-menu-id')
->setListClass('your-menu-class')
->setLinkClass('your-menu-link anchor') ?>
// Print your menu
<?php $menu->showMenu() ?>
<?php
class Menu
{
private $args = [
'theme_location' => '',
'container' => '',
'menu_id' => '',
'menu_class' => '',
'add_li_class' => '',
'link_class' => ''
];
public function __construct($themeLocation)
{
add_filter('nav_menu_css_class', [$this,'add_additional_class_on_li'], 1, 3);
add_filter( 'nav_menu_link_attributes', [$this,'add_menu_link_class'], 1, 3 );
$this->args['theme_location'] = $themeLocation;
}
public function wrapWithTag($tagName){
$this->args['container'] = $tagName;
return $this;
}
public function setMenuID($id)
{
$this->args['menu_id'] = $id;
return $this;
}
public function setMenuClass($class)
{
$this->args['menu_class'] = $class;
return $this;
}
public function setListClass($class)
{
$this->args['add_li_class'] = $class;
return $this;
}
public function setLinkClass($class)
{
$this->args['link_class'] = $class;
return $this;
}
public function showMenu()
{
return wp_nav_menu($this->args);
}
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
}
How about just using str_replace
function, if you just want to "Add Classes":
<?php
echo str_replace( '<li class="', '<li class="myclass ',
wp_nav_menu(
array(
'theme_location' => 'main_menu',
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 1,
'echo' => false
)
)
);
?>
Tough it is a quick fix for one-level menus or the menus that you want to add Classes to all of <li>
elements and is not recommended for more complex menus
The correct one for me is the Zuan solution. Be aware to add isset to $args->add_li_class
, however you got Notice: Undefined property: stdClass::$add_li_class
if you haven't set the property in all yours wp_nav_menu()
functions.
This is the function that worked for me:
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
use this filter nav_menu_css_class
as shown below
function add_classes_on_li($classes, $item, $args) {
$classes[] = 'nav-item';
return $classes;
}
add_filter('nav_menu_css_class','add_classes_on_li',1,3);
UPDATE
To use this filter with specific menu
if ( 'main-menu' === $args->theme_location ) { //replace main-menu with your menu
$classes[] = "nav-item";
}
Without walker menu
it's not possible to directly add it. You can, however, add it by javascript.
$('#menu > li').addClass('class_name');
None of these responses really seem to answer the question. Here's something similar to what I'm utilizing on a site of mine by targeting a menu item by its title/name:
function add_class_to_menu_item($sorted_menu_objects, $args) {
$theme_location = 'primary_menu'; // Name, ID, or Slug of the target menu location
$target_menu_title = 'Link'; // Name/Title of the menu item you want to target
$class_to_add = 'my_own_class'; // Class you want to add
if ($args->theme_location == $theme_location) {
foreach ($sorted_menu_objects as $key => $menu_object) {
if ($menu_object->title == $target_menu_title) {
$menu_object->classes[] = $class_to_add;
break; // Optional. Leave if you're only targeting one specific menu item
}
}
}
return $sorted_menu_objects;
}
add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2);
You can add a filter for the nav_menu_css_class
action in your functions.php file.
Example:
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'secondary') {
$classes[] = 'list-inline-item';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
Docs: https://developer.wordpress.org/reference/hooks/nav_menu_css_class/
<?php
echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">',
wp_nav_menu(
array(
'menu' => $nav_menu,
'container' => false,
'container_class' => false,
'menu_class' => false,
'items_wrap' => '%3$s',
'depth' => 1,
'echo' => false
)
)
);
?>
No need to create custom walker. Just use additional argument and set filter for nav_menu_css_class.
For example:
$args = array(
'container' => '',
'theme_location'=> 'your-theme-loc',
'depth' => 1,
'fallback_cb' => false,
'add_li_class' => 'your-class-name1 your-class-name-2'
);
wp_nav_menu($args);
Notice the new 'add_li_class' argument.
And set the filter on functions.php
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
HERE WordPress add custom class in wp_nav_menu links
OR
you can add class <li class='my_own_class'><a href=''>Link</a></li>
from admin panel:
Go to YOURSITEURL/wp-admin/nav-menus.php
open SCREEN OPTIONS
CSS CLASSES
, then you will see CSS Classes (optional)
field in each menu link.Source: Stackoverflow.com