Navegación Actual utilizando IDs en Worspress

En wordpress podemos implementar la navegacion actual de manera sencilla, ya que podemos utilizar el slug de las páginas que tenemos en la navegación para saber en que sección nos encontramos al presionar clic en una pagina de la navegación, para así aplicarle el estilo que se quiere a cada una.

La navegación actual es un buen concepto para experiencia de usuario, ya que deja saber al usuario en que pagina se encuentra. Con una función podemos obtener el slug de la página en la que nos encontramos, solo copia y pega esta función en el archivo functions.php.

function the_slug() {
    $post_data = get_post($post->ID, ARRAY_A);
    $slug = $post_data['post_name'];
    return $slug;
}

En el markup HTML tenemos que pasarle el ID a la etiqueta body con la función the_slug();

<body id="<?php if ( is_page() ) { echo the_slug(); } else { echo "home"; } ?>">

Lo que hacemos es condicionar si es una pagina pasarle el slug de la pagina como ID al body de lo contrario si no es una pagina pasarle home como ID.

Ahora solo tenemos que darle algo de estilo con CSS.

body#home ul.menu li.home,
body#contact ul.menu li.about,
body#about ul.menu li.about {
    background-color: #red;
}

Chris Coyier nos da un buen ejemplo de como hacerlo usando PHP.

// antes de la etiqueta body
$page = $_SERVER['REQUEST_URI'];
$page = str_replace("/","",$page);
$page = str_replace(".php","",$page);
$page = str_replace("?s=","",$page);
$page = $page ? $page : 'default'

Así de simple.

<body id="<?php echo $page } ?>">
Recomendado