Как добавить классы пунктам и ссылкам меню WordPress

Для добавления CSS-классов к меню WordPress обычно достаточно фильтров nav_menu_css_class и nav_menu_link_attributes. Примеры работают с меню, выведенным через wp_nav_menu() в классической теме, а не с блоком «Навигация».

Добавь нужные функции в functions.php своей или дочерней темы. В примерах используется позиция footer-menu из инструкции по регистрации меню. Если у тебя другое имя позиции, замени его в условиях.

Классы пунктов меню — li

function mytheme_footer_menu_classes( $classes, $item, $args ) {
    if ( 'footer-menu' === $args->theme_location ) {
        $classes[] = 'footer-menu-item';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'mytheme_footer_menu_classes', 10, 3 );

Класс добавляется только пунктам меню в позиции footer-menu. Стандартные классы WordPress сохраняются.

Классы ссылок — a

function mytheme_footer_menu_link_classes( $atts, $item, $args ) {
    if ( 'footer-menu' === $args->theme_location ) {
        $atts['class'] = trim( ( $atts['class'] ?? '' ) . ' footer-link' );
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'mytheme_footer_menu_link_classes', 10, 3 );

Этот вариант дописывает footer-link, сохраняя классы, которые могли добавить другие фильтры. Простое присваивание $atts['class'] = 'footer-link' заменило бы их.

Класс активного пункта

WordPress уже добавляет класс current-menu-item пункту текущей страницы. Если собственное имя не требуется, стилизуй его напрямую:

.footer-menu .current-menu-item > a {
  font-weight: 700;
}

Селектор предполагает, что контейнер меню получил класс footer-menu. Если в проекте нужен дополнительный класс, используй фильтр:

function mytheme_active_menu_class( $classes, $item, $args ) {
    if ( 'footer-menu' === $args->theme_location
        && in_array( 'current-menu-item', $classes, true ) ) {
        $classes[] = 'active-menu-class';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'mytheme_active_menu_class', 10, 3 );

Для родительских пунктов существуют отдельные классы current-menu-parent и current-menu-ancestor. Они не равнозначны текущему пункту.

Проверка

Открой страницу, которая есть в меню, и посмотри классы li и a в инструментах разработчика. Убедись, что классы добавились только в нужной позиции и прежние значения сохранились.

Документация

• WordPress: nav_menu_css_class
• WordPress: nav_menu_link_attributes