How to add Class in li 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  lt li gt  element for getting the following result    lt li class  my own class  gt  lt a href    gt Link lt  a gt    How to do that

User · Answer

Adding Class to  lt li gt  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

User · Answer

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- gt theme location     theme location            foreach   sorted menu objects as  key   gt   menu object                if   menu object- gt title     target menu title                     menu object- gt 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

User · Answer

No need to create custom walker  Just use additional argument and set filter for nav menu css class   For example    args   array       container        gt           theme location   gt   your-theme-loc        depth            gt  1       fallback cb      gt  false       add li class     gt   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- gt add li class              classes      args- gt add li class            return  classes    add filter  nav menu css class    add additional class on li   1  3

User · Answer

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    lt  php wp nav menu  menu id mymenu      gt    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

User · Answer

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- gt 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

User · Answer

Without walker menu it s not possible to directly add it  You can  however  add it by javascript        menu  gt  li   addClass  class name

User · Answer

How about just using str replace function  if you just want to  Add Classes      lt  php     echo str replace    lt li class       lt li class  myclass            wp nav menu              array                   theme location       gt   main menu                    container            gt  false                   items wrap           gt    lt ul gt  3 s lt  ul gt                     depth                gt  1                   echo                 gt  false                                  gt    Tough it is a quick fix for one-level menus or the menus that you want to add Classes to all of  lt li gt  elements and is not recommended for more complex menus

User · Answer

HERE WordPress add custom class in wp nav menu links  OR  you can add class   lt li class  my own class  gt  lt a href    gt Link lt  a gt  lt  li gt   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

User · Answer

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- gt theme location       replace main-menu with your menu      classes      nav-item

User · Answer

The correct one for me is the Zuan solution  Be aware to add isset to  args- gt 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- gt add li class            classes      args- gt add li class            return  classes    add filter  nav menu css class    add additional class on li   1  3

User · Answer

lt  php     echo preg replace     lt li   gt    gt       lt li class  col-sm-4  gt                wp nav menu                      array                           menu    gt   nav menu                            container     gt  false                           container class      gt  false                           menu class           gt  false                           items wrap           gt    3 s                                                depth                gt  1                                               echo                 gt  false                                                                      gt

User · Answer

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    quot your-directory quot    DIRECTORY SEPARATOR    quot Menu php quot     lt  php  menu    new Menu  your-theme-location                - gt setMenuClass  your-menu               - gt setMenuID  your-menu-id               - gt setListClass  your-menu-class               - gt setLinkClass  your-menu-link anchor     gt                      Print your menu              lt  php  menu- gt showMenu     gt    lt  php  class Menu       private  args              theme location    gt               container    gt               menu id    gt               menu class    gt               add li class    gt               link class    gt                 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- gt args  theme location      themeLocation             public function wrapWithTag  tagName            this- gt args  container      tagName          return  this             public function setMenuID  id                 this- gt args  menu id      id          return  this             public function setMenuClass  class                 this- gt args  menu class      class          return  this             public function setListClass  class                 this- gt args  add li class      class          return  this             public function setLinkClass  class                 this- gt args  link class      class          return  this             public function showMenu                 return wp nav menu  this- gt args              function add additional class on li  classes   item   args            if isset  args- gt add li class                  classes      args- gt add li class                    return  classes             function add menu link class   atts   item   args             if  property exists  args   link class                   atts  class      args- gt link class                    return  atts

[wordpress] How to add Class in <li> using wp_nav_menu() in Wordpress?

Examples related to wordpress