La guía más completa de Genesis Framework en español

Muchos pensaban que el uso de Genesis Framework por parte de algunos de los blogueros más famosos era una cuestión de moda (en 2010), pero el tiempo ha demostrado que eso no es así y que sigue siendo una buenísima opción a la hora de crear la base de cualquier negocio online con WordPress.

Boluda.com (de Joan Boluda), inteligenciaviajera.com (de Antonio G.), viviralmaximo.net (de Ángel Alegre), lifestylealcuadrado.com (de Franck Scipion), ciudadano2cero.com (de Berto López) o victormartinp.com (de Víctor Martín) son las webs de algunos de los blogueros más conocidos en España en la actualidad y están hechas con WordPress y Genesis Framework.

Es más, aunque llevan años en la blogosfera y han hecho varios rediseños de sus respectivas webs conforme han ido evolucionando sus proyectos, han seguido usando Genesis.

Y este también ha sido mi caso. Así que déjame que te cuente algunas cosas sobre este framework open source y gratuito, porque lo conozco un poquito ;)

WordPress.org, imprescindible para instalar Genesis

Lo primero que tienes que saber es que sólo podrás instalar Genesis Framework en tu blog si usas WordPress.org, es decir, si tienes tu propio servicio de alojamiento contratado ¿Por qué?

La razón es muy sencilla: los blogs alojados en WordPress.com, en realidad, forman parte de un multisite, es decir, dependen de una instalación superior y principal que es la que toma el control de todo lo relacionado con los aspectos más técnicos y delimita los poderes de administración.

Por eso, incluso uniéndote a uno de sus planes de alojamiento de pago e incorporando tu propio dominio en él, tampoco podrás instalar plantillas premium más allá de las que te ofrezcan al contratar tu plan.

Así que no podrás instalar Genesis en WordPress.com, tendrás que usar WordPress.org para poder hacerlo.

¿Qué es un framework?

Es una especie de tema o plantilla que actúa como plataforma o base sobre la que construir tu blog, aumentando su potencial y aportándole algo más que una apariencia.

Concretamente, Genesis Framework integra características de SEO (ya sabes, optimización para posicionamiento en buscadores), seguridad y rendimiento que te pueden ayudar a potenciar tu blog de WordPress.

Para que lo entiendas mejor, y si lo comparáramos con un coche, WordPress sería el motor, el framework sería la estructura o chasis  y la plantilla o tema sería la chapa y pintura (lo que le haría tener la apariencia que deseas).

Al instalar Genesis Framework, tienes dos opciones: construir tu blog usando el tema hijo (child theme) básico que trae (el Genesis Sample) o adquirir, de entre las muchas plantillas que hay (temas hijo), una cuyo diseño se ajuste ya de entrada a lo que tú necesitas.

Ten en cuenta que el Genesis Sample es una plantilla que viene muy pelada y que necesitarás tiempo y conocimientos para personalizarla.

Si lo que quieres es empezar cuanto antes o no tienes experiencia con el código o con el editor de bloques de WordPress, te recomiendo empezar por una plantilla que sea ya lo más parecida a la estructura que tú quieres, para no tener que modificar cosas con código.

(En Elige el más adecuado de entre los mejores temas para WordPress encontrarás algunas pautas que te pueden ayudar a hacer una buena elección)

Antes, cuando comprabas un child theme (o plantilla) de Genesis y lo instalabas, todavía te quedaba una buena faena de personalización por delante para dejarlo como habías visto en la demo antes de comprarlo.

Desde la versión 2.10 de Genesis, ya no pasa eso: con unos clics lo tienes listo, para que solo tengas que preocuparte de sustituir el contenido de la demo por el tuyo.

Aquí tienes un ejemplo de lo fácil que es dejar un tema como en la demo en la actualidad (son solo un clic).

En cualquier caso, necesitarás un tema hijo para hacer funcionar Genesis, no podrás instalarlo solo.

¿Qué es un child theme o tema hijo?

Un child theme es una capa de código que funciona sobre el Genesis Framework y contiene, principalmente, los elementos de diseño de tu web, pero también puede modificar o aumentar las funcionalidades que trae por defecto el framework.

La combinación Framework + tema hijo en tu web es muy interesante, principalmente, porque separa lo relacionado con el rendimiento de lo relacionado con el diseño.

Usando un tema hijo puedes modificar todo lo que quieras el diseño de tu web sin peligro de comprometer la parte del código que se encarga de hacerla potente, es decir, sin miedo a cargarte el sitio.

Además, las personalizaciones que realizas en el child theme no se pierden aunque actualices WordPress o el propio Genesis (el framework).

Pero ¿qué pasa si lo que actualizas es el tema hijo o child theme?

Pues por mi experiencia de años usando este framework, te diré que normalmente tampoco pasa nada.

La única actualización del child theme que podía cargarse todas las personalizaciones ha sido una actualización, relativamente reciente, que sacaron para todos los child themes a propósito de Gutenberg.

Evidentemente, este tipo de actualización es un caso excepcional, ya que el paso a Gutenberg supuso cambios importantes a nivel estructural.

Aún así, tampoco pasó nada, porque los chicos de WP Engine (actuales propietarios de StudioPress) te avisaban de ello y te ofrecían una opción para adaptar tu child theme a Gutenberg sin tener que ejecutar dicha actualización y sin perder tus personalizaciones.

Actualmente, todos los temas de Genesis son 100% compatibles con Gutenberg. Así que ¡sin problemas!

Cómo implementar Genesis Framework en tu web

A la hora de implementar Genesis Framework en tu web, tienes varias opciones. Algunas son totalmente gratuitas, otras no.

El elegir una u otra opción dependerá del nivel de conocimientos que tengas, del grado de personalización que necesites para tu diseño y del tiempo o dinero que estés dispuesto a invertir en él.

¡Vamos a ver cuáles son estas opciones!

Opción 1. Usar Genesis Framework y su plantilla básica

Puedes beneficiarte de las ventajas de usar Genesis Framework en tu web sin pagar ni un euro, desacargándolo gratis junto a su tema hijo base (Genesis Sample) y realizando tus personalizaciones sobre él.

Si buscas un diseño personalizado pero sin llegar a ser excesivamente particular, puedes combinar el tema hijo base y gratuito con Gutenberg (el propio editor de WordPress) y con alguna colección de bloques (también las hay gratuitas y Genesis Blocks es una de ellas) para obtener el resultado deseado sin tener que tocar código. Eso sí, te llevará su tiempo.

Si lo que quieres es crear un diseño muy específico y 100% a tu gusto, esta es tu mejor opción, pero tendrás que tocar código (necesitarás tener conocimientos de PHP y de CSS) para llevar a cabo las personalizaciones sobre el tema base o tendrás que disponer del constructor Genesis Pro (de pago) para poder construirlo todo más rápido y de forma visual, como veremos más adelante.

Opción 2. Usar Genesis Framework con un tema hijo premium

Si solo necesitas un poco de personalización y no quieres ni perder mucho tiempo ni tener que tocar código, esta es la opción más adecuada para ti, ya que te permite elegir un tema cuya estructura se adapte ya de entrada a lo que buscas y cambiar de forma rápida el logo, los colores y cuatro cosillas más.

En este caso, podrás llevar a cabo las personalizaciones desde el mismo personalizador de Genesis, con solo unos clics.

Además, todos los temas de Genesis son compatibles con Gutenberg, se adaptan perfectamente a dispositivos móviles y son amigos de la accesibilidad.

Sin duda es la opción que te recomiendo si quieres empezar rápido con tu web y sin complicaciones.

¿Problema?

Actualmente, no se venden los temas premium de Genesis por separado. Para poder acceder a ellos tienes que disponer de la suscripción a Genesis Pro (si solo vas a crear un diseño para una única web, seguramente tendrá un precio demasiado elevado para ti) o tener tu web alojada en WP Engine (todos los planes de hosting incluyen los diez mejores temas premium y soporte específico).

Tengo que decirte que el alojamiento de WP Engine no es de los más baratos (va desde los 252€/año), pero sí de los mejores. Para proyectos exigentes es una buenísima opción.

Opción 3. Usar Genesis Pro

Al adquirir Genesis Pro, adquieres el plugin que te permitirá diseñar desde cero cualquier web con Genesis de manera rápida y sencilla (como lo harías con un constructor visual y sin tener que andar tocando código).

También te da acceso a todos los temas Genesis creados por StudioPress, por si quieres instalar un tema ya prediseñado y personalizarlo con unos pocos clics.

Esta opción te interesa si te encuentras en una de estas dos situaciones:

• Te dedicas a hacer webs personalizadas para clientes.
• Por las características de tu proyecto, necesitas cambiar a menudo y de forma rápida la apariencia de tu web.

El precio de esta opción es de 360$ (unos 302€)/ año.

Todas estas opciones permiten instalar Genesis en tantas webs como quieras, sin limitación de licencia por sitio. El soporte premium, evidentemPero no te preocupes, porque Genesis Framework cuenta con una larga trayectoria y una gran comunidad, y te será fácil encontrar documentación muy detallada sobre cualquier cuestión que te preocupe.

¡Veamos cómo llevar a cabo la instalación!

Cómo instalar Genesis Framework y un tema hijo

Si te ha dado la sensación de que tener el framework por un lado y el tema por otro era muy lioso ¡Nada más lejos de la realidad!

La instalación es muy sencilla porque se lleva a cabo exactamente igual que si instaláramos cualquier tema o plantilla de WordPress, solo que el proceso se repite dos veces: una para el framework y otra para el tema hijo.

Así que puedes elegir si hacerla vía FTP o vía panel de WordPress, como harías con cualquier otro tema de WordPress.

La manera más sencilla es hacerlo desde el mismo panel de administración de WordPress (Apariencia → Temas → Añadir Nuevo).

Primero instalas el Genesis (el framework) como si fuera un tema y luego instalas el tema hijo o plantilla que hayas elegido.

Una vez instalados, activas los dos (primero el framework y luego el tema), ya  que ambos deben permanecer siempre activos para funcionar, porque el funcionamiento de uno depende del otro.

Para que te hagas una idea, es como si tuvieras dos temas activados a la vez en tu WordPress.

Si solo activas uno, te avisa para que actives el otro también y si no lo haces, no es que se rompa nada, es que Genesis no funciona y entonces la web se te queda funcionando con el tema que tuvieras originalmente.

¡Ah! Y no te preocupes, porque el hecho que tengas estos dos temas instalados no hará que tu web vaya más lenta ni nada de eso.

Están los dos muy bien integrados entre ellos y con WordPress, y se llevan muy bien con Google ;)

Y, para muestra, no un botón, sino dos. Mira:

¿Me preocupo por la optimización de mis webs?

Sí, pero te aseguro que para nada voy al detalle y que no me privo de nada. Si lo hiciera, las webs aún serían más rápidas.

Genesis Framework ha aguantado siempre todo lo que le echado. Incluso cuando empecé a usarlo y hacía auténticas barbaridades con él, siempre me respondió sin problemas.

Configuración de Genesis framework

Lo primero que tienes que saber es que, antes, los ajustes generales de Genesis (el framework) y los de personalización del tema hijo se hacían desde páginas diferentes.

Con ajustes generales me refiero a opciones para configurar cosas como, por ejemplo, los scripts de la cabecera y del pie, la apariencia de los archivos de contenido o la estructura de la página del blog.

Y con ajustes de personalización me refiero a opciones para configurar, por ejemplo, la identidad del sitio, los colores, la imagen de cabecera o de fondo, los menús, los widgets, etc.

Todos los ajustes, en el Personalizador

Actualmente, tanto los ajustes generales como los de personalización se encuentran en un mismo lugar, el personalizador.

Y, desde ahí mismo, puedes ir viendo cómo se verán tus cambios en la pantalla de un ordenador, de una tablet o de un móvil mientras los realizas.

A día de hoy, aún puedes acceder a él desde dos lugares diferentes de tu panel de control de WordPress: Genesis → Ajustes del tema o Apariencia → Personalizar.

Pero es de esperar que eso también se unifique en breve (¿para qué conservar dos rutas diferentes para acceder a un mismo lugar?).

No te preocupes, te informaré y actualizaré este contenido cuando eso suceda.

Configuración del tema hijo

Desde Genesis » Configuración del tema hijo podrás convertir tu tema en el de la demo en cualquier momento, con un clic y sin perder tus contenidos (solo cambiará la apariencia).

SEO

Genesis por sus característica, es un tema muy optimizado para favorecer el posicionamiento en buscadores (SEO).

Incorpora el Schema (de contenido), cosa que a día de hoy todavía no viene dado por defecto en WordPress (aunque está previsto que llegue pronto).

Esta característica hace que los contenidos de una web aparezcan correctamente «etiquetados y clasificados» y sean más fácil de encontrar y de entender para los buscadores.

A no ser que por algún motivo concreto quieras cambiar el Schema original (podrías hacerlo mediante código o plugin), no tendrás que hacer absolutamente nada, ya que Genesis lo crea de forma automática.

Genesis viene con ajustes propios para SEO.

Esto quiere decir que no tendrás que instalar ningún plugin de SEO, si no quieres (si quieres hacerlo, puedes hacerlo sin problemas y Genesis deshabilitará los ajustes propios y usará los de tu plugin).

Ahora bien, hay que tener en cuenta que si se usa esta opción, tanto las personalizaciones como los datos obtenidos desaparecen si algún día abandonamos Genesis.

No pasa nada porque podemos usar un plugin del repositorio de WordPress que se llama SEO Data Transporter para trasladar estos datos a cualquiera de los plugins de SEO más usados, como por ejemplo el WordPress SEO by Yoast (también podéis optar por usar este último plugin directamente en vez de usar las opciones de SEO que trae el propio Genesis).

Si decides usar Genesis SEO en vez de usar un plugin de SEO, también tendrás una página para llevar a cabo los ajustes generales relacionados con el SEO (Genesis » Configuraciones de SEO).

Además, a la hora de editar una entrada, te aparecerán diferentes opciones para configurar el SEO específico de la entrada.

Opción de importar y exportar ajustes de Genesis

Desde tu panel de control de WordPress puedes acceder a Genesis » Importar/Exportar para llevarte o traer todos tus ajustes de Genesis de una web a otra.

Configuración de la Home o página de inicio con Genesis

Desde Ajustes → Lectura de tu panel de WordPress, puedes elegir si quieres que la página de inicio muestre las entradas del blog o una página estática (en este caso, también podrás hacer después que se muestren las entradas del blog en una zona concreta de la página).

Desde Apariencia → Widgets podrás acceder a todas las áreas de widgets que traiga el tema hijo que hayas elegido (cada tema dispondrá de unas u otras). Solo tendrás que ir arrastrando widgets hacia ellas.

Aunque, ahora, también puedes hacer todo esto desde el Personalizador (y es desde donde te recomiendo que lo hagas, porque es mucho más visual).

Configuración de los menús con Genesis

La creación y configuración de los menús puedes realizarlas desde tu panel de WordPress, yendo a Apariencia → Menús (interfaz clásica del propio WordPress) o a Apariencia → Personalizar → Menús (interfaz visual de tu tema).

La creación y configuracion de menús se hace exactamente igual que con cualquier otro tema de WordPress.

Áreas de widgets comunes en los temas de Genesis

Casi todos los temas hijo de Genesis suelen incluir las siguientes áreas de widgets:

• Encabezado derecho
• Barra lateral primaria
• Después de cada post
• Pie de página

Eso sí, la mayoría de los temas de Genesis incorporan áreas extra donde añadir widgets, con la finalidad de que el tema sea más personalizable de una manera rápida.

Es importante que que te fijes en qué áreas para widgets tiene habilitadas un tema antes de adquirirlo, para ver si se ajusta a lo que necesitas.

Porque, evidentemente, con código puedes añadir nuevas áreas, pero el tener habilitadas desde el principio las que necesitamos, nos ahorrará mucha faena.

Puedes acceder a las áreas de widgets desde Apariencia → Widgets y desde Apariencia → Personalizar → Widgets

Al instalar Genesis y activar cualquier tema hijo, te aparecerán tres widgets nuevos que podrás usar en cualquiera de las áreas habilitadas en tu tema para incluir widgets. Esto es:

• Página destacada
• Post destacado
• Perfil de usuario (para mostrar el gravatar y la bio o un texto personalizado).

Puedes usar tanto widgets específicos de Genesis como widgets para WordPress en general (de hecho, las demos de algunos temas incluyen de ambos).

Como usar tu propio logo, imagen de cabecera o icono

Tanto desde Apariencia → Cabecera como desde Apariencia → Personalizar → Cabecera, podrás añadir la imagen que tú quieras poner en esa zona (siempre que el tema tenga habilitada la opción, que prácticamente todos la tienen).

Desde Ajustes → Personalizar → Identidad del sitio, puedes añadir o cambiar el icono, es decir, la imagen que se ve en la pestaña del navegador cuando alguien entra en tu web.

También tienes la opción de mostrar el nombre del sitio o un logo en la cabecera.

Sobre las plantillas de página en Genesis

En general, todos los temas disponen de plantilla Archivo y Blog para las páginas.

Pero dependiendo del tema, puede haber algunas más como, por ejemplo, Landing y Pricing.

Cuanta más variedad de plantillas de página, mejor, porque eso te permitirá cambiar la estructura de tus páginas con mucha facilidad y rapidez.

Es otro de los factores a tener en cuenta a la hora de elegir el tema hijo más adecuado para tu proyecto.

Qué son y para qué sirven los hooks de Genesis

Los hooks o ganchos son pequeños fragmentos de código que nos ofrecen la posibilidad de aumentar las funcionalidades de un tema de manera fácil y rápida.

En Genesis los hay de dos tipos: los action hooks (para añadir funcionalidades) y los filter hooks (para sustituir funcionalidades).

La Visual Hook Guide te hace muy fácil identificar las ubicaciones de los hooks dentro de cualquier tema Genesis.

Y si no te aclaras a la hora de introducir cada cosa en su sitio, el plugin Genesis Simple Hooks te lo pone aún más fácil, ya que permite insertar código y adjuntarlo en diferentes sitios de tu web si tener que crear funciones.

Seguramente te estarás preguntando qué código vas a meter tú ahí si no tienes ni idea. Pues ¡no te preocupes! Para eso están los llamados snippets :-)

Los snippets son pequeños fragmentos de código, ya predefinidos, que solo tienes que copiar y pegar para añadir, quitar o modificar funcionalidades.

Los hay casi para cualquier cosa. Aquí puedes encontrar muchos de ellos.

De todas formas, no te líes, porque esto solo lo usarás si quieres convertir el tema que compres (o el tema base gratuito) en algo casi a medida.

Por eso, aunque parezca algo complejo, no tienes que preocuparte, porque en realidad es una gran opción para convertir cualquier tema en un tema a medida sin saber código.

La mayoría de la gente no usa estas opciones, ni con Genesis ni sin él.

Plugins específicos para Genesis

Antes de nada, decirte que todos los plugins de WordPress son compatibles con Genesis, pero también podrás usar algunos más que han sido creados específicamente para Genesis.

Los podrás encontrar e instalar desde tu panel de WordPress, como cualquier plugin.

De hecho, ahora, desde Genesis » Plugins para Genesis, puedes acceder a sus plugins oficiales (aunque encontrarás muchos más, de terceros, en el repositorio de WordPress).

Algunos de los más usados son:

• Genesis Blocks (antiguo Atomic Blocks, colección de bloques de Gutenberg personalizables).
• Genesis Custom Blocks (permite crear bloques totalmente personalizados en cuanto a diseño y funcionalidad; ideal para desarrolladores).
• Genesis Author Pro (para mostrar colecciones de libros).
• Genesis e-News Extended (para incluir un formulario de suscripción en tu web, integrado con tu servicio de correo).
• Genesis Connect for WooCommerce (integra completamente WooCommerce con Genesis y con cualquiera de sus temas hijo).

Y lo mejor de todo: todos estos plugins son gratuitos.

Compatibilidad con constructores visuales

Con la aparición de Gutenberg (el editor nuevo de WordPress), la reciente implementación del Personalizador de Genesis y la aparición del plugin gratuito Genesis Blocks, cada vez tiene menos sentido usar otros constructores visuales.

Aún así, si en algún momento necesitas usar alguno, para crear alguna página especial o por necesidades concretas de un proyecto, tienes que saber que Genesis es totalmente compatible con Thrive Architect y con Elementor.

Eso sí, te recomiendo no abusar de ellos, independientemente de que uses Genesis Framework o no y por una cuestión de optimización del rendimiento de tu web.

Yo los he usado a veces, pero para cosas muy puntuales.

Sobre las actualizaciones de Genesis Framework

La mejor manera de mantener Genesis actualizado en tu sitio web es activar la opción de “Buscar actualizaciones” desde tu panel de administración de WordPress (Genesis → Ajustes del tema).

De esta manera, cuando haya una actualización disponible, en tu panel de WordPress se mostrará un aviso avisándote de ello para que puedas decidir cuando actualizar.

Como ves, la actualización de Genesis no presenta ningún problema, porque se realiza igual que la de cualquier otro plugin o tema de WordPress, desde el mismo panel de control, con un clic.

Evidentemente, también podrías realizarla manualmente vía FTP si quisieras, pero ¿para qué?, si así es mucho más sencillo.

¿Precauciones? Las de siempre que actualizas WordPress o alguno de sus temas o plugins: copia de respaldo previa.

Comunidades Genesis framework en español

Aparte de en la web oficial de StudioPress, donde encontrarás un montón de información sobre Genesis y sus temas, existe el grupo de Slack GenesisWP, de Genesis UK (puedes solicitar acceso al grupo desde aquí: http://genesis.community/slack/).

Dentro de ese grupo de Slack, existe un canal sobre Genesis en español.

También existe un Grupo público de Genesis Framework en Facebook en español. El grupo fue creado por Víctor Alejandro García (de Méjico y miembro del grupo de Slack también) y, en la actualidad, lo administramos él y yo.

Si os interesa pertenecer a él, solo tenéis que seguir el enlace y solicitar vuestra invitación ;)

¿Ya estás usando Genesis? ¿Te estás planteando el usarlo?

¡Te espero en los comentarios!