Qué son los hooks o ganchos en WordPress y para qué sirven

Fecha: 09/11/2018
Esta semana quería publicar en el blog de Raiola un post sobre cómo crear un plugin desde cero. Sin embargo, para aprender y comprender correctamente cómo desarrollar themes y plugins en WordPress, es MUY IMPORTANTE saber cómo funcionan los hooks o ganchos y cuál es su orden de carga.

Además, ten en cuenta que necesitas tener unos conocimientos básicos sobre PHP. Si no es tu caso, te recomiendo que antes de empezar busques algún tutorial de PHP básico para poder abarcar este tema. Sin más preámbulos... ¡Vamos al lío!

Índice del artículo
  • ¿Qué son los hooks en WordPress?
  • Action hooks o acciones
  • Filter hooks o filtros
  • Conclusión

¿Qué son los hooks en WordPress?


WordPress, a diferencia de otros gestores de contenido, utiliza una arquitectura basada en eventos y procedimientos. Si quieres desarrollar tanto temas como plugins en este CMS, es esencial que aprendas a utilizar el sistema de hooks o ganchos.

Los ganchos o hooks en WordPress son puntos concretos y estratégicos dentro del core de WordPress que permiten añadir funcionalidades o modificar un comportamiento. Cuando la secuencia de carga llegue a ese punto concreto, se ejecuta la función que has “enganchado”.

orden carga action hook wordpress

De esta manera, podrás modificar el funcionamiento del código de WordPress sin ni siquiera tocarlo. Sin embargo, tienes que ser consciente de que los hooks no se ejecutan aleatoriamente, sino que siguen un orden. La siguiente imagen pertenece a Rarst.net, concretamente a un artículo que se llama “Make sense of WordPress core load”:

orden carga hooks

Me gusta mucho porque ilustra muy bien parte del orden de carga de una petición típica de WordPress (aunque no está completo, pero no importa). La idea es que entiendas cómo funciona y con esto es suficiente. He marcado con un cuadro rojo los action hooks (un tipo concreto de gancho, ahora te explico) para que puedas ver cómo se van ejecutando desde arriba hasta abajo.

En WordPress existen dos tipos de hooks: acciones (actions hooks) y filtros (filters hooks). Aunque se utilizan de la misma manera, el valor que devuelve cada uno es diferente.

Action hooks o 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. Cuando llega a un punto concreto, realiza la acción que quieras además de las que ya se van a ejecutar por defecto. En resumen, los action hooks añaden código adicional a tu WordPress.

Si te fijas en el código que aparece en la primera imagen de este post, todos los hooks se llaman con la función do_action(‘nombre_hook’).

funcion do_action

Así es como puedes localizar en qué puntos de WordPress están los action hooks. Para verlo más claro, te voy a poner un ejemplo sencillo: imagina que necesitas agregar código CSS personalizado dentro de la cabecera de tu web.

En el código de WordPress existe una función que se llama wp_head() que se define en el archivo /wp-includes/general-template.php. Esta función utiliza do_action() para crear un punto con el que puedas trabajar con el gancho wp_head.

Si abres el archivo header.php de tu theme principal, verás que entre las etiquetas <head></head> se llama a la función wp_head().

action hook wp head

Cuando la ejecución de tu WordPress llega a ese punto, el código que realmente ejecuta wp_head(); es do_action(‘wp_head’);, creando así un punto de anclaje justo antes del cierre de la etiqueta <head>. De esta manera, cuando tú enganches tu función al hook wp_head, se añadirá el código CSS que tienes preparado al header.php de tu theme.

Pero la función do_action(); no solo se utiliza en el core de WordPress y esto es MUY INTERESANTE. Por ejemplo, si estás desarrollando un plugin o tema para WordPress puedes “preparar” hooks para que otra persona “enganche” a tu plugin o theme sus funciones personalizadas.

Ahora, lo que me falta por enseñarte es cómo usar un action hook de WordPress. Para “engancharte” a un hook vas a utilizar la función add_action();. Para aprender a usarla, lo primero que debes conocer es la sintaxis o estructura de un action hook:
add_action( string $nombre_accion, callable $nombre_tu_funcion, int $prioridad, int $numero_parametros=1);


  • $nombre_acción (requerido): El nombre de la acción a la que se va a enganchar la función que añadas en $nombre_funcion.

  • $nombre_funcion (requerido): El nombre de la función que creaste para utilizar con este action hook.

  • $prioridad (opcional):  Se especifica el orden en el que se ejecutan las funciones que están asociadas a ese gancho. Su valor por defecto es 10. Cuanto más pequeño es el número, antes se ejecuta esa función. Si el valor es igual entre dos funciones, se ejecutará antes la que se haya agregado primero al action hook.




  • $numero_parametros (opcional): Un número que indica la cantidad de parámetros que vas a pasar a la función. Por defecto, es 1.


Ahora que conoces la estructura de un action hook, te voy a enseñar cómo es el código que tienes que usar. ¡OJO!, este tipo de experimentos tienes que hacerlos en un entorno de pruebas. No lo hagas nunca sobre tu web hasta que estés al 100% seguro de que va a funcionar y no vas a dejar caída tu página.

Para que veas cuál es el código que hay que poner y cómo se usa, vas a crear un action hook que deshabilite el widget de calendario.
Si no tienes un tema hijo en tu web ni sabes lo que es, te sugiero que le eches un ojo al siguiente artículo: Qué es un tema hijo y cómo crearlo

Primero, edita el archivo functions.php del tema hijo del entorno de pruebas y añade el siguiente código dentro de la etiqueta de apertura y cierre de PHP:
function miprimerafuncion()
{
//Mi código personalizado
}
add_action(‘[NOMBRE_HOOK]’,’miprimerafuncion’);

En el ejemplo, he nombrado a la función como ‘mi primera funcion’ pero tú la puedes llamar como quieras. Lo único que tienes que tener en cuenta es que en WordPress el nombre de la función tiene que ser exclusivo. No puede llamarse igual que ninguna otra. De lo contrario, tu página podría dejar de funcionar.

Para poder eliminar el widget del panel de control, vas a utilizar un hook de WordPress que se activa justo después de que se hayan registrado todos los widgets: widgets_init. Por lo tanto, deberás cambiar [NOMBRE_HOOK] por widgets_init.
add_action(‘widgets_init’,’miprimerafuncion’);

Ahora solo tienes que añadir el código necesario dentro de tu función. En la documentación oficial de WordPress podrás encontrar una función que realiza la tarea que necesitas: unregister_widget();.
function miprimerafuncion()
{
unregister_widget(‘WP_Widget_Calendar’);
}

Listo. Como ves en la siguiente imagen, ya no puedes utilizar el widget del calendario.

ejemplo action hook

Si quieres ver todos los action hooks que existen, aprender a utilizarlos y saber en qué orden cargan, te recomiendo que visites la documentación oficial de WordPress sobre Action Hooks.

Filter hooks o 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 se almacene en la base de datos.

Por ejemplo, puedes cambiar el título de una página antes de que salga en la pantalla del usuario, añadir más contenido al título de un post, cambiar el texto de un botón...

Al igual que con los action hooks, te voy a enseñar cuál es la estructura o sintaxis de un filter hook:
add_filter( string $nombre_filtro, callable $nombre_tu_funcion, int $prioridad, int $numero_parametros=1);


  • $nombre_filtro (requerido): El nombre de filtro con el que quieras trabajar.

  • $nombre_funcion (requerido): El nombre de la función que se ejecutará cuando el filtro se active.

  • $prioridad (opcional):  Se especifica el orden en el que se ejecutan las funciones que están asociadas a ese gancho. Su valor por defecto es 10. Cuanto más pequeño es el número, antes se ejecuta esa función. Si el valor es igual entre dos funciones, se ejecutará antes la que se haya agregado primero al action hook.

  • $numero_parametros (opcional): Un número que indica la cantidad de parámetros que vas a pasar a la función. Por defecto, es 1.


Seguro que te resulta muy familiar. Realmente los action hooks y los filter hooks son muy similares y se utilizan de la misma forma aunque se usen para cosas diferentes:

  • Los filter hooks reciben un parámetro de entrada que tú vas a modificar y devolver al hook correspondiente.

  • No se llaman con la función do_action(), como en el caso de los action hooks, se utiliza apply_filters(); por lo que tendrás que localizar en el código de WordPress los puntos en los que puedes engancharte al hook con esta función.

  • No se referencia con add_action(); sino que se usa add_filter();


Abre otra vez el archivo functions.php de tu tema hijo. Te voy a enseñar a cambiar el texto del botón de “Leer más” de un blog. Seguro que muchas veces te has encontrado blogs en español con el botón de Leer más en inglés. Pues la verdad es que se cambia de una manera muy rápida y fácil:
function misegundafuncion($texto)
{
//El texto de Read More… se va a sustituir por la cadena que devuelvas en esta función
$texto=”Leer más”;
return $texto;
}

add_filter(‘except_more’,’misegundafuncion’);

Listo. Como ves en la siguiente imagen, el nombre del botón antes era Read More y ahora pone Leer más.

ejemplo filter hook

Si quieres ver todos los filter hooks que existen y aprender a utilizarlos correctamente, te recomiendo que visites la documentación oficial de WordPress sobre Filter Hooks.

Conclusión


Una vez que te familiarices con los hooks de WordPress, te resultarán más fáciles de usar de lo que pudiera parecerte en un principio. En este artículo apenas te he mostrado cómo se usa cada uno, pero si te interesa este tema y quieres ver más ejemplos de cosas que puedes hacer con los hooks de WordPress, te recomiendo que visites el siguiente artículo: Tweaking Avanzado con snippets en el functions.php de Wordpress

¿Te ha gustado el artículo? ¿Tienes alguna duda? Mis compañeros y yo estaremos encantados de responder a tus comentarios :)
Ángela Piñeiro
Ángela Piñeiro

Ángela Piñeiro Informática, diseñadora y dibujante desde enana. Formo parte del departamento Marketing, co-organizo #RMC.

Artículos relacionados

Si te ha gustado este post, aquí tienes otros que pueden ser de tu interés. ¡No dejes de aprender!

Tenemos 18 comentarios en Qué son los hooks o ganchos en WordPress y para qué sirven

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Avatar del autor del comentario

Edwin Caballero Barrantes

08/05/2019 a las 01:34

Gracias muy buen artículo me.ayudo mucho

Responder
Avatar del autor del comentario

Ángela

08/05/2019 a las 10:33

Hola, Edwin:
¡Genial! Me alegra saber que te ha resultado útil. Gracias por tu comentario.
Un saludo.

Responder
Avatar del autor del comentario

Felix

29/08/2019 a las 20:00

Excelente al fin entendí como es esto. Muchas gracias

Responder
Avatar del autor del comentario

Ángela

25/11/2019 a las 14:06

Hola, Felix:
¡Genial! Me alegra saber que el artículo te es de ayuda. Gracias por comentar :)

Responder
Avatar del autor del comentario

Franklin Alexander Marte Gonza

07/10/2019 a las 21:34

Muy buen articulo, ahora voy con el siguiente!

Responder
Avatar del autor del comentario

Ángela

25/11/2019 a las 13:59

Hola, Franklin:
Me alegro que te guste. Gracias por comentar :)

Responder
Avatar del autor del comentario

Diego Ciccarelli

09/11/2019 a las 23:20

Gracias! buen articulo y buen contenido de todas la web, me ayudo mucho el material. Saludos!

Responder
Avatar del autor del comentario

Ángela

25/11/2019 a las 13:58

Hola, Diego:
¡Gracias a ti por pasarte por el blog y comertar el post :) !

Responder
Avatar del autor del comentario

Ignacio

08/04/2020 a las 15:32
Hola Angela, la verdad es que esta muy bueno al articulo tenes mucha didactica para explicar todo.
Te cuento que si bien soy desarrollador, estoy incursionando en el desarrollo en wordpress y no me queda muy en claro (despues de haber recorrido tu blog xD y varios otros) en el caso por ejemplo.. si desarrolle un plugin.. que muestra una tabla con datos y quiero poder mostrarlo en todos lados donde pueda agregarse dicho plugin, un articulo por ejemplo.. como deberia ser la definicion del add_action no me queda claro el lugar de destino que deberia tener.. desde ya muchas gracias!! Ignacio
Responder
Avatar del autor del comentario

Ángela

17/06/2020 a las 12:13
Hola Ignacio.

Muchas gracias por tus palabras. Me alegro de que te sea de utilidad. Para hacer lo que comentas, depende un poco cual sea la función que quieres realizar. Puede que necesites una acción o un filtro. Si por ejemplo, programas un plugin que cuando esté activo, añada un texto a todos los title utilizarías un filtro:
------------------------------------------------------------------------------------------------
function ejemplo( $title ) {
$contenido_nuevo = 'El blog de Raiola'; //Contenido adicional que quiero añadir
$title .= $contenido_nuevo; //Al título que ya existe el añadimos ese contenido adicional
return $title; //Devolvemos el nuevo contenido del titulo
}
add_filter( 'the_title', 'ejemplo' );
------------------------------------------------------------------------------------------------

Si por ejemplo, quieres añadir una tabla antes del contenido del blog, debes buscar el filtro correspondiente. Te recomiendo que le eches un ojo al Codex de WordPress. Ahí tienes toda la documentación que necesitas.

Un saludo :)
Responder
Avatar del autor del comentario

Francisco Gutiérrez

14/09/2020 a las 20:08
Que artículo mas bueno!
Me ha sido muy útil, gracias por el tiempo invertido y estaré atento a tus nuevas publicaciones.
Responder
Avatar del autor del comentario

Ángela

15/09/2020 a las 11:16
¡Hola Francisco!
Gracias a ti por leerlo y pararte a comentar. Me alegro de que te haya sido de ayuda. :D ¡Un saludo!
Responder
Avatar del autor del comentario

Damian

15/10/2020 a las 20:50
Hola Ángela, soy desarrollador .Net y estoy dando mis primeros pasos en Wordpress y estoy en el proceso de adaptación ?. Muy bueno el artículo! Mi pregunta es ¿Cuál es el hook de Woocommerce que tengo que usar para hacer algo justo después de que se confirma un pago exitoso?
Responder
Avatar del autor del comentario

Alvaro Fontela

23/01/2021 a las 23:03
En Google encontraras mucha documentación sobre ese tema en concreto: https://www.google.com/search?q=hook+woocommerce+checkout&oq=hook+woocommerce&aqs=chrome.1.69i57j0l2j0i22i30j0i22i30i395l3j0i10i22i30i395.3209j1j7&sourceid=chrome&ie=UTF-8
Responder
Avatar del autor del comentario

Eduardo Servin

10/11/2020 a las 17:37
Angela, muy buen artículo !
Por fin empiezo a adentrarme en el mundo "Wordpress" como programador, y comienzo a comprender sus intrincados caminos !
Voy a estar atento a todas tus nuevas publicaciones desde hoy.
Saludos, desde Argentina.
Muchas gracias por tomarte el tiempo para escribirlos ! ;-)
Responder
Avatar del autor del comentario

Pablo Beloso

21/02/2022 a las 19:10
Buenas, yo tengo una web donde tengo que estar constantemente agregando el mismo puerto en el archivo http.php ya que al actualizar algunos plugins estos me borran los cambios. Se pueden utilizar hooks para solucionar esto? En caso que se pueda como seria?

Saludos
Responder
Avatar del autor del comentario

Lucas

14/12/2022 a las 14:53
Muy clara explicacion, muchas gracias
Responder
Avatar del autor del comentario

Alvaro Fontela

20/12/2022 a las 16:48
Gracias a ti por el comentario Lucas ;)
Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Vienes desde otro proveedor?

¡Sin problema! Te migramos gratis y sin cortes
Migraciones de hosting gratis