Created
April 13, 2019 16:09
-
-
Save kisildev/0929c381533b6ced39fb206bcb70a0bb to your computer and use it in GitHub Desktop.
BEM Wp menu (by Ira Beskor)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*-------------- Creating custom menu with BEM classes ----------------*/ | |
// Change main menu parameters | |
add_filter( 'wp_nav_menu_args', 'filter_wp_menu_args' ); | |
function filter_wp_menu_args( $args ) { | |
if ( $args['theme_location'] === 'header-menu' || 'blog-menu' ) { | |
$args['container'] = false; | |
$args['items_wrap'] = '<ul class="%2$s">%3$s</ul>'; | |
$args['menu_class'] = 'menu__list'; | |
} | |
return $args; | |
} | |
// Change id of li | |
add_filter( 'nav_menu_item_id', 'filter_menu_item_css_id', 10, 4 ); | |
function filter_menu_item_css_id( $menu_id, $item, $args, $depth ) { | |
return $args->theme_location === 'header-menu' || 'blog-menu' ? '' : $menu_id; | |
} | |
// Change class of li | |
add_filter( 'nav_menu_css_class', 'filter_nav_menu_css_classes', 10, 4 ); | |
function filter_nav_menu_css_classes( $classes, $item, $args, $depth ) { | |
if ( $args->theme_location === 'header-menu' || 'blog-menu' ) { | |
$classes = [ | |
'menu__list-item', | |
]; | |
if ( $item->current ) { | |
$classes[] = 'menu__list-item--active'; | |
} | |
} | |
return $classes; | |
} | |
// Add classes to links | |
add_filter( 'nav_menu_link_attributes', 'filter_nav_menu_link_attributes', 10, 4 ); | |
function filter_nav_menu_link_attributes( $atts, $item, $args, $depth ) { | |
if ( $args->theme_location === 'header-menu' || 'blog-menu' ) { | |
$atts['class'] = 'menu__link'; | |
if ( $item->current ) { | |
$atts['class'] .= ' menu__link--active'; | |
} | |
} | |
return $atts; | |
} | |
// Change class of submenu ul | |
add_filter( 'nav_menu_submenu_css_class', 'filter_nav_menu_submenu_css_class', 10, 3 ); | |
function filter_nav_menu_submenu_css_class( $classes, $args, $depth ) { | |
if ( $args->theme_location === 'header-menu' ) { | |
$classes = [ | |
'menu__submenu-list', | |
]; | |
} | |
return $classes; | |
} | |
/*-------------- End of creating custom menu ----------------*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment