¿Quieres entender mejor qué son los hooks de Genesis y cómo sacarles el máximo partido en tus child themes?
Entonces échale un ojo a la charla que di para la WordCamp para desarrolladores Sevilla 2019 (como ponente online) y la WordPress Meetup Girona:
¿Prefieres leer?
Aquí tienes un resumen:
Qué son los hooks de Genesis
¿Recuerdas que, para explicarte qué es Genesis Framework, te hablé de sus ventajas y desventajas?
La última (la segunda, porque tampoco hay tantas ;)) era:
«Genesis Framework añade nuevos hooks.»
Lo cual es un inconveniente SOLO si no tienes ganas de aprender. Pero, si estás aquí, leyendo esto, ya has dejado claro que para ti va a ser una ventaja, y de las gordas. 🙂
Entonces, ¿qué es un hook?
Es un punto o lugar donde puedes añadir, quitar o modificar código.
Y, por supuesto, esto no lo ha inventado Genesis. Solo en WordPress ya tienes más de 2.000 hooks si sumas actions y filters.
Así que los hooks te permiten modificar WordPress, un theme, child theme o plugin «sin tocarlo», y con esto consigues:
- Actualizar el tema sin perder modificaciones.
- Y aumentar la extensibilidad a WordPress, plugins y temas.
Cómo funciona un hook de WordPress
En esta imagen puedes ver el orden de carga de una petición típica de WordPress:
Cuando la secuencia de carga llega a punto donde has enganchado tu hook, este se ejecuta. Por eso es esencial que conozcas bien los hooks y el orden de carga.
Tipos de hooks
1. Action Hooks » Acciones
Las acciones o action hooks ejecutan una función propia, en un lugar preciso, en un momento determinado de la línea de ejecución de WordPress.
Existen action hooks para añadir y para quitar elementos.
2. Fiter Hooks » Filtros
Los filtros o filter hooks de WordPress manipulan la información en un punto concreto de la ejecución antes de que se muestre en la pantalla o de que se almacene en la base de datos.
Con estos filtros modificas un fragmento código ya existente.
Cómo localizas el hook que te interesa en Genesis
Genesis Framework tiene más de + 200 hooks (215, para ser exactos); pero no tienes que aprendértelos de memoria.
Existen herramientas que te muestran visualmente donde se cargan cada uno de ellos, como Genesis Visual Hook Guide.
¿Lo mejor? Todos empiezan por genesis_ y siguen una lógica.
Ejemplos prácticos del uso de hooks en Genesis Framework
¿Qué puedes hacer con un hook de Genesis?
El límite está en tu imaginación:
- Mostrar u ocultar o reposicionar elementos:
- Menús
- Metainformación (autor, fecha, categorías…)
- Imagen destacada
- Caja de autor
- Agregar un widget o block área
- Añadir un CTA o avisos en la cabecera
- Mostrar u ocultar la sidebar
- Cambiar los créditos del footer
- Añadir un cajetín de suscripción al final del post
- …
Anatomía de un hook de Genesis
Así son por dentro los hooks:
- El tipo acción: añadir, quitar o modificar (azul).
- El hook o lugar donde vas a enganchar tu código (rojo, 1ª parte).
- La función que quieres enganchar (rojo, 2º parte)
Action Hook:
- add_action( ‘nombre_action_hook’, ‘nombre_funcion’, 10);
- remove_action( ‘nombre_action_hook’, ‘nombre_funcion’, 10);
Filter Hook:
- add_filter( ‘nombre_filter_hook’, ‘nombre_funcion’, 10);
Ejemplo 1: enganchar la imagen destacada bajo el título en Genesis Sample
Genesis Sample por defecto no muestra la imagen destacada en los artículos, pero con un sencillo snippet puedes hacer que se muestre debajo del título usando el hook genesis_entry_content:
// Mostrar la imagen destacada bajo el título de la entrada
add_action( 'genesis_entry_content', 'featured_post_image', 8 );
function featured_post_image() {
the_post_thumbnail('post-image');
}Ejemplo 2: enganchar la imagen destacada sobre el título en Genesis Sample
¿O quizás prefieres que se muestre encima del título?
Entonces debes cambiar el hook por genesis_before_entry:
// Mostrar la imagen destacada sobre el título de la entrada
add_action( 'genesis_before_entry', 'featured_post_image', 10 );
function featured_post_image() {
the_post_thumbnail('post-image');
}Ejemplo 3: eliminar la metainformación de las entradas
En este caso necesitas usar el tipo de acción remove_action:
// Eliminar metainformación superior de las entradas
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );Ejemplo 4: eliminar categorías y etiquetas del pie de las entradas
Usando el mismo tipo de acción (remove_action) pero cambiando el lugar y la función:
// Eliminar categorías y etiquetas del pie de las entradas
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );Ejemplo 5: registrar una nueva área de widget
Para registrar un nuevo área de widget necesitas usar la función genesis_register_sidebar:
// Registrar la nueva widget area
genesis_register_sidebar(
array(
'name'=>'Widget area personalizada',
'id' => 'custom-widget',
'description' => 'Widget area personalizada localizada en...',
'before_widget' => '<div id="%1$s" class="widget %2$s"><div class="widget-wrap">',
'after_widget' => "</div></div>",
'before_title' => '<h4 class="widgettitle">',
'after_title' => "</h4>"
)
);Ejemplo 5: añadir esa widget area al hook deseado
Una vez que has creado tu nueva área de widget puedes engancharla al hook que prefieras.
¿Por ejemplo?
Con genesis_after_content la enganchas al final de la entrada (para añadir un cajetín de suscripción, por ejemplo):
// Añadir el widget area al hook deseado
add_action( 'genesis_after_content', 'cg_custom_widget' );
function cg_custom_widget() {
genesis_widget_area( 'custom-widget',
array(
'before' => '<div id="custom-widget">',
'after' => '</div>'
)
);
}Pero si sustituyes genesis_after_content por genesis_before_header, puedes usarla para agregar una «Utility bar»
Dónde colocar las modificaciones a los hooks de Genesis
Te recomiendo 2 opciones:
- En el fichero functions.php si la modificación es específica del diseño del tema que estás usando.
- En tu plugin de funcionalidades (after_setup_theme) si se trata de modificaciones comunes para cualquier diseño u otras funcionalidades que vas a usar habitualmente en instalaciones diferentes.
- En ficheros de plantilla (single.php, archive.php…) si se trata de una funcionalidad ligada a esa plantilla.
Conclusiones
Ahora ya sabes:
- Qué son los hooks ➟ Ubicaciones donde modificar código.
- Qué tipos de hooks hay en Genesis ➟ Acciones y filtros.
- Para qué sirven ➟ Modificar el aspecto de un child theme «sin tocarlo».
- Cómo usarlos ➟ Con ejemplos y apoyándote en herramientas para localizarlos.
- Dónde almacenar tus modificaciones ➟ En functions.php, plugin propio o fichero plantilla.
Recursos de Genesis Framework
Código Genesis es el lugar perfecto para sacarle partido a Genesis Framework, una biblioteca de tutoriales guiados en español para personalizar tus temas, soporte para dudas y snippets a medida.
O lo que es lo mismo, ¡pide por esa boca!
