как создать это настраиваемое меню, используя функцию wp_nav_menu?

файл function.php

register_nav_menus( array( 
    'header-menu' => 'Меню верхнего колонтитула', 
    'footer-menu' => 'Меню нижнего колонтитула' 
  ) );

файл header.php

  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', ) ); ?>

Как назначить class для <ul> и <li>

Пример HTML

<ul class="nav header-nav header-bottom-nav nav-center  nav-uppercase">
     <li class=""><a href="https://wordpress.stackexchange.com/questions/286053/index.php" class="nav-top-link">Главная</a></li>
     <li class="has-dropdown"><a href="testing.php" 
     class="nav-top-link">Тестирование<i class="icon-angle-down" ></i></a>
        <ul class="nav-dropdown nav-dropdown-default">
            <li><a href="hello.php">Привет</a></li>
        </ul>
     </li>
 </ul>

Результат должен выглядеть так в функции WordPress

Вот решение с помощью функции Walker_Nav_Menu

Функция Walker_Nav_Menu

Function.php

class Desktop_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    if (array_search('menu-item-has-children', $item->classes)) {
        $output .= sprintf("\n<li class="menu-item has-dropdown dropdown %s"><a href="https://wordpress.stackexchange.com/questions/286053/%s" class=\"nav-top-link\" >%s <i class="icon-angle-down" ></i></a>
        \n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url,
         $item->title);
    } else {
        $output .= sprintf("\n<li %s><a href="https://wordpress.stackexchange.com/questions/286053/%s">%s</a>\n", ( array_search('current-menu-item', $item->classes) ) ? '' : '', $item->url, $item->title
        );
    }
}

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"nav-dropdown nav-dropdown-default\" role=\"menu\">\n";
}
}

Код header.php

<?php 
   $defaults = array(
         'theme_location'  => 'header-menu',
         'container'       => 'ul',
         'menu_class'      => 'nav header-nav header-bottom-nav nav-center  nav-uppercase',
         'walker'          => new Desktop_Walker_Nav_Menu()           
   );

  wp_nav_menu( $defaults );
  ?>

Вы можете передать класс в аргументы функции:

‘menu_class’
(строка) CSS класс для элемента ul, который образует меню. По умолчанию
‘menu’.

Так что вы можете попробовать это:

<?php 
$args = array(
    'menu_class' => 'nav header-nav header-bottom-nav nav-center  nav-uppercase',        
    'menu' => '(ваш_menu_id)'
);
wp_nav_menu( $args ); 
?>

Вы можете прочитать о меню WordPress. Я предлагаю следующее:
http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/
http://codex.wordpress.org/Navigation_Menus

На самом деле нет необходимости в walker или каких-либо дополнительных классах. Вы сталкиваетесь с этими стрелками? Просто сделайте это через CSS так:

.your_ul_selector > li.menu-item-has-children::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #0f0;
}

Я думаю, что .icon-angle-down имеет элемент псевдокласса ::after или ::before, так что вы можете просто использовать то же самое.

.your_ul_selector должен быть ul. Это может измениться в зависимости от того, есть ли контейнер меню и каков его слаг и т.д. … но я думаю, вы понимаете идею?

Если бы вы предоставили демонстрацию, я мог бы быть намного более конкретным.

Вам нужно работать с двумя файлами темы

№1 functions.php

№2 header.php

Сначала вам нужно добавить поддержку темы для меню, а затем зарегистрировать меню в вашем файле functions.php следующим образом

 // Для поддержки темы в functions.php
 add_theme_support('menus');
 // теперь зарегистрируйте меню
 function my_menu(){
    register_nav_menu('header', 'Меню верхнего колонтитула');
 }
 add_action('init','my_menu');

Во-вторых, код в вашем header.php

 <div class="header_menu" id="header_menu">
                    <?php 
                        $defaults = array(
                            'theme_location' => 'header',
                            'menu' => '',
                            'container' => '',
                            'container_class' => '',
                            'container_id' => '',
                            'menu_class' => 'main_menu',
                            'menu_id' => '',
                            'echo' => true,
                            'fallback_cb' => 'wp_page_menu',
                            'before' => '',
                            'after' => '',
                            'link_before' => '',
                            'link_after' => '',
                            'items_wrap' => '<ul id="header_main_nav" class="nav header-nav header-bottom-nav nav-center  nav-uppercase">%3$s</ul>',
                            'depth' => 0,
                            'walker' => ''
                            );
                        wp_nav_menu($defaults);
                    ?>
                </div>

А для подменю просто перейдите в свою панель администратора, внешнему виду, меню и просто перетащите ссылку в подменю, как показано на рисунке

Вот и всё.