Добавление класса Bootstrap dropdown в навигационное меню

Самый простой способ сделать это — использовать готовое решение. Класс WP_Bootstrap_Navwalker расширяет нативный класс WordPress Walker_Nav_Menu и адаптирует ваши меню для работы с Bootstrap 3 или 4. Скачайте его с GitHub.

Добавьте его в свою тему, затем добавьте следующий код в файл functions.php:

<?php
require_once('путь-к-папке/wp-bootstrap-navwalker.php');

Замените путь-к-папке/ на актуальный путь в вашем проекте.

Затем измените вызов wp_nav_menu(), используя следующий код:

<?php
wp_nav_menu( array(
    'menu'              => 'header', // укажите название вашего меню
    'theme_location'    => 'header',
    'container'         => 'div', // нет необходимости оборачивать `wp_nav_menu` вручную
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'collapse-1',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => false,
    'walker'            => new WP_Bootstrap_Navwalker() // Используем другой Walker
));

Обратите внимание, что вам больше не нужен <div class="collapse navbar-collapse" id="collapse-1">, так как он будет добавлен автоматически функцией wp_nav_menu() с правильными CSS-классами и id.

Также внимательно ознакомьтесь с файлом README.md WP_Bootstrap_Navwalker.

Самое простое решение в данном случае — использовать jQuery. Вы можете добавить новый класс в файл functions.php, чтобы проверить, есть ли у пункта меню дочерние элементы, а затем добавить атрибуты к этому элементу, или же использовать Bootstrap Nav Walker. Здесь я выберу более простой вариант.

    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    });

Просто скопируйте этот код и вставьте его в файл footer.php. Для более подробной информации посетите http://webtrickshome.com/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item

Вы можете использовать класс Walker_Nav_Menu, если хотите изменить стандартную разметку меню в WordPress.

https://codex.wordpress.org/Class_Reference/Walker

https://www.youtube.com/watch?v=IqTMhmjTBoE&list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX&index=19