Hay que tener en cuenta que no vamos a contar con un constructor visual al estilo de Elementor o Divi para diseñar y construir nuestros bloques, sino que tendremos que tener conocimientos básicos de HTML y CSS para construir la estructura física del bloque, pero toda la parte de lógica y programación nos la dará el plugin.

Una de las principales características del constructor de bloques es que podemos crear campos dinámicos que podrá rellenar nuestro usuario/cliente para crear el contenido del bloque.

Imaginemos que vamos a crear un CTA (call to action o llamada la acción) consistente en un mensaje o título, un párrafo y un botón con un enlace. Pues podríamos crear un campo dinámico para que el usuario rellene el título del CTA, el texto del párrafo y la URL link de este.

Algo similar a esto:

Artículo disponible en vídeo

1. Instalar Genesis Framework y un child-theme

Desde hace un tiempo, el framework de Genesis es gratuito, por lo que ya no hay excusa para no probarlo. Puedes descargarlo desde la web de studiopress.

Lo siguiente es instalar uno tema hijo de Génesis. Lo más habitual es instalar su Sample Theme, que puedes descargar desde github.

2. Instalar Genesis Custom Blocks

Puedes obtenerlo directamente desde el repositorio de WordPress:

3. Crear un nuevo bloque personalizado

Una vez instalado Genesis Custom Blocks, iremos al menú principal Bloques personalizados – Añadir nuevo

1. Indicamos un nombre para nuestro bloque personalizado, por ejemplo: CTA Máster en WordPRess.
2. Establecemos un slug para nuestro bloque personalizado (intenta evitar tildes y caracteres especiales que no sean guiones básicos).
3. Escoge un icono representativo de tu bloque personalizado.
4. Indica la categoría de bloques de Gutenberg, por ejemplo, dentro de los bloques de Texto.
5. Establece palabras clave para localizar rápidamente tu bloque personalizado dentro del grupo de bloques de Gutenberg.
6. Seleccionar los post types donde quieres hacer uso de tu bloque personalizado, por ejemplo en Entradas y Páginas.

4. Añadir los campos personalizados

Para el ejemplo crearemos cuatro campos personalizados que podrán ser rellenados para construir el contenido del bloque (por supuesto tú puedes crear los que necesites para el tuyo).

El bloque contendrá los siguientes campos:

1. Precio Máster (precio-master) de tipo texto (he comprobado que los campos de tipo número tienen problemas con los decimales).
2. Cupón Máster (cupon-master) de tipo texto.
3. Fecha de validez (fecha-de-validez) de tipo texto.
4. URL Máster (url-master) de tipo texto.

5. Crear los directorios y archivos del bloque personalizado

Tendremos que crear un directorio /blocks dentro del tema activo (en nuestro caso, el child-theme genesis-sample-develop).

Hay 2 formas de crear los archivos del bloque, en ambas necesitamos el slug del bloque personalizado, en nuestro caso cta-master-en-wordpress:

1. Crear un archivo dentro de /blocks llamado block-{slug}.php es decir «block-cta-master-en-wordpress.php
2. Creando un subdirectorio y archivo /{slug}/block.php, es decir /cta-master-en-wordpress/block.php

Y además añadiremos un archivo block.css para los estilos del bloque (este archivo css no hay que declararlo junto al resto de estilos de la plantilla, será reconocido automáticamente por el plugin).

Dentro del archivo block.php insertamos el código:

<div class="cta-master-en-wordpress">
    <h2><strong>Inscríbete por solo <?php block_field('precio-master'); ?>€</strong></h2>
    <p>
        CÓDIGO CUPÓN: <strong><?php block_field('cupon-master'); ?></strong> <br/>
        VÁLIDO HASTA EL: <strong><?php block_field('fecha-de-validez'); ?></strong>
    </p>
    <a class="button" href="<?php block_field('url-master'); ?>" target="_blank">Inscríbete en UDEMY</a>
</div>

Las funciones block_field(‘slug-del-campo’), corresponden a los campos dinámicos que creamos para el bloque personalizado.

Y añadiremos el siguiente código CSS en el archivo block.css:

.cta-master-en-wordpress{
    clear:both;
    width:100%;
    padding:25px;
    background:#f7f7f7;
    text-align:center;
}

.cta-master-en-wordpress a{
    background:#fac038;
    color:#222222;
}

6. Insertar y configurar el bloque personalizado

Ahora podemos dirigirnos a cualquier página o entrada y buscar nuestro bloque personalizado:

Tras añadirnos, nos pedirá rellenar los campos personalizados:

Y tras guardar, este sería el resultado en el front de la página:

Como podemos ver, esto abre un amplio abanico de opciones dentro de la edición por bloques de Gutenberg, donde podemos crear tantos bloques necesitemos, ya sea para nuestro uso particular, o ya sea para integrarlos en plantillas que luego puedan usar nuestros usuarios o clientes. Las posibilidades son infinitas.

Espero que te haya resultado útil este artículo y nos vemos en siguiente

Usando Genesis Framework con su Sample Theme podemos dar forma a prácticamente cualquier tipo de web y las zonas de widgets nos pueden venir muy bien para estructurarla o dejarlas preparadas para que las usen nuestros clientes.

Registrar la zona de widget para la home

Primero debemos registrar una zona de widget, esto podemos hacerlo en el archivo de funciones (functions.php) del child-theme (nunca en el functions.php de Genesis).

//Registrar Widget Cabecera Home
genesis_register_sidebar(array(
	'id' => 'cabecera-home-widget-area',
	'name' => __('Cabecera Home', 'genesis'),
	'description' => __('Widget para la cabecera de la página principal', 'childtheme')
));

Como se trata de un widget que solamente queremos hacer visible en la página principal de la web, podemos crear un archivo front-page.php con este contenido:

<?php
//Mostrar Cabecera Home Widget Area
function cabecera_home_widget_area(){
    genesis_widget_area('cabecera-home-widget-area', array(
        'before' => '<section class="cabecera-home">',
        'after' => '</section>'
    ));
}
add_action('genesis_after_header', 'cabecera_home_widget_area');

genesis();
?>

Es muy importante especificar el mismo ID de sidebar que usamos al registrarlo ‘cabecera-home-widget-area’.

Nuestro widget irá dentro de una sección (<section>) con la clase CSS ‘cabecera-home’, de forma que podremos aplicarle estilos posteriormente.

En esta zona podemos agregar cualquier widget, ya dea de WordPress, de Genesis o un simple HTML personalizado para darle el formato que deseemos a nuestra cabecera. Por ejemplo, vamos a insertar un calendario:

Y este es el resultado en nuestra página principal:

Como puedes ver, lo primero que carga la página es nuestra zona de widget, ya que en la página front-page.php es lo primero que encuentra, además la hemos anclado en el hook ‘genesis_after_header’, justo después de la cabecera de genesis.

Después hemos llamado a genesis(); que se encarga de mostrar el content de la página (contenido que creamos con el editor y que se guarda en la base de datos).

Registrar una zona de widget para todas las páginas

Ahora vamos a crear una zona de widget que se mostrará al final de todas las páginas de nuestra web, algo que podemos aprovechar para insertar un banner o un formulario de newsletter.

Volvemos a nuestro archivo functions.php del child theme para registrar la nueva zona de widget:

//Registrar Widget Banner Footer
genesis_register_sidebar(array(
	'id' => 'banner-footer-widget-area',
	'name' => __('Banner Footer', 'genesis'),
	'description' => __('Widget para banner final en todas las páginas', 'childtheme')
));

La forma de mostrar este banner en todas las páginas (y entradas) de la web es ponerlo dentro del propio archivo de funciones, por lo que lo añadimos así:

//Mostrar Banner Footer en todo el site
function banner_footer_widget_area(){
    genesis_widget_area('banner-footer-widget-area', array(
        'before' => '<section class="banner-footer">',
        'after' => '</section>'
    ));
}
add_action('genesis_before_footer', 'banner_footer_widget_area');

En este caso usamos el hook ‘genesis_before_footer’ que posiciona nuestro banner justo antes del footer de la web.

Si quieres ver una guía de los hooks de Genesis puedes visitar mi artículo (en construcción): Hooks de Genesis Framework (init, header y framework).

Y el resultado:

Utilizando la clase CSS de la sección ‘banner-footer’, podremos centrarlo darle el tamaño que necesitemos, etc.

Recuerda que este widget será visible en cualquier página o entrada de la web, vemos cómo queda en una entrada:

Podemos condicionar dónde queremos que aparezca usando condicionales if y comprobando el tipo de contenido, por ejemplo:

<?php
//Aplica a todas las páginas
if(is_page()){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a todo el contenido que sea de tipo entrada (de cualquier tipo)
if(is_single()){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a un custom post determinado
if(is_singular('custom_post')){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a la página de blog
if(is_home()){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a la página de resultados de búsqueda
if(is_results()){
    //Código para mostrar el widget
}
?>

Espero que te sea de utilidad este artículo y nos vemos en el siguiente post

init.php es un fichero que se encuentra dentro del directorio principal de Genesis, concretamente en la ruta:

themes/genesis/lib/init.php

Es el primer archivo que se carga cuando ejecutamos Genesis, por tanto las funciones que «enganchemos» aquí, serán las primeras que se carguen en el arranque de nuestra web.

Existen 4 hooks principales dentro de init.php:

1. genesis_pre: Es el primer hook que puedes usar en Genesis, ninguna otra función de Genesis se carga antes de este.
2. genesis_pre_framework: Este hook se ejecuta justo después de que Genesis declare las constantes del framework. Por lo que si tu función depende de alguna de estas constantes, deberías usarlo aquí en lugar de en genesis_pre.
3. genesis_init: Se ejecuta después de que se cargue el framework, pero antes de que se cargue la configuración de los themes. Úsalo si tus funciones necesitan cargarse antes del setup del theme, pero dependen de alguna función del framework.
4. genesis_setup: Se usa para definir la configuración del theme.

Si abrimos el archivo podemos localizarlos facilmente por los do_action()

do_action(‘genesis_pre’) es el hook o gancho, que al engancharlo con tu función:

add_action('genesis_pre', mi_funcion);

Sería el equivalente a escribir mi_funcion() en esa parte del archivo init.php, pero sin necesidad de tener que editar init.php. Recuerda que nunca debes modificar un archivo de Genesis directamente, pues todos los cambios se perderán al actualizar a una nueva versión.

Hooks del header.php

Existe 2 archivos header.php, uno situado en themes/genesis/header.php y otro situado en themes/genesis/lib/structure/header.php con hooks que conectan directamente con el primero.

Hooks que podemos encontrar genesis/header.php son:

1. genesis_doctype: Ejecuta tus funciones justo depués del Doctype:

<!DOCTYPE html>
<html lang="es">
<head itemscope itemtype="https://schema.org/WebSite">
<meta charset="UTF-8" />

2. genesis_title: Se antepone a la etiqueta <title> por defecto del documento, por ejemplo:

add_action('genesis_title', 'mi_titulo');
function mi_titulo(){
	echo "<title>Mi título</title>";
}

Coloca «Mi título» por encima del título por defecto, aunque no lo sustituye:

En este caso prevalece el primer <title>

3. genesis_meta: Muy útil para añadir tus propias meta etiquetas. Normalmente las opciones de SEO de Genesis ya añaden las meta etiquetas necesarias, pero si necesitas alguna específica para un servicio o red social concreta, puedes añadirla manualmente aquí.

add_action('genesis_meta', 'meta_descripcion');
function meta_descripcion(){
    echo "<meta description='Mi meta descripción' />";
}

4. genesis_before: Añade tus funciones justo antes de la esctructura web de Genesis, por encima de la cabecera. Por ejemplo:

add_action('genesis_before', 'mi_encabezado');
function mi_encabezado(){
    echo '<h2>Mi encabezado</h2>';
}

5. genesis_before_header: Muy parecido a genesis_before, pero a continuación de algunos a links de Génesis. Se ubica justo antes de la etiqueta de apertura del header (<header>).

6. genesis_header: Engloba todo lo que hay dentro de la estructura <header></header> del documento. A este hook conectan otros hooks del lib/structure/header.php, como el genesis_site_title, genesis_site_description y genesis_header_right. Los veremos a continuación.

7. genesis_after_header: Se ubica justo a continuación de la etiqueta de cierre del header (</header>).

Hooks de genesis/lib/structure/header.php:

Como comentamos en el punto anterior, dentro de este header podemos encontrar hooks que conectan directamente con genesis_header, como pueden pueden ser:

1. genesis_site_title: Ubicado en el título del sitio.
2. genesis_site_description: Ubicado en la descripción del sitio.
3. genesis_header_right: Ubicado en la cabecera derecha del sitio (donde suelen ir los menús principales en los child-themes de Genesis).

add_action('genesis_site_title', 'mi_site_title');
add_action('genesis_site_description', 'mi_site_description');
add_action('genesis_header_right', 'mi_header_right');

function mi_site_title(){
    echo "Mi site title";
}

function mi_site_description(){
    echo "Mi site description";
}

function mi_header_right(){
    echo "Mi header right";
}

add_action('genesis_after_header', 'mi_after_header');
function mi_after_header(){
	echo "Mi after header";
}

Hooks del framework.php

A partir de aquí vamos a ir viendo los considerados «hooks físicos«, pues cada uno de ellos tiene su propia ubicación dentro del tema, por lo que son bastante intuitivos de gestionar.

Dentro de framework.php encontramos 7 hooks:

• genesis_before_content_sidebar_wrap
• genesis_before_content
• genesis_before_loop
• genesis_loop
• genesis_after_loop
• genesis_after_content
• genesis_after_content_sidebar_wrap

Entre ellos se encuentra problablemente el hook más importante de Genesis, el genesis_loop, que usaremos para la mayoría de tareas de programación que tengan que ver con la consulta y carga de contenidos.

framework.php se encuentra en la ruta genesis/lib/framework.php donde podemos ver los hooks mencionados.

1. genesis_before_content_sidebar_wrap: Se ubica justo antes del div content-sidebar-wrap (fuera del contenedor principal de la entrada o página).

add_action('genesis_before_content_sidebar_wrap', 'mi_genesis_before_content_sidebar_wrap');
function mi_genesis_before_content_sidebar_wrap(){
	echo "<b>Este es el genesis_before_content_sidebar_wrap</b>";
}

2. genesis_before_content: Se ubica dentro del div content-sidebar-wrap justo antes del aside o barra lateral (si la hubiera):

add_action('genesis_before_content', 'mi_genesis_before_content');
function mi_genesis_before_content(){
	echo "<b>Este es el genesis_before_content</b>";
}

3. genesis_before_loop: Nos acercamos al loop de genesis, el momento en el que se carga el contenido de una entrada o página. Este hook se ubica justo antes.

add_action('genesis_before_loop', 'mi_genesis_before_loop');
function mi_genesis_before_loop(){
	echo "<b>Este es el genesis_before_loop</b>";
}

4. genesis_loop: Este hook es usado por el propio framework de Génesis para iniciar el loop general (listados de posts, mostrar el contenido de un post…). Dedicaremos un apartado a los hooks que podemos encontrar dentro del propio loop.

5. genesis_after_loop: No tiene misterio, se ubica justo después del loop, una vez que ha cargado todo el contenido (incluso la caja de comentarios de una entrada):

add_action('genesis_after_loop', 'mi_genesis_after_loop');
function mi_genesis_after_loop(){
	echo "<b>Este es el genesis_after_loop</b>";
}

6. genesis_after_content: Al contrario que su homónimo, este se ubica al final del content o sidebar si existiera.

add_action('genesis_after_content', 'mi_genesis_after_content');
function mi_genesis_after_content(){
	echo "<b>Este es el genesis_after_content</b>";
}

La ubicación puede ser un poco confusa dependiendo de cómo esté configurado el sidebar. Pero si observamos el código HTML, vemos cómo se ubica justo al final de la etiqueta aside del sidebar:

Genesis integra una serie de características y funcionalidades a los posts de tipo Entrada o Página, tales como poder seleccionar el esquema de layout para el contenido, opciones de SEO, posibilidad de integrar scripts, etc.

Pero si usas un Custom Post Type o CTP, estas caractarísticas no se adhieren por defecto y debemos declaralas en el archivo de funciones del theme, o en este caso del child-theme de Genesis que estemos usando.

Por ejemplo, yo uso un Custom Post en Gestionatuweb para mostrar mis proyectos o porfolio de trabajos, que registré como «portfolio».

Como puede apreciarse en la pantalla de edición de mi Custom Post, después del content no hay ninguna de las opciones que Genesis aplica a otros tipos de post, como entradas o páginas.

Añado estas líneas en el functions.php del child-theme de genesis:

//Opciones de Genesis Frameworks para cualquier Custom Post
add_post_type_support('post_type_name', array('genesis-archives-settings', 'genesis-seo', 'genesis-scripts', 'genesis-layouts', 'genesis-rel-author'));

Importante sustituir el parámetro ‘post_type_name’, por el nombre de tu custom post, en mi caso ‘portfolio’.

Y compruebo que ahora aparecen opciones que antes no tenía, como las opciones de SEO, la inserción de scripts, las opciones de Diseño para elegir layout, etc.

Añade este código de soporte para cualquier Custom Post Type que necesites, como los portfolios de WordPress, los productos de WooCommerce o tus propios CPT.