Tutorial para anular funciones del tema padre con un tema hijo

Anular funciones del tema padre con un tema hijo
Escrito por: Cesar F. Miranda Salcedo
abril 6, 2021

Si eres desarrollador web quizá en algún momento de tu carrera te ha tocado trabajar con WordPress y muy probablemente con un tema comprado por ti o por un cliente. O en el mejor de los casos tu mismo estás desarrollando un tema.

Hay ocasiones en las que necesitas modificar alguna funcionalidad del theme cómo, por ejemplo cuándo quieras cambiar el layout de alguno de los archivos de plantillas.

En este caso lo que se hace es copiar los archivos del tema original que vas a modificar y pegarlos en el tema secundario. Haciendo esto, automáticamente WordPress anula el archivo en el tema principal.

Desafortunadamente las funciones no trabajan igual. Para lograr que trabajen es necesario sobrescribir las funciones del tema padre, mediante el archivo functions.php del tema hijo o child theme.

En este tutorial, te mostraré tres maneras que puedes usar para anular funciones del tema padre con un tema hijo:

  • Funciones pluggables o conectables
  • Prioridad de la función
  • Quitar funciones del gancho al que están sujetos

Sobrescribir archivos de la plantilla es fácil, digamos que en el tema padre tienes un archivo que se llama single.php, si este mismo archivo lo creas en tu tema hijo, WordPress automáticamente va a utilizar el archivo del tema hijo, anulando así el archivo de plantilla del tema padre.

Desafortunadamente no sucede lo mismo con las funciones dentro del archivo functions.php. El proceso es un poco más elaborado, como lo veremos más adelante.

Cómo trabajan las funciones dentro del archivo functions.php

Para entender cómo es que las funciones del hijo sobrescriben a las del parent theme, tenemos que saber cómo es que trabajan las funciones en WordPress.

Cuando usas un tema hijo, automáticamente WordPress se encarga de ejecutar las funciones del tema padre. Esto no sucede con los estilos CSS, que tienes que importar el archivo style.css que contiene los estilos del tema padre.

Te voy a platicar de un punto importante que te evitará dolores de cabeza. Si tienes funciones con el mismo nombre en el padre y en el hijo… Prepárate para el desastre; tu sitio se va a romper. Para evitar que esto ocurra procura usar prefijos para nombrar tus funciones en el tema hijo y de ser posible en el tema principal.

1. Funciones pluggables o conectables

Este tipo de funciones trabajan en el tema principal y solo sí el desarrollador las implementa, así que si tu tema no las usa de nada te va a servir.

Para escribir una función pluggable, tienes que encerrarla en una etiqueta condicional para comprobar si una función con ese nombre ya ha sido ejecutada:

<?php
if ( ! function_exists ( 'prefix_my_function' ) ) {
    function prefix_my_function() {
        // Cuerpo de la función.
    }f
}
?>

La función function_exists() va a revisar si ya se ha definido una función con el nombre prefix_my_function en el tema hijo, si es así la función del tema principal no se ejecutará.

Cuando quieras anular una función del tema padre, escribe una función en el tema hijo con el mismo nombre de la función del tema padre.

<?php
  function prefix_my_function() {
      // Contenido de la función que sobrescribe la función padre
  }
?>

El núcleo de WordPress ejecutará en primer lugar la función del tema hijo, cuando le toque al padre ejecutar la condición, WordPress comprobará si ya existe una función con el mismo nombre y si es así no la ejecutará.

Este tipo de funciones son de gran utilidad y muy fáciles de usar, ya se pueden anular sin mucho esfuerzo.

2. Modificar la prioridad de la función

Si la plantilla de terceros que compraste no implementa las funciones conectables o no las estás implementando en el tema que estás desarrollando, en ese caso deberías de empezar a usarlas en los temas que desarrolles. De no ser posible eso, cambiar la prioridad de las funciones es lo que necesitas.

Cuando agregas funciones a WordPress lo haces con las funciones add_action() y add_filter(), estas funciones reciben un parámetro opcional de prioridad que se utiliza para especificar el orden en el que se ejecutan las funciones asociadas con una acción en particular.

Tiene un orden ascendente, esto es de menor a mayor y por defecto la prioridad tiene un valor de 10. Yo te recomiendo incrementar el valor en más cinco (15, 20, 25, 30, etc.). Al hacerlo de esta manera vas a tener un poco de espacio en caso de que quieras añadir otra función entre las dos más tarde.

<?php
  function prefix_child_function() {
      // Cuerpo de la función.
  }
  add_action( 'init', 'prefix_child_function', 15 );
?>

En el tema padre, te vas a encontrar con funciones que tienen definida la propiedad de prioridad, y se ven así:

<?php
  function prefix_parent_function() {
      // Cuerpo de la función.
  }
  add_action( 'init', 'prefix_parent_function', 20 );
?>

Así que solo tienes que asegurarte de que la prioridad que le das a la función en el tema hijo es mayor:

<?php
  function prefix_child_function() {
      // Cuerpo de la función.
  }
  add_action( 'init', 'prefix_child_function', 25 );
?>

Eliminando funciones de los ganchos

Para eliminar una función del tema padre hay que removerlas del gancho al que están conectados. Eso se logra con las funciones remove_action() o remove_filter(). El que utilices dependerá de si la función está conectada a un gancho de acción o a un gancho filtro en el theme principal.

Volvamos a nuestra función anterior en el tema padre:

<?php
  function prefix_parent_function() {
      // Cuerpo de la función.
  }
  add_action( 'init', 'prefix_parent_function', 20 );
?>

Para eliminar esta función de tu gancho de acción y, por lo tanto, evitar que se dispare, crea una función en el tema hijo para eliminarla usando remove_action():

<?php
	remove_action( 'init', 'prefix_parent_function' );
?>

remove_action() por si sola no va a funcionar, es necesario conectar esta función a un gancho que se dispare después del gancho al que está conectada la función del tema principal. Esto se debe a que no puedes quitar una acción antes de que haya sido ejecutada. Puedes encontrar detalles del orden en que se disparan las acciones en la documentación de WordPress.

<?php
  function prefix_child_remove_parent_function() {
      remove_action( 'init', 'prefix_parent_function' );
  }
  add_action( 'wp_loaded', 'prefix_child_remove_parent_function' );
?>

Nota importante sobre la prioridad

Ten en cuenta que si la función del tema padre tiene una prioridad asignada diferente al número 10, debes incluirla en la función remove_action() o remove_filter(), de lo contrario no va a funcionar.

Tenemos la función en el tema padre:

<?php
  function prefix_parent_function() {
      // Cuerpo de la función.
  }
  add_action( 'init', 'prefix_parent_function', 20 );
?>

Para poder eliminarla vamos a tener que establecer el mismo valor de prioridad:

<?php
  function prefix_child_remove_parent_function() {
      remove_action( 'init', 'prefix_parent_function', 20 );
  }
  add_action( 'wp_loaded', 'prefix_child_remove_parent_function' );
?>

Recomendaciones

Para crear una nueva función, puedes copiar y pegar la función del tema padre en el archivo functions.php del tema hijo, y luego editarlo para eliminar el código que no necesites.

Vas a crear dos funciones: una para eliminar la original, y la segunda para proporcionar la nueva funcionalidad. En el siguiente ejemplo anulamos la función prefix_parent_theme_function y colocamos la nueva función prefix_child_theme_function en el gancho ‘init’:

<?php
  function prefix_remove_parent_theme_function() {
      remove_action( 'init', 'prefix_parent_theme_function');
  }
  add_action( 'wp_loaded', 'prefix_remove_parent_theme_function');

  function prefix_child_theme_function() {
      // contenido de la función del tema hijo basado en la función del tema principal
  }
  add_action( 'init', 'prefix_child_theme_function');
?>

Si estás desarrollando un tema, es una buena práctica hacer que tus funciones sean conectables para que pueda anularlas fácilmente en el tema hijo.

También es una buena idea revisar las funciones que se escriben en el tema padre que estás usando, y así identificar de que manera vas a trabajar. Revisa si tiene funciones pluggables:

<?php
if ( ! function_exists ( 'prefix_my_function' ) ) {
    function prefix_my_function() {
        // Cuerpo de la función.
    }f
}
?>

Resumen

Anular funciones del tema padre con un tema hijo es más complicado que anular los archivos de plantilla o los estilos. Aquí te he mostrado tres maneras para hacerlo:

  • Funciones pluggables o conectables: estás funciones sirven si el tema de terceros o el tema que estas desarrollando las implementa, recuerda nombrar las funciones en el tema hijo con el mismo nombre que tiene la función en el parent theme para que pueda ser sustituida.
  • Modificar la prioridad de la función: Asigna prioridades más altas a las funciones del tema hijo para asegurarte de que se ejecuten después de las del tema padre.
  • Remover funciones de los ganchos: Utiliza remove_action() o remove_filter() para eliminar completamente las funciones del tema principal.

El método que vayas a utilizar va a depender de cómo este desarrollado tu theme, lo más seguro es que tengas que utilizar las tres formas para anular funciones del tema padre con un tema hijo, al trabajar en el aspecto y funcionamiento de las plantillas del tema.

 

¿Necesitas ayuda?

Plectro Lab es una Agencia de desarrollo web con amplia experiencia desarrollando sitios web, aplicación móviles, redacción de contenido y SEO.

Quiero más información

También te podría interesar…

0 Comments

Submit a Comment

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