wp nav menu change sub-menu class name

Question

Is there a way to change the child  lt ul class  sub-menu  gt  generated by WordPress itself to a custom class name   I know the parent  lt ul gt  you can remove or change the name with  menu class    gt   newname    I couldn t find the answer  Itried  submenu class    gt   customname   It seems logic to me  but obviously that is no the right one   any ideas

User · Answer

You can just use a Hook  add filter   nav menu submenu css class    some function   10  3    function some function   classes   args   depth        foreach    classes as  key   gt   class         if    class     sub-menu               classes   key      my-sub-menu            return  classes      where    classes array  - The CSS classes that are applied to the menu  lt ul gt  element   args stdClass  - An object of wp nav menu   arguments   depth int  - Depth of menu item  Used for padding

User · Answer

This is an old question and I m not sure if the solution I m going to mention was available by the time you asked  but I think it s worth mentioning  You can achieve what you want by adding a filter to nav menu submenu css class  See the example below - you can replace my-new-submenu-class by the class es  you want   function my nav menu submenu css class   classes          classes      my-new-submenu-class       return  classes    add filter   nav menu submenu css class    my nav menu submenu css class

User · Answer

To change the default  sub-menu  class name  there is simple way  You can just change it in wordpress file   location    www project name wp-includes nav-menu-template php   open this file and at line number 49  change the name of sub-menu class with your custom class   Or you can also add your custom class next to sub-menu   Done   It worked for me I used wordpress-4 4 1

User · Answer

Here s an update to what Richard did that adds a  depth  indicator  The output is level-0  level-1  level-2  etc    class UL Class Walker extends Walker Nav Menu     function start lvl  amp  output   depth         indent   str repeat   t    depth        output      n indent lt ul class   level-   depth     gt  n

User · Answer

I had to change   function start lvl  amp  output   depth   to    function start lvl   amp  output   depth   0   args   array      Because I was getting an incompatibility error   Strict Standards  Declaration of My Walker Nav Menu  start lvl   should be compatible with Walker Nav Menu  start lvl  amp  output   depth   0   args   Array

User · Answer

in the above i need a small change which i am trying to place but i am not able to do that  your output will look like this   lt ul gt   lt li id  menu-item-13  class  depth0 parent  gt  lt a href     gt About Us lt  a gt   lt ul class  children level-0  gt       lt li id  menu-item-17  class  depth1  gt  lt a href     gt Sample Page lt  a gt  lt  li gt       lt li id  menu-item-16  class  depth1  gt  lt a href     gt About Us lt  a gt  lt  li gt   lt  ul gt   lt  li gt   lt  ul gt     what i am looking for    lt ul gt   lt li id  menu-item-13  class  depth0  gt  lt a class  parent  href     gt About Us lt  a gt   lt ul class  children level-0  gt       lt li id  menu-item-17  class  depth1  gt  lt a href     gt Sample Page lt  a gt  lt  li gt       lt li id  menu-item-16  class  depth1  gt  lt a href     gt About Us lt  a gt  lt  li gt   lt  ul gt   lt  li gt   lt  ul gt     in the above one i have placed the parent class inside the parent anchor link that  lt li id  menu-item-13  class  depth0  gt  lt a class  parent  href     gt About Us lt  a gt

User · Answer

Like it always is  after having looked for a long time before writing something to the site  just a minute after I posted here I found my solution    It thought I d share it here so someone else can find it     Add  parent  class to pages with subpages  change submenu class name  add depth class      class Prio Walker extends Walker Nav Menu       function display element   element   amp  children elements   max depth   depth 0   args   amp  output             GLOBALS  dd children       isset  children elements  element- gt ID      1 0           GLOBALS  dd depth      int   depth          parent  display element   element   children elements   max depth   depth   args   output                function start lvl  amp  output   depth         indent   str repeat   t    depth        output      n indent lt ul class   children level-   depth     gt  n          add filter  nav menu css class   add parent css  10 2   function  add parent css  classes   item        global   dd depth   dd children        classes      depth   dd depth       if  dd children            classes      parent       return  classes       Add class to parent pages to show they have subpages  only for automatic wp nav menu   function add parent class   css class   page   depth   args        if     empty   args  has children               css class      parent      return  css class    add filter   page css class    add parent class   10  4      This is where I found the solution  Solution in WordPress support forum

User · Answer

I would suggest to replace your cutomclass css class name to sub-menu  use find and replace  ie  find   customclass replace with  sub-menu  works for me

User · Answer

You don t need to extend the Walker  This will do  function overrideSubmenuClasses   classes          classes      myclass1        classes      myclass2        return  classes    add action  nav menu submenu css class    overrideSubmenuClasses

User · Answer

replace class   echo str replace  sub-menu    menu menu sub   wp nav menu  array       echo    gt  false       theme location    gt   sidebar-menu        items wrap    gt    lt ul class  menu menu sidebar  gt  3 s lt  ul gt

User · Answer

You can use WordPress preg replace filter  in your theme functions php file  example   function new submenu class  menu             menu   preg replace    class  sub-menu       class  yourclass      menu               return  menu           add filter  wp nav menu   new submenu class

User · Answer

This may be useful to you  How to add a parent class for menu item  function wpdocs add menu parent class   items      parents   array        Collect menu items with parents  foreach    items as  item         if    item- gt menu item parent  amp  amp   item- gt menu item parent  gt  0              parents      item- gt menu item parent              Add class  foreach    items as  item         if   in array   item- gt ID   parents                item- gt classes      menu-parent-item           return  items     add filter   wp nav menu objects    wpdocs add menu parent class             Add a parent CSS class for nav menu items      param array   items The menu items  sorted by each menu item s menu order      return array  maybe  modified parent CSS class       Adding Conditional Classes to Menu Items  function wpdocs special nav class   classes   item         if   is single    amp  amp   Blog      item- gt title            Notice you can change the conditional from is single   and  item- gt title      classes      special-class     return  classes    add filter   nav menu css class     wpdocs special nav class    10  2      For reference   click me

User · Answer

There is no option for this  but you can extend the  walker  object that WordPress uses to create the menu HTML  Only one method needs to be overridden   class My Walker Nav Menu extends Walker Nav Menu     function start lvl  amp  output   depth         indent   str repeat   t    depth        output      n indent lt ul class   my-sub-menu   gt  n           Then you just pass an instance of your walker as an argument to wp nav menu like so    walker    gt  new My Walker Nav Menu

[wordpress] wp_nav_menu change sub-menu class name?

Examples related to wordpress