Cum să creezi un meniu de navigare personalizat în WordPress folosind cod?

În primul rând, poți folosi funcționalitatea de meniu din versiunile mai noi ale WordPress.

Mai întâi, trebuie să activezi această funcționalitate prin fișierul functions.php al temei tale.

// Această temă utilizează wp_nav_menu() în două locații.  
register_nav_menus( array(  
'primary' => __( 'Navigare Principală', 'numele_temei_tale' ),  
'secondary' => __('Navigare Secundară', 'numele_temei_tale')  
) ); 

Codul de mai sus definește dacă ai mai multe meniuri. Dacă dorești doar un singur meniu, șterge linia pentru secundar. În acest caz, codul din functions.php ar arăta astfel:

// Această temă utilizează wp_nav_menu() într-o singură locație.  
register_nav_menus( array(  
'primary' => __( 'Navigare Principală', 'numele_temei_tale' )
) );

Acum vei avea opțiunea de a adăuga elemente de meniu prin secțiunea "Meniuri" din panoul de administrare, sub "Aspect".

Următorul pas este să adaugi următorul cod în fișierul temei unde dorești să apară meniul:

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

Termenul "menu-header" reprezintă clasa div-ului în care va fi inserat meniul. Poți modifica această clasă în funcție de nevoile temei tale.

Restul se face în întregime prin CSS.

/*****************************************
Declarații de stil pentru Meniul Principal
*****************************************/
.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;
}

Modifică aceste stiluri în funcție de cum dorești să arate meniul tău, conform exemplului pe care l-ai postat.