¿Cómo Crear un Menú de Navegación Personalizado en WordPress con Código?

En primer lugar, puedes utilizar la función de menús en las versiones más recientes de WordPress.

Primero debes activar esta funcionalidad mediante tu archivo functions.php.

// Este tema usa wp_nav_menu() en dos ubicaciones.  
register_nav_menus( array(  
'primary' => __( 'Navegación Principal', 'nombre_de_tu_tema' ),  
'secondary' => __('Navegación Secundaria', 'nombre_de_tu_tema')  
) );

El código anterior define si tienes más de un menú. Si solo quieres un menú, elimina el secundario. Si haces esto, se vería así en tu archivo functions.php:

// Este tema usa wp_nav_menu() en dos ubicaciones.  
register_nav_menus( array(  
'primary' => __( 'Navegación Principal', 'nombre_de_tu_tema' )
) );

Esto te dará ahora la opción de añadir elementos de página mediante la opción de menú en Apariencia en el backend.

Luego, en tu tema, querrás añadir esto donde quieras que aparezca el menú:

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

El término "menu-header" será la clase del div donde se colocará el menú. Puedes cambiarlo a cualquier clase que desees para el div en tu tema.

El resto se hace completamente con CSS.

/*****************************************
Declaraciones de estilo para el Menú Superior
*****************************************/
.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;
}

Solo haz los cambios que necesites para que se vea como el ejemplo que has publicado.