Come Creare un Menu di Navigazione WordPress Personalizzato con il Codice?

Innanzitutto puoi utilizzare la funzionalità dei menu nelle versioni più recenti di WordPress.

Per prima cosa devi attivare questa funzionalità tramite il tuo file functions.php.

// Questo tema utilizza wp_nav_menu() in due posizioni.  
register_nav_menus( array(  
'primary' => __( 'Navigazione Principale', 'nome_tuo_tema' ),  
'secondary' => __('Navigazione Secondaria', 'nome_tuo_tema')  
) ); 

Il codice sopra definisce se hai più di un menu. Se vuoi solo un menu elimina la riga del secondary. In questo caso apparirebbe così nel tuo file functions.php:

// Questo tema utilizza wp_nav_menu() in due posizioni.  
register_nav_menus( array(  
'primary' => __( 'Navigazione Principale', 'nome_tuo_tema' )
) );

Questo ti darà ora l'opzione per aggiungere voci di menu tramite l'opzione Menu sotto Aspetto nel pannello di amministrazione.

Successivamente, nel tuo tema dovrai aggiungere questo nel punto dove vuoi che appaia il menu:

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

Il termine "menu-header" sarà la classe del tag div in cui verrà inserito il menu. Puoi cambiarlo con qualsiasi classe tu voglia per il tag div nel tuo tema.

Il resto viene gestito interamente tramite CSS.

/*****************************************
Dichiarazioni di stile per il Menu Superiore
*****************************************/
.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;
}

Apporta semplicemente le modifiche necessarie per farlo apparire come nell'esempio che hai postato.