Guía para Desarrollar Temas Hijo con Genesis Framework

[intro]Aprender a desarrollar temas hijo con Genesis Framework ha mejorado sustancialmente mi negocio de diseño y desarrollo de sitios web WordPress.[/intro]

Hasta entonces solía diseñar y desarrollar los temas desde cero, ya fuera partiendo de un tema starter o creando yo mismo cada una de las plantillas. De hecho me gustó tanto que desde entonces utilizo Genesis Framework para SiliCodeValley.

Por esa razón me ha parecido interesante compartir contigo una versión «reducida» de este proceso, para que así puedas dar tus primeros pasos con Genesis y quién sabe si tú también decides pasarte al lado oscuro 😛

Además, intentaré utilizar un lenguaje lo más simple posible e ir directo a los pasos necesarios, para hacer más llevadera esta guía.

¿A quién se dirige esta guía?

Esta no va a ser una guía dirigida a bloggers que quieren aprender a utilizar Genesis Framework desde un punto de vista de usuario. Sino que va a ser una guía enfocada a desarrolladores WordPress.

Por lo que si piensas dedicarte a desarrollar temas de WordPress o bien ya lo haces, partiendo desde cero o utilizando, por ejemplo, Underscores te recomiendo seguir leyendo 🙂

¡No me enrollo más y empezamos!

Tema Framework, tema padre y temas hijo

Empecemos por el principio, ¿Qué es un tema framework? Un tema framework es un tema que ha sido creado y pensado para que lo utilicen los desarrolladores.

[intro]Su función principal es ayudarte a desarrollar temas de WordPress de la forma más rápida y eficiente posible, gracias a un conjunto de funciones y herramientas que nos ofrece.[/intro]

Por lo tanto, Genesis Framework es un tema framework que utilizarás para crear tus propios temas a partir de él. ¿Fácil no?

A esto de crear un tema a partir de otro, se le llama «tema padre» y «tema hijo«. Piensa en este concepto de la siguiente forma:

Genesis Framework es un tema padre. Se trata de un tema muy completo que incluye un conjunto de funciones y hooks (más adelante te cuento qué son) que podrás utilizar para desarrollar los temas hijo.

¿Y entonces qué es un tema hijo? Pues se trata de un tema, que en lugar de tener que partir desde cero para desarrollarlo, partirás de todo lo existente en el tema padre y sólo deberás enfocarte en definir su aspecto visual y en ampliar sus funcionalidades si fuera necesario.

Para que acabes de entenderlo te mostraré la misma analogía que utilizan sus creadores:

Podríamos pensar que WordPress es el motor de un coche. Después en una capa superior tendríamos Genesis, que sería el chasis del coche y por último, los temas hijos serían todo lo relacionado con la capa de pintura, los acabados, el modelo, los extras que incluye el coche, etc.

Principales ventajas de Genesis Framework

• Mayor velocidad de desarrollo: como partes de un tema padre, gran parte del trabajo ya está hecho. No reinventamos la rueda una y otra vez.
• Gran comunidad detrás: es el framework más utilizado. Puedes ver un análisis en WPTD.
• Calidad del código: ha sido creado siguiendo unos estándares de calidad muy exigentes y teniendo muy en cuenta que sea SEO friendly.
• Opciones: incluye un conjunto de opciones, que se configuran desde el panel de administración, las cuales se mantienen aunque cambiemos de tema hijo.
• Actualizaciones seguras: el tema padre puede ser actualizado sin perjudicar en nada al tema hijo. Imagínate que los creadores de Genesis (StudioPress) detectan una vulnerabilidad en seguridad. En ese caso ellos corregirían el fallo y nosotros sólo tendríamos que preocuparnos de actualizar Genesis y no hacer nada en nuestro tema hijo. Esto sería imposible en un enfoque basado en coger temas existentes de Themeforest y modificar sus archivos fuente, ya que al actualizar todos tus cambios se irían por el retrete.

Principales inconvenientes de Genesis Framework

• Curva de aprendizaje: como te he dicho antes los frameworks tienen sus propias funciones y hooks que tendrás que aprender a usar. Por ello, los primeros temas que desarrolles serán más lentos, sobre todo si ya aprendiste a crear temas de la forma tradicional, dado que el enfoque cambia.
• No es gratuito: a día de hoy tiene un coste de 59,95$. Pero teniendo en cuenta que pagando una sola vez podrás usarlo en tantos proyectos como quieras, sean propios o de clientes y obtener actualizaciones de por vida, es un precio más que justo.

Prepara el entorno de desarrollo

Como pretendemos desarrollar un tema hijo lo ideal es que lo hagamos en local y no en un sitio web ya publicado.

Por eso deberás tener preparado un editor de código, como Atom o Sublime Text y una instalación de WordPress local lista.

Si tienes dudas sobre este proceso te recomiendo seguir este tutorial donde te muestro cómo hacerlo con MAMP. Pero si prefieres usar Local by Flywheel, adelante.

Descargamos e instalamos Genesis Framework y Genesis Sample

Ahora que te he aclarado los conceptos más importantes, ya podemos ensuciarnos un poco las manos y empezaremos descargando e instalando el framework y un tema hijo de ejemplo.

Obtén aquí tu copia de Genesis Framework

Cuando te hayas hecho con tu copia e ingreses en MyStudioPress, podrás descargarte los dos archivos necesarios para poder desarrollar un tema hijo:

1. Genesis Framework
2. Genesis Sample

En realidad el segundo no es obligatorio, pero como estás empezando te facilitará las cosas. Ya que Genesis Sample es un tema hijo de Genesis muy básico que podrás transformarlo en el tema que deseas crear.

Por lo tanto, se podría decir que estamos haciendo un poco de trampa, ya que te estoy mostrando cómo crear un tema hijo para Genesis Framework, partiendo ya de uno existente. Pero no te preocupes porque esta es la forma que recomiendan sus propios creadores, al menos para empezar a aprender. Después, una vez domines a la bestia, ya partirás desde cero si lo deseas.

Los pasos que debes seguir para instalar el framework son exactamente los mismos que para instalar un tema normal y corriente (Escritorio > Apariencia > Temas > Añadir nuevo > Subir tema)  . Por lo tanto:

1. Sube e instala Genesis Framework, pero no lo actives.
2. Sube e instala Genesis Sample y actívalo.

De esta forma WordPress ya sabe que el primero es un tema padre y el segundo su tema hijo y ya tenemos todo listo para empezar.

En estos momentos tu web debería lucir más o menos así:

Los hooks de Genesis: Acciones y Filtros

A diferencia del proceso que seguiríamos al construir un tema de WordPress desde cero, el enfoque de Genesis no consistirá en ir creando nuevos archivos siguiendo la jerarquía de plantillas sino que gran parte de las modificaciones las realizaremos desde el fichero functions.php gracias al uso de los hooks de Genesis.

¡Genial! ¿Y qué son los hooks de Genesis? Bien, para empezar es un concepto que no es propio de Genesis, sino de WordPress y son el principal mecanismo a la hora construir plugins de WordPress. Resumido de forma que todo el mundo lo entienda:

[intro]Los hooks o ganchos son un mecanismo que nos permite realizar modificaciones o añadir nuevos elementos a WordPress sin necesidad de tocar su código fuente.[/intro]

Piensa en un plugin cualquiera, por ejemplo uno que se encargue de mostrar botones para compartir en redes sociales. Este plugin lo que hace es utilizar uno de esos ganchos para unirse a WordPress sin necesidad de haber añadido dicho código directamente modificando el código fuente de WordPress. Por eso se les llama ganchos porque nos permiten añadir porciones de código.

Volvamos al caso de Genesis Framework, el cual tiene su propio conjunto de hooks. Dentro de los ganchos distinguimos dos tipos: las acciones y los filtros.

Las acciones nos permiten añadir o eliminar elementos a nuestro tema hijo. Por ejemplo, imagínate que quieres añadir una sección nueva en la home de tipo jumbotron (la típica que muestra un título, descripción y botón de llamada a la acción).

Los filtros nos permiten modificar el contenido existente de ciertas partes de nuestro tema. Por ejemplo, un filtro muy usado en Genesis es el que nos permite cambiar el texto de los créditos del pie de página.

Pues es gracias a estas acciones y filtros que Genesis ofrece que podremos customizar nuestro tema hijo.

Genesis Visual Hook Guide

Ahora que ya sabes lo que es una acción y un filtro, ¿cómo podemos saber cuáles son estos? Pues por suerte para ti (y para mí), Christopher Cochran se curró un plugin de WordPress gratuito llamado Genesis Visual Hook Guide.

Por lo que ya puedes descargártelo, instalarlo y activarlo. En el siguiente vídeo te hago un breve tour sobre su funcionamiento:

¡Perfecto! Ahora que ya sabes consultar qué hooks tienes disponibles, es momento de mostrarte los 4 casos más comunes a la hora de desarrollar temas hijo. Así entenderás un poco mejor cómo trabajar con los hooks de Genesis.

Antes de empezar arrastra la carpeta «genesis» y «genesis-sample«, que encontrarás en la ruta «wp-content > themes» de tu instalación de WordPress, hacia tu editor de código.

Una vez lo hayas hecho dirígete hasta la página de Code Snippets de la documentación oficial del framework. Aquí encontrás un listado con ejemplos de uso de los hooks de Genesis.

Modifica elementos utilizando filtros

Empezaremos modificando el texto del pie de página, también llamado créditos. Como estamos modificando un texto necesitaremos un filtro y al ser un caso tan común, dentro de los Code Snippets encontrarás la solución en Customize the Credits Text. Déjame explicarte brevemente el código que encontrarás con un vídeo:

Elimina elementos utilizando acciones

Ahora que ya hemos visto un primer ejemplo, veamos cómo podemos eliminar elementos de nuestro tema, por ejemplo, el texto con la fecha y autor que aparece debajo de cada título. Esto es útil para no dar una imagen de que escribimos poco en nuestro blog 🙂

Como estamos eliminando un elemento utilizaremos una acción. La solución a este problema la encontramos de nuevo entre los Code Snippets, dentro de Remove Entry Meta:

Añade elementos utilizando acciones

Vamos con el tercer caso: cómo podemos añadir un nuevo elemento a nuestro tema hijo. Empezaremos con un ejemplo muy chorra para que entiendas el funcionamiento y luego cuando te muestre cómo crear y añadir nuevas áreas de widget te mostraré un ejemplo un poco más elaborado:

Mueve elementos utilizando acciones

Ya sólo nos queda saber cómo mover elementos de sitio y lo cierto es que el proceso a seguir ya lo conoces. Para mover algo primero tendremos que eliminarlo del sitio donde se encuentra y luego añadirlo de nuevo en el sitio que deseamos, ¿suena lógico no?

Crea nuevas áreas de widgets

¿Sabes una cosa? A los creadores de Genesis les encantan los widgets. Si navegas por sus distintos temas hijo que tienen a la venta y te fijas en sus páginas iniciales, la gran mayoría de ellas están construidas a base de widgets. De hecho si vienes trabajando con Genesis desde el punto de vista del usuario esto seguro que no te sorprenderá, ya que al configurar cualquiera de sus temas habrás tenido que tratar con widgets de tipo HTML.

Es por eso que quiero mostrarte cómo podemos registrar nuevas áreas de widget en nuestro tema hijo:

Aquí tienes la documentación vista en el vídeo.

Modificar los estilos

Hasta ahora nos hemos limitado a jugar con los hooks e incluso has visto cómo crear nuevas áreas de widgets. Pero ¿cómo debes hacer para definir tu propio aspecto visual? Elegir tus colores, fuentes, tamaños, fondos… En definitiva hacer que el tema luzca como tú deseas.

Pues para ello deberás editar la hoja de estilos style.css que encontrarás en el directorio del tema hijo.

En el siguiente vídeo te mostraré los pasos a seguir para modificar los estilos y además, te explicaré por qué el «inspector del navegador» va a ser tu mejor aliado junto con una funcionalidad del plugin Genesis Visual Hook Guide que aún no te he mostrado:

Conclusión

¡Peeerfecto! Ya hemos tocado un poco todos los palos necesarios a la hora de desarrollar temas hijo con Genesis Framework.

Es posible que aún te cueste creerlo, pero haciendo un mix del uso de los hooks, de los widgets y modificando la hoja de estilos podrás transformar el tema Genesis Sample en el tema que desees.

Los ejemplos que te he mostrado son un poco chorra, pero mi objetivo ha sido que te des cuenta del potencial de este framework y lo que puede hacer por ti a la hora de desarrollar temas para tus clientes.

Por supuesto me he dejado muchos puntos importantes por el camino, sino difícilmente habrías llegado hasta aquí. Considera esta guía una primera toma de contacto con el desarrollo de temas hijo con Genesis Framework, donde básicamente has aprendido a cómo customizar un tema hijo existente.

Ten en cuenta que una de las mayores ventajas de Genesis es que el proceso que te he mostrado en esta guía lo podrás aplicar en cualquiera de los temas hijo que StudioPress ofrece en su marketplace. De manera que podrías dedicarte a ofrecer un servicio basado en obtener estos temas y adaptarlos a las necesidades de tus clientes.

De hecho a eso se dedica gran parte de la comunidad de diseñadores web que gira alrededor de este framework (sino me crees investiga en su grupo de Facebook). Se hacen con un pack completo de todos los temas hijo y luego para cada cliente, eligen el más adecuado y lo adaptan. Pero para serte sincero a mi me gusta más crearlo yo mismo, aunque no puedo negar que algunos de sus nuevos temas como «Academy Pro» o «Authority Pro», ambos diseñados por Brian Gardner, me encantan.

Cómo seguir aprendiendo

¿Te ha gustado el contenido de esta guía? ¿Te gustaría seguir profundizando tus conocimientos sobre desarrollo de temas hijo con Genesis? Pues en el Club SiliCodeValley ya puedes encontrar 4 cursos donde aprenderás todo lo necesario para desarrollar paso a paso tus propios temas hijo, con un total de 16 horas en vídeo:

1. Introducción a los Hooks de WordPress: Acciones y Filtros
2. Introducción a Genesis Framework
3. Personalizando temas con Genesis Framework
4. Desarrollo de temas hijo para Genesis Framework

Echa un vistazo al temario y vídeo de introducción de cada curso y te espero en el Club SiliCodeValley 🙂

Me gustaría saber qué te ha parecido esta guía para saber si en un futuro crear más de este estilo. ¡Muchas gracias!

Un abrazo.

[little]Disclaimer afiliado: si decides adquirir Genesis Framework con alguno de mis enlaces, recibiré una pequeña comisión sin coste adicional para ti. De esta forma me ayudas a seguir creando versiones gratuitas de mis cursos de diseño y desarrollo WordPress. Muchas gracias 🙂[/little]