En este tutorial veremos uno por uno los cuatro filtros que dispone Genesis para modificar la cabecera a nuestro gusto.

Si no sabes lo que es un filter hook, te recomiendo que veas primero este tutorial dónde explico qué es un filtro de Genesis y para que sirve.

En este caso, veremos todos los filtros que hay en header.php y pondremos un ejemplo práctico de uso.

Antes de nada, acuérdate que todos estos filtros los podemos añadir en nuestro plugin personalizado o a malas, en el functions.php de nuestro child theme de Genesis.

¡Vamos a ello!

genesis_seo_title

El fitro genesis_seo_title nos permite modificar el título del sitio web. Por defecto, Genesis introduce el título del sitio que le hemos indicado en las opciones de WordPress, pero en este caso, podemos personalizarlo de cualquier manera.

En este caso, he querido que mi título del sitio web tenga dos colores distintos, en vez de uno. Lo que haremos es aplicar el filtro y utilizaremos etiquetas HTML span para poner mi nombre de color crimson y mi apellido del color por defecto.

Tan sólo tendremos que añadir este código.

add_filter( 'genesis_seo_description', 'jc_genesis_seo_description', 10, 3);
function jc_genesis_seo_description( $description, $inside, $wrap ) {
   $inside = sprintf('<a href="https://www.google.es/" title="%s">%s</a>', 'Título al pasar el cursor', 'Descripción con enlace');
$description = sprintf('<%s class="site-description">%s</%s>', $wrap, $inside, $wrap);
   return $description;   
}

Después de introducir este código, mi título de sitio ser vería así:

genesis_seo_description

Este filtro funciona exactamente igual que el anterior. Te permite modificar la descripción del sitio web cómo tu quieras y te ofrece tres variables por si las quieres utilizar

• $description: en esta variable se guarda el texto de descripción que introduces en Apariencia, Personalizar, Identidad del sitio.
• $inside: contiene el código HTML propiamente que se va a visualizar en la página web.
• $wrap: es el elemento HTML que queremos utilizar para mostrar nuestra descripicón. Por defecto es un elemento p (párrafo).

Un caso práctico para utilizar este filtro sería añadir un enlace a nuestra descripción. Por predeterminado, Genesis muestra la descripción de la página web como un texto llano, sin posibilidad de añadir ningún enlace u otra personalización.

Para ello, utilizaremos el filtro y añadiremos un enlace (elemento HTML a) para que enlace a Google (por ejemplo).

add_filter( 'genesis_seo_description', 'jc_genesis_seo_description', 10, 3);

function jc_genesis_seo_description( $description, $inside, $wrap ) {
   $inside = sprintf('<a href="https://www.google.es/" title="%s">%s</a>', 'Título al pasar el cursor', 'Descripción con enlace');
$description = sprintf('<%s class="site-description">%s</%s>', $wrap, $inside, $wrap);
   return $description;   
}

Con este sencillo código, podremos vincular nuestra descripción a la página que queramos.

genesis_pre_load_favicon

El filtro genesis_pre_load_favicon nos permite establecer el favicon de nuestra página web, fijando un enlace de una imagen con formato ICO.

Recuerda que también WordPress nos permite cambiar el favicon de nuestra página web muy fácilmente, en la opción Apariencia, Personalizar, Identidad del sitio y Icono del sitio. 

add_filter( 'genesis_pre_load_favicon', 'jc_genesis_pre_load_favicon' );

function jc_genesis_pre_load_favicon() {
return 'https://www.zamzar.com/images/filetypes/png.png';
}

No obstante, el icono que esté configurado en el Personalizador tiene prioridad y permanecerá antes que el icono que hayamos aplicado en este filtro. Así que lo podríamos utilizar este filtro para fijar un icono predeterminado para nuestros clientes y que después lo cambien a su antojo. 

genesis_header_scripts

El último filtro de Genesis de la cabecera sirve para añadir cualquier script en la cabecera (header) de nuestro código HTML. Podemos introducir cualquier script JavaScript, un píxel de Facebook, el código de seguimiento de Google Analytics, etc.

Este filtro de Genesis es en verdad un hook general de WordPress.

¿Cuál sería un uso práctico de este filter hook? Lo podemos aprovechar para incrustar cualquier librería de terceros en nuestro sitio web. Así funcionaría:

add_filter( 'genesis_header_scripts', 'jc_genesis_header_scripts' );

function jc_genesis_header_scripts() {
echo '<script src="srcript-de-prueba.js"></script>';
}

Resumen y conclusión

¡Pues esto es todo! Hemos repasado los cuatro filtros que hay en la cabecera en Genesis y hemos visto ejemplos prácticos. En los siguientes tutoriales veremos otros filter hooks que aparecen en otras ubicaciones. De esta manera, aprenderemos a personalizar nuestro child theme de Genesis como queramos 🙂

¿A qué no es tan difícil?

¡Ya sabes! Déjame cualquier comentario o feedback en el fomulario de contacto, lo leo siempre 🙂

Este tutorial está inspirado en la documentación oficial de StudioPress.