Is there a way to change the child <ul class="sub-menu">
generated by WordPress itself to a custom class name?
I know the parent <ul>
you can remove or change the name with 'menu_class' => 'newname'
.
I couldn't find the answer. Itried 'submenu_class' => 'customname'
. It seems logic to me, but obviously that is no the right one.
any ideas?
This question is related to
wordpress
I had to change:
function start_lvl(&$output, $depth)
to:
function start_lvl( &$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(&$output, $depth = 0, $args = Array)
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.
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(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"level-".$depth."\">\n";
}
}
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->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
// Add class.
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->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() && 'Blog' == $item->title ) {
// Notice you can change the conditional from is_single() and $item->title
$classes[] = "special-class";
}
return $classes;
}
add_filter( 'nav_menu_css_class' , 'wpdocs_special_nav_class' , 10, 2 );
For reference : click me
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, &$children_elements, $max_depth, $depth=0, $args, &$output ){
$GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
$GLOBALS['dd_depth'] = (int) $depth;
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"children level-".$depth."\">\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
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
<ul>
<li id="menu-item-13" class="depth0 parent"><a href="#">About Us</a>
<ul class="children level-0">
<li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
<li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>
what i am looking for
<ul>
<li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>
<ul class="children level-0">
<li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
<li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>
in the above one i have placed the parent class inside the parent anchor link that <li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>
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' );
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');
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.
replace class:
echo str_replace('sub-menu', 'menu menu_sub', wp_nav_menu( array(
'echo' => false,
'theme_location' => 'sidebar-menu',
'items_wrap' => '<ul class="menu menu_sidebar">%3$s</ul>'
) )
);
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 => $class ) {
if ( $class == 'sub-menu' ) {
$classes[ $key ] = 'my-sub-menu';
}
}
return $classes;
}
where
$classes(array) - The CSS classes that are applied to the menu <ul> element.
$args(stdClass) - An object of wp_nav_menu() arguments.
$depth(int) - Depth of menu item. Used for padding.
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');
Source: Stackoverflow.com