Category: wordpress

Lately, I develop WordPress themes. The thing is, I don’t like the WordPress default css style names – I prefer BEM naming convention. If you’ve tried to style a WordPress theme, you know, that by default WordPress apply some classes to the menu items – like  page_item, page-item-$ and current_page_item for the current active menu. I wanted to remove all other classes, and go with navigation__item and navigation__item-active for the current selected menu. Like almost everything in wordpress, you can change this using filters. Filter function takes as arguments hook ( think about the hook as event ) , function that will modify the output, priority and number of arguments that the function will accept. So here is the snippet:

function add_custom_classes($classes){
	
	$newClasses[] = "navigation__item";

	if( in_array('current_page_item', $classes) ){
		array_push($newClasses, "navigation__item-active");
	}

    return $newClasses;
}

add_filter('nav_menu_css_class', 'add_custom_classes', 100, 1);
add_filter('nav_menu_item_id', 'add_custom_classes', 100, 1);
add_filter('page_css_class', 'add_custom_classes', 100, 1);

Add it to your functions.php file and you have navigation__item class set to the list items, and navigation__item-active class added to the current menu item.