En WordPress disponemos de un “template tag” muy útil cuando estamos creando un tema y necesitamos listar nuestras páginas estáticas como parte o totalidad del menú del encabezado de nuestro site.

En vez de crear la lista manualmente (y tener que editarla más tarde en los templates ante cualquier cambio), podremos desde un principio usar wp_page_menu como método para imprimir nuestra lista de páginas:

<?php wp_page_menu('exclude=24,27,28&menu_class=menu menu-de-contacto'); ?>
<?php wp_page_menu('include=24,27,28&menu_class=menu menu-principal'); ?>

Aquí se nos crearían por lo pronto dos menús con sus links preparados: el primero incluye todas nuestras páginas salvo tres, y el segundo sólo esas tres páginas. Podríamos usarlos de distinta manera, por ejemplo, uno que ocupara el 100% de la anchura de la página, y otro, más arriba, al lado de nuestro logo.

HTML de ejemplo:

<div id="encabezado">

	<div id="logo">
		<img src="<?php bloginfo('template_directory'); ?>/imagenes/logo.png">
	</div>

	<div id="menu-de-contacto">
		<?php wp_page_menu('include=24,27,28&menu_class=menu menu-de-contacto'); ?>
	</div>

	<div id="menu-principal">
		<?php wp_page_menu('exclude=24,27,28&menu_class=menu menu-principal'); ?>
	</div>

</div>

Recordemos que la ID numérica de cada página la sabremos poniendo el cursor sobre el nombre de la página en cuestión en el panel de administración, y viendo cuál es el número que llevan en su URL.

Ambos template tags nos devolverán una lista (ul, unordered list), que deberemos luego trabajar con CSS para posicionarla y crear los gráficos necesarios.

Un ejemplo de CSS para nuestro caso:

#encabezado{
	width:960px;
	margin: 0 auto;
	background:#fff
	}

#logo,#menu-de-contacto{
	width:50%;
	height:120px;
	margin-top:18px;
	float:left
	}

#menu-de-contacto li{
	list-style-type:none;
	display:inline;
	margin-right:18px;
	}

#menu-de-contacto li a{
	padding:5px;
	background:#EEE;
	color:#999
	}

#menu-principal{
	width:100%;
	height:3em;
	line-height:3em;
	margin-top:18px;
	color:#555
	}

#menu-principal li{
	list-style-type:none;
	display:inline-block;
	background:#111;
	padding: 0 9px;
	border-right: 1px solid #555
	}