Añadir una cabecera personalizada a la página principal en Genesis Sample desde el personalizador de WordPress

Descubre en este tutorial cómo modificar la cabecera de la home a tu gusto en Genesis Sample desde el personalizador de WordPress mediante código.

Una de las ventajas de pertenecer al club de Código Genesis es que puedes dejar tus sugerencias para futuros tutoriales. 

A raíz de la entrada sobre cómo introducir una sección Hero en la página de blog Vicente, uno de nuestros suscriptores, propuso:

Y otra opción por si ves interesante crear el tutorial: ¿si quiero crear en la front-page la sección hero para añadir la imagen destacada con el h1 y la descripción desde el personalizador?

Dicho y hecho.

Con este tutorial vas a aprovecharte del personalizador de WordPress para agregar la imagen, elegir su encuadre e insertar el texto de título y descripción que desees.

Y no solo eso, sino que también podrás elegir el color de ambos textos de forma independiente.

Suena bien ¿verdad? Este es el resultado final:

Aunque estos snippets están diseñados para Genesis Sample, puedes aplicarlos en cualquier otro child theme de Genesis tras realizar pequeños cambios en el código. 

Vamos allá. 

Instrucciones para mostrar una cabecera custom en la front-page de Genesis Sample desde el personalizador de WordPress

1. Crea una plantilla para la página principal

Genesis Sample carece de una plantilla front-page, así que el primer paso es crear un fichero front-page.php en la carpeta raíz del tema que contenga el siguiente código:

Con esto generas la plantilla que se mostrará en la página principal y le agregas una sección de cabecera en formato Hero.

Además, este bloque fuerza el diseño de ancho completo.

Pero si prefieres dejar la sidebar puedes eliminar la línea responsable y listo. 😉

2. Modifica el archivo customize.php

Para añadir las opciones en el personalizador de WordPress debes editar el fichero customize.php situado en la carpeta /lib/.

En concreto, introduce el siguiente código al final del mismo:

Con este bloque insertas una nueva sección al personalizador de WordPress llamada «Cabecera de la página principal» dentro de la cual se encuentran las opciones de añadir y posicionar la imagen, así como los apartados para agregar el título y la descripción.

También desde aquí podrás elegir el color de ambos textos de forma independiente.

3. Personaliza el CSS de la cabecera

Una vez configurada la plantilla para la nueva home y el fichero del personalizador, solo te falta asignar los estilos para que luzca tal y como deseas.

Para ello pega este bloque al final de style.css:

Al introducir estas líneas de CSS te aseguras de que la cabecera se visualice correctamente.

Ya solo te falta el último detalle.

4. Añade la imagen de fondo desde el personalizador de WordPress

Elige la fotografía que deseas usar como fondo directamente desde el personalizador de WordPress.

Tal y como te indica esta sección del personalizador, procura que la imagen  tenga un ancho generoso (1600-2000px) para que también se adapte bien a los dispositivos de alta resolución.

Conclusiones

Ahora ya conoces el código para introducir una cabecera con imagen y título en la página principal de Genesis Sample desde el personalizador de WordPress.

Desde él podrás elegir también de forma sencilla el texto y los colores del título y la descripción.

¿Quieres aplicarlo en otro child theme de Genesis? Haz unos pocos ajustes y ya lo tienes.

Si deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, no te cortes. Cuéntamela en los comentarios (opción exclusiva para suscriptores).

Tutoriales relacionados

• https://codigogenesis.com/mostrar-imagen-cabecera-pagina-blog-genesis-sample/
• https://codigogenesis.com/mostrar-imagen-cabecera-pagina-blog-genesis-sample/
• https://codigogenesis.com/mostrar-imagen-cabecera-pagina-blog-genesis-sample/
• https://codigogenesis.com/forzar-el-diseno-de-ancho-completo-en-genesis-framework/