Как создать пользовательское навигационное меню WordPress с помощью кода?

Прежде всего, вы можете использовать функцию меню в новых версиях WordPress.

Сначала вам нужно активировать эту функцию через файл functions.php вашей темы.

// Эта тема использует wp_nav_menu() в двух местах.
register_nav_menus( array(
'primary' => __( 'Основная навигация', 'your_theme_name' ),
'secondary' => __('Дополнительная навигация', 'your_theme_name')
) );

Приведённый выше код определяет, если у вас более одного меню. Если нужно только одно меню - удалите строку с 'secondary'. В этом случае код в functions.php будет выглядеть так:

// Эта тема использует wp_nav_menu() в двух местах.
register_nav_menus( array(
'primary' => __( 'Основная навигация', 'your_theme_name' )
) );

Теперь в админ-панели в разделе "Внешний вид" появится возможность добавлять элементы меню.

Далее, в шаблоне темы вам нужно добавить этот код туда, где должно отображаться меню:

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

Термин "menu-header" будет классом div-контейнера, в который помещается меню. Вы можете изменить его на любой другой класс, соответствующий вашей теме.

Все остальные настройки выполняются исключительно через CSS.

/*****************************************
Стили для верхнего меню
*****************************************/
.menu-header {
margin-right: auto;
margin-left: auto;
z-index: 10;
}

.menu-header li {
display: inline;
list-style: url(none) none;
float: left;
}

.menu-header ul {
line-height: 31px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.menu-header a, .menu-header a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}

.menu-header a, .menu-header a:visited {
color:#990000;
display:block;
padding:0 20px;
}

.menu-header a:hover, .menu-header a:active, .current_page_item a, #home .on, .menu-footer a:hover {
text-decoration:underline;
}

.menu-header li ul {
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}

.menu-header li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:220px;
}

.menu-header li li a, .menu-header li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}

.menu-header li li a:hover, .menu-header li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
text-decoration: none;
}

.menu-header li:hover ul, .menu-header li li:hover ul, .menu-header li li li:hover ul,   .menu-header li.sfhover ul, .menu-header li li.sfhover ul, .menu-header li li li.sfhover ul     {
left:auto;
}

Внесите необходимые изменения в стили, чтобы меню выглядело так, как вам нужно.