Child theme (tema hijo) de WordPress: qué es y cómo crearlo

Toda persona que esté desarrollando una web en WordPress debe conocer qué es un child theme o tema hijo. Su uso puede ser fundamental en algunos desarrollos y es importante saber cómo crearlo y cuándo usarlo.

Qué es un child theme

En el códex de WordPress nos dan una definición precisa:

Un “tema hijo” en WordPress es un tema que hereda la funcionalidad de otro tema, llamado “tema padre”.

Es decir, se trata de un tema que tiene un estructura extremadamente básica, que aprovecha la estructura de otro, llamado padre, heredando de él todas sus funciones o archivos. Un child theme no funciona por si sólo y siempre necesitará del padre para poder hacerlo.

Para qué sirve

Ningún tema, ni gratuito ni de pago, es perfecto. En muchas ocasiones te verás obligado a cambiar su aspecto o modificar o añadir alguna funcionalidad. Para ello necesitarás hacer cambios en un archivo del tema o agregar alguna función. Pero si actualizas el tema, todas esas modificaciones realizadas se perderán, ya que una actualización sobrescribirá los archivos del tema, incluyendo tus cambios.

Es en esta situación cuando un child theme es tu mejor aliado. Éstos permiten modificar el tema padre sin tocar los archivos del mismo. Podrás hacer todos los cambios que quieras en el hijo y, al actualizar, no se perderán porque será el padre el que se actualice, manteniéndose el hijo intacto.

Cómo crear un child theme

En WordPress siempre (o casi siempre) hay dos maneras de hacer las cosas: manualmente o con un plugin. Yo te voy a explicar las dos maneras para qué decidas cuál quieres usar.

Manualmente

Lo primero es crear una carpeta en la carpeta de temas para albergar el tema hijo. Ésta carpeta la encontrarás en /wp-content/themes. El nombre de la nueva carpeta no debe llevar ningún espacio y te recomiendo que identifiques claramente que es un hijo y quién es el padre. Típicamente se usa el nombre del padre seguido de -child o -hijo. Pero puedes usar el nombre que quieras.

Carpeta de temas de WordPress

En la carpeta del tema hijo tienes que crear un archivo llamado style.css. Éste es el único archivo obligatorio dentro de un child theme. Su contenido mínimo debe ser:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

Personaliza las líneas de este código con tus datos, recordando que la más importante es la de “Template”. Ésta indica cuál es el padre. En ella deberás poner el nombre de la carpeta del tema padre (recuerda que la encontrarás en /wp-content/themes).

A continuación tienes que irte a Apariencia –> Temas y activar el tema hijo que acabas de crear.

Con un plugin

Hay varios plugins que te permiten crear un tema hijo. Yo recomiendo usar Child theme wizard, ya que es gratuito, simple y cumple su función.

Plugin para crear child theme

Instálalo en tu WordPress desde Plugins –> Añadir nuevo. A continuación actívalo y ve a Herramientas –> Child Theme Wizard. Allí podrás crear fácilmente tu tema hijo, eligiendo el padre y rellenado el resto de datos necesarios.

Crea child theme con un plugin

A continuación tienes que irte a Apariencia –> Temas y activar el tema hijo que acabas de crear.

Cómo usarlo

Una vez creado, el siguiente paso es saber cómo aprovecharlo para modificar el tema padre sin peligro a perder los cambios. Tenemos 3 opciones diferentes para hacerlo:

Style.css

Podemos aprovechar este archivo del tema hijo para poner ahí nuestro código css personalizado. Esta hoja de estilos sobrescribe a la del padre, por lo que podemos usarla para dejar el apartado visual del child theme como queramos. Pero hecho así no tiene mucho sentido. No suele ser recomendable sobrescribir la hoja de estilos del padre, ya que estaríamos perdiendo todo el aspecto visual original del tema.

Lo ideal es cargar primero los estilos del padre y luego cargar los del hijo (los incluidos en el style.css del child theme). De esta manera el hijo hereda el estilo del padre y, si lo necesitamos, podemos añadir los nuestros propios en el hijo. Cómo se cargan primero los estilos del padre lo explico justo a continuación.

Functions.php

A diferencia de style.css, el functions.php de un tema hijo no sobrescribe el tema padre. En lugar de eso, se carga en adición a functions.php del tema padre (específicamente, se carga justo antes del tema padre).

Este archivo nos sirve para cambiar la funcionalidad del tema padre. Es tan sencillo como incluir aquí las funciones php que necesitemos.

Este archivo no es necesario para el tema hijo, aunque yo te recomiendo que, siempre que uses un child theme, lo crees, vayas a poner tus funciones personalizadas o no. La razón es sencilla. Aquí es donde cargaremos los estilos del padre. Para hacerlo, basta colocar el siguiente código en el functions.php de nuestro hijo:

<?php
function my_theme_enqueue_styles()
{
    $parent_style = 'parent-style'; // Estos son los estilos del tema padre recogidos por el tema hijo.
    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

 

Archivos de plantilla

Por último, podemos usar nuestro tema hijo para sobrescribir cualquier archivo del tema padre. Incluso hay algunos plugins que nos dejan sobrescribir algunos de sus archivos en nuestro child theme (por ejemplo, woocommerce): simplemente incluye un archivo del mismo nombre en la carpeta del tema hijo y sobrescribirá el archivo equivalente en la carpeta del tema padre.

Por ejemplo, si queremos modificar el html del menú, cogeremos el archivo header.php (aquí suele estar el html del menú) del padre, lo copiamos en la carpeta del hijo y hacemos las modificaciones necesarias. Nuestra web cargará nuestro header.php modificado y no el original del padre.

Cuándo usar un tema hijo y cuándo no

Aunque un child theme es una buena herramienta, no siempre tendremos que trabajar con uno. Mi recomendación es que lo uses cuando se dé uno de los dos siguientes puntos (o los dos):

  • Tienes que añadir alguna funcionalidad al tema o modificar alguna del padre.
  • Necesitas modificar algún archivo del padre.

No uses un tema hijo si:

  • lo único que necesitas es modificar los estilos (css). Si este es tu caso, puedes hacerlo añadiéndolos al “css adicional” que encontrarás en Apariencia –> Personalizar.
  • sólo quieres añadir funcionalidades independientes del tema. Cuando añadimos funcionalidades a nuestra web yo distingo entre funcionalidades del tema y funcionalidades independientes del tema. Las primeras son aquellas enfocadas a cambiar el comportamiento de un aspecto concreto de nuestro tema padre o a añadir uno nuevo. Es decir, aquellas que afectan al diseño. Dichas funcionalidades, por tanto, no tienen sentido en otro tema diferente. Por ejemplo, si queremos cambiar cómo se comporta el menú de nuestra web en móviles, usaremos el functions.php de nuestro tema hijo, ya que ese aspecto concreto es exclusivo del tema padre que estamos usando. Cualquier otro tema tratará de manera diferente nuestro menú en móviles. Las funcionalidades independientes del tema modifican el comportamiento global de nuestra web pero no afectan al diseño. En este caso recomiendo usar un plugin de funciones. De esta manera no las perderemos en caso de cambiar de tema.

Resumiendo

Si necesitamos modificar un tema de WordPress por la razón que sea, debemos tener en cuenta que todos los cambios que hagamos se perderán si lo actualizamos. Para solucionar ésto, tenemos los child theme o temas hijo, que nos permiten modificar un tema padre sin temor a perder los cambios en una actualización.

Dejar un comentario

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


Política de privacidad: Leer aquí | Responsable: Rafael Martín - Górriz Trillo | Fin del tratamiento: Gestión de comentarios | Legitimación: Tu consentimiento | Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal. | Derechos: Acceso, rectificación, portabilidad, olvido | Contacto: [email protected]