How to add Class in
using wp_nav_menu() in Wordpress?

Question

I am using wp_nav_menu($args) and I want to add my_own_class CSS classname to the <li> element.

I'd like to get the following result:

<li class='my_own_class'><a href=''>Link</a>

How to do that?

This function is very well documented, but it appears a lot easier to add a class to the ul or wrap the link content with something and change your CSS accordingly (custom walker is you alternative): http://codex.wordpress.org/Function_Reference/wp_nav_menu — C. E., Jan 22 '13 at 18:10
Or..you could create your own Menu Walker ( [Codex](https://developer.wordpress.org/reference/classes/walker_nav_menu/) ) and use it in your `wp_nav_menu()` function.. — Erenor Paz, Apr 25 '18 at 09:21

Zunan · Answer 1 · 2019-11-07T14:33:13.100

170

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);

edited Nov 07 '19 at 14:33

answered Aug 03 '18 at 04:34

Zunan

1,935
1
7
11

6

Nice solution. If I was the OP, I would have accepted this as the answer. – Peyman Mohamadpour Jan 11 '19 at 19:01
1

Best solution IMO, generic and clean – Sogeking May 08 '19 at 10:29
3

Best solution, but I need to modify it to avoid an error "Undefined property: stdClass::$item_class" **Solution**: if(isset($args->item_class)) { ...etc – Stuart Cusack Aug 09 '19 at 11:11
1

what is the function of 1 and 3 argument? Please Explain. – Mirajul Momin Jul 02 '20 at 05:26
1 is the priority order. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action. 3 is the number of arguments the function accepts. On that case, the filter will accept $classes, $items and $args arguments. Please read https://developer.wordpress.org/reference/functions/add_filter/ for more information – Zunan Jul 02 '20 at 05:59
1

This didn't work for me. Instead of `isset($args->add_li_class)` I had to add `array_key_exists('add_li_class', $args)`. And for `$classes[] = $args->add_li_class;` I had to add `$classes[] = $args['add_li_class'];`. – SplitterAlex Feb 16 '21 at 08:35

score 76 · Answer 2 · edited Apr 26 '18 at 20:26

76

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/

edited Apr 26 '18 at 20:26

allicarn

2,859
2
28
47

answered Sep 07 '16 at 13:25

Andres F Garcia

6,795
1
14
9

7

I know this answer was published much later than the chosen one, but I feel this should be marked as the correct answer as it does exactly what the question asked. – Richard Hedges Feb 07 '17 at 15:37
I couldn't get this to work, directly copied into my functions.php and it doesn't do anything. – Spencer Shattuck Apr 05 '18 at 07:50
1

@SpencerShattuck do you have a menu location 'secondary' in your theme? You may also need something like register_nav_menus( array( 'primary' => __( 'Primary Menu' ), 'secondary' => __( 'Secondary Menu' ) ) ); – Andres F Garcia Apr 12 '18 at 15:08
I found a solution that worked for me at: https://github.com/wp-bootstrap/wp-bootstrap-navwalker – Spencer Shattuck Apr 12 '18 at 17:14

score 68 · Answer 3 · edited Apr 26 '18 at 20:30

68

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
make checked CSS CLASSES, then you will see CSS Classes (optional) field in each menu link.

edited Apr 26 '18 at 20:30

Samvel Aleqsanyan

2,812
4
20
28

answered Jun 19 '13 at 11:42

Rameez SOOMRO

1,529
15
24

1

This is the answer OP. – samuelkobe Apr 30 '18 at 21:21
7

this has to be done by end user. not a solution to implement in theme. – user1447420 Oct 01 '19 at 08:32
1

For dev it's the best and easy one as if they are developing static themes. – msz Oct 07 '20 at 14:32
1

for huge menus, this is not a practical solution – th3pirat3 Apr 11 '22 at 13:04

score 17 · Answer 4 · edited Apr 26 '18 at 20:32

17

Adding Class to <li> tag without editing functions.php file:

Go to Appearance -> Menu -> Screen Options -> CSS Classes
You will get CSS Class option enabled in Menu Items Window

edited Apr 26 '18 at 20:32

Samvel Aleqsanyan

2,812
4
20
28

answered Apr 13 '18 at 04:03

Trupti

627
5
9

Regolith · Answer 5 · 2019-05-15T04:47:40.630

15

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"; 
}

edited May 15 '19 at 04:47

answered Jul 06 '18 at 11:51

Regolith

2,944
9
33
50

But how to we target specific menus with this approach. I have a menu called main-menu and another called footer-menu. – klewis Jan 08 '19 at 04:24
3

try wrapping `$classes[] = "nav-item";` with `if ( 'main-menu' === $args->theme_location ) { $classes[] = "nav-item"; }` – Regolith Jan 08 '19 at 05:52

score 6 · Answer 6 · edited Apr 26 '18 at 20:35

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

score 3 · Answer 7 · answered Jan 04 '18 at 20:14

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);

score 3 · Answer 8 · edited Jan 05 '21 at 20:21

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;
    }
}

score 2 · Answer 9 · edited Feb 21 '18 at 16:45

<?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
                            )
                    )
            );
?>

score 2 · Answer 10 · answered Mar 16 '22 at 20:21

You could simply use wp_nav_menu_items to Filters the HTML list content for navigation menus.

Display nav menu

wp_nav_menu( array(
   'theme_location' => 'parimary',
   'container' => 'ul',
   'menu_class'=> 'nav col-12 col-md-auto mb-2 justify-content-center mb-md-0',
   'add_li_class'  => 'your-class-name1 your-class-name-2',
) );

Menu Registration

function thesportworship_register_menus(){
    register_nav_menus( array(
        'primary'  => __( 'Main Menu', 'thesportworship' ),
    ) );
}
add_action( 'after_setup_theme', 'thesportworship_register_menus', 0 );

Apply filter

function add_additional_class($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', 1, 3);

score 0 · Answer 11 · edited Jun 13 '19 at 16:03

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);

score 0 · Answer 12 · answered Jun 07 '21 at 06:10

// Remove translation from Main Menu

function wpdocs_channel_nav_class($classes, $item, $args){
{

if ('primary' === $args->theme_location) {
    $classes[] = "notranslate";
}
    return $classes;
}
add_filter('nav_menu_css_class', 'wpdocs_channel_nav_class', 10, 4);

This is how you easily add the new class to existing class array of you Menu wrapp

score 0 · Answer 13 · answered Dec 08 '21 at 17:18

This is how I added the MainMenu of the WordPress and class to li.

<?php
        $defaults = array( 'menu' => 'mainmenu', 
        'container' => false, 
        'fallback_cb' => 'wp_page_menu', 
        'items_wrap' => '<ul class="navbar-nav" id="myTab">%3$s</ul>', 
        'add_li_class'  => 'nav-item',
       'theme_location' => 'mainmenu' );
        wp_nav_menu( $defaults ); ?>

Use this code in functions.php

function li_new_class($classes, $item, $args) {
if(isset($args->add_li_class)) {
    $classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_li_class', 'li_new_class', 1, 3);

score 0 · Answer 14 · answered Feb 21 '22 at 17:05

This is a very simple way to call "li" calss and "any class" replace easily. Just follow the instructions.

Use this code in the nav area.

<?php
            $consult_menu = wp_nav_menu(array(
                    'theme_location' => 'topmenu',
                    'menu_id' => 'menu',
                    'menu_class' => 'navbar-nav m-auto',
                    'echo' => false
                )
            );
            $consult_menu = str_replace('menu-item', 'nav-item', $consult_menu);
            echo $consult_menu;
            ?>

Then inspect your code on the browser. find wp default class and than replace "str_replace("default_class_here","new_li_class_here",$consult_menu); | Note: $consult_menu here is my theme name, you can use any name here.

Ennui · Accepted Answer · 2018-01-18T18:02:24.237

-26

You can't add a class directly to the LIs very easily, but is there any reason not to target them in a slightly different but equally specific way (by their parent ul)?

You can set the class or ID of the menu with the menu_class and menu_id parameters (affixed to the UL parent of the LIs) and then target the li's via CSS that way, like so:

<?php wp_nav_menu('menu_id=mymenu'); ?>

And for CSS:

ul#mymenu li {
    /* your styles here */
}

Edit: At the time of writing in 2013 this was the easiest way to add it, but updates since then have added the feature to add CSS classes directly in the admin navigation editor. See more recent answers for details.

edited Jan 18 '18 at 18:02

answered Jan 22 '13 at 20:41

Ennui

10,102
3
35
42

5

While I appreciate the attempt to propose a solution this doesn't answer the question. In my case, for example, I need to apply a Bootstrap 4 "col" class. – Spencer Hill Mar 24 '17 at 20:19
The easiest thing to do is use JS. Otherwise you need to add a filter via PHP that modifies the core function as detailed in one of the other answers. – Ennui Mar 30 '17 at 17:26
I know this is old, but it's equally unhelpful in my situation and doesn't address the original question. In my situation, I'm trying to target a menu item by name, within a network install where the menu list item ID's vary between sites. – Mike Jan 04 '18 at 19:53
2

This answer is incorrect - see the other upvoted answers for alternative ways to handle this. – Tim Malone Jan 15 '18 at 05:22
This might not be the best way to solve the problem, but its a perfectly valid answer. There are almost always multiple ways to solve any problem and every potential solution has pros and cons. I'm not sure why this answer is getting so much hate. – Kirkland Sep 12 '19 at 17:21

How to add Class in
using wp_nav_menu() in Wordpress?

15 Answers15

Linked

How to add Class in using wp_nav_menu() in Wordpress?

15 Answers15

Linked

How to add Class in
using wp_nav_menu() in Wordpress?