¿Qué es un tema hijo en WordPress y cómo crearlo paso a paso?

Cuando trabajas creando sitios web con WordPress, a menudo necesitas añadir ciertas personalizaciones de diseño o nuevas funcionalidades. Esto puede no ser un problema si el tema que utilizas viene preparado para ello, pero otras veces necesitas aplicar cambios directamente en los archivos del ‘theme’. El problema de esto último es que dichos cambios se pierden al actualizar la plantilla.

Para dar solución a este problema existen los ‘child themes’ o temas hijo para WordPress. Si quieres saber qué son, sus ventajas y cómo crearlos, sigue leyendo este artículo porque te voy a explicar todo lo que necesitas saber,

¿Qué es un tema hijo o child theme en WordPress?

Un tema hijo (en inglés ‘child theme’) de WordPress es un tema que hereda todos los estilos y funcionalidades del tema padre.

Como ya sabes, WordPress funciona a través de plantillas que controlan la apariencia y funcionalidad del sitio web. Los temas hijo son simplemente temas que extienden las funcionalidades de un tema en particular (tema padre) y en los cuales puedes añadir nuevas funcionalidades y/o estilos sin que el tema padre se vea afectado.

¿Para qué sirve un tema hijo en WordPress?

Un ‘child theme’ o tema hijo sirve para poder hacer modificaciones en un tema de WordPress sin miedo a que afecten al tema original. Dicho de otro modo, un tema hijo es una “copia” del tema padre en la que puedes añadir personalizaciones que permanecerán después de actualizar el tema padre. Estas personalizaciones pueden ir desde añadir estilos CSS hasta sobreescribir archivos del tema padre.

Un tema hijo no se actualiza. Las actualizaciones las recibe siempre el tema padre.

Por ponerte un ejemplo, imagina que quieres cambiar por completo el diseño del sidebar de tu blog. Para ello vas a los archivos de tu tema padre y editas el ‘style.css’ para añadirle, por ejemplo, un fondo de color, cambiar el ‘padding’ y el color de los textos. Ya tienes el sidebar personalizado y al cabo de unos días tu tema recibe una actualización de seguridad importante, por lo que lo actualizas. Después de actualizar, todos los cambios que has hecho en el sidebar ya no están, ya que al actualizarse se han sobreescrito los archivos del tema y tus cambios se han perdido.

Si hubieras tenido instalado un tema hijo, habrías llevado a cabo los cambios en el ‘style.css’ del mismo. Este ‘style.css’ está heredando por defecto el ‘style.css’ del tema padre, y además aplicará los nuevos estilos que añadas en él. Cuando actualices el tema padre, tus nuevos estilos CSS no se verán afectados, ya que pertenecen al tema hijo.

Ventajas de utilizar un child theme o tema hijo

Las ventajas de usar un tema hijo en WordPress son más que evidentes. En primer lugar, podrás personalizar el diseño y funcionalidades de tu sitio sin perder los cambios al actualizar el tema original. Tener tu tema actualizado es importante, y esto te da cierta seguridad a la hora de actualizar el tema padre, ya que no tendrás que pararte a pensar si la actualización afectará a tus personalizaciones.

En respuesta a la pregunta “¿Cuándo debería usar un tema hijo?” mi consejo es: SIEMPRE

Por otro lado, te resultará más fácil mantener organizado tu código, ya que todas tus personalizaciones estarán en el tema hijo, modificando solo lo necesario. Además, a la hora de desarrollar nuevas funcionalidades te estarás asegurando que el tema padre no se verá afectado, ya que no lo estás modificando, por lo que a la hora de solucionar posibles errores podrás deshacer tus cambios fácilmente.

¿Cómo instalar un child theme en WordPress?

Instalar un tema hijo o child theme en WordPress es tan sencillo como instalar un tema normal. Si el tema que utilizas tiene ya disponible un tema hijo (puedes buscarlo en la documentación del tema en cuestión), solo tendrás que descargarlo, instalarlo y activarlo.

Te pongo un ejemplo con el tema ‘Astra’:

Supongamos que tengo instalado el tema ‘Astra’ en mi sitio web y quiero instalar un tema hijo. Buscando en la documentación de Astra veo que tienen disponible un tema hijo, así que me lo descargo.



A continuación voy a "Apariencia > Temas", pulso en ‘Añadir nuevo tema’ y luego en ‘Subir tema’. Elijo el archivo ‘astra-child.zip’ que me he descargado y le doy a ‘Instalar ahora’. Una vez instalado, lo activo. El tema hijo ya está instalado y funcionando.



Si te fijas, ahora tengo dos temas en mi instalación de WordPress: Astra y Astra Child. Aunque el tema activo es Astra Child, es importante que no elimines el tema Astra, ya que es el tema padre desde el que Astra Child heredará estilos y funcionalidades. Y por supuesto, a la hora de actualizar recibirás las actualizaciones en el tema padre ‘Astra’.

¿Cómo crear un tema hijo en WordPress?

En el apartado anterior te he explicado cómo instalar un tema hijo teniendo en cuenta que el tema original ya tenga uno que te puedas descargar. Pero si estás trabajando sobre un tema propio o sobre un tema que no te proporciona un tema hijo, puedes crearlo tú mismo.

Para ello, y como casi siempre que hablamos de WordPress, tienes dos maneras de hacerlo: a mano o con plugins. Sea cual sea tu elección, te voy a explicar ambos métodos.

Pero antes de nada, creo que es importante comentar una cosa. Desde la llegada del ‘Full Site Editing’ (FSE) a WordPress en la versión 5.9 del CMS, el hecho de utilizar un tema hijo es debatible, ya que los denominados ‘block themes’ (temas basados en bloques) utilizan un fichero ‘theme.json’ que facilita la creación de estilos. Además, los cambios que realices en el editor del tema se guardarán en la base de datos, por lo que no se perderán al actualizar el tema.

Aun así, personalmente sigo pensando que es importante crear un ‘child theme’ o tema hijo, ya que más allá de los estilos puede ser necesario añadir nuevas funcionalidades o incluso sobreescribir algunos archivos del tema. Para esos casos sí o sí necesitarás un tema hijo si no quieres perder los cambios al actualizar.

Aclarado esto vamos, ahora sí, a ver cómo se crea un tema hijo en WordPress.

Crear un child theme o tema hijo en WordPress manualmente (sin plugins)

Para crear un tema hijo en WordPress sin utilizar plugins lo primero que tienes que tener es acceso a los archivos de tu instalación de WordPress. Puedes utilizar un cliente FTP como Filezilla o acceder a través del administrador de archivos de cPanel o del panel que utilice tu hosting. También es recomendable que estés familiarizado con la estructura de archivos y carpetas de WordPress.



Los temas se guardan dentro de ‘wp-content > themes’.  Dentro de esta carpeta encontrarás todos los temas que tengas en tu instalación de WordPress (tanto activos como inactivos).

Dicho esto, el proceso que tienes que seguir para crear un tema hijo en WordPress es:

1 . Elige el tema sobre el que quieres crear un tema hijo y crea una carpeta dentro de ‘wp-content > themes’ con el mismo nombre que el tema padre pero con el sufijo ‘-child’.

En mi caso voy a crear un tema hijo para el tema ‘Twenty Twenty-Four’ de WordPress, cuya carpeta se llama ‘twentytwentyfour’, por lo que la carpeta del tema hijo deberá llamarse ‘twentytwentyfour-child’.



2 . Dentro de la carpeta que acabas de crear, crea un archivo llamado ‘style.css’ con el siguiente código:

Theme Name: Twenty Twenty-Four Child



Theme URI: https://cdn.raiolanetworks.com/



Description: Twenty Twenty-Four Child Theme



Author: David Suárez



Author URI: https://cdn.raiolanetworks.com/



Template: twentytwentyfour



Version: 1.0.0



License: GNU General Public License v2 or later



License URI: http://www.gnu.org/licenses/gpl-2.0.html



Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news



Text Domain: twentytwentyfour-child

Te explico brevemente los campos del código anterior para que los entiendas y personalices según te convenga:

• Theme Name: es el nombre del tema hijo.


• Theme URI: la URL de la página principal del tema hijo.


• Description: la descripción del tema hijo.


• Author: el nombre del autor del tema hijo.


• AuthorURL: URL del sitio web del autor.


• Template: sirve para hacer referencia al tema padre. Aquí tienes que poner el nombre exacto de la carpeta del tema padre.


• Version: el número de versión.


• License: el tipo de licencia.


• License URI: la URL al tipo de licencia.


• Tags: etiquetas bajo las que podrá ser encontrado el ‘child theme’.


• Text domain: es un identificador que sirve para crear traducciones del tema hijo.

Si estás creando un tema hijo a partir de un tema existente y no sabes qué poner en alguno de los campos como por ejemplo los relativos a las licencias, copia lo mismo que tenga el tema padre.

3 . Si quieres personalizar la imagen del tema hijo que estás creando (la que se ve dentro de Apariencia > Temas), puedes subir un archivo llamado ‘screenshot.png’ a la raíz de la carpeta de tu tema hijo.



4 . En este punto tu tema hijo ya aparecerá dentro de los temas elegibles en ‘Apariencia > Temas’ y ya podrías activarlo. Pero para que sea completamente funcional faltan todavía algunos detalles. De momento tu tema hijo no está heredando los estilos del ‘style.css’ del tema padre. Necesitas ‘encolar’ los estilos del tema padre para que el tema hijo los herede.

Para ello crea un archivo llamado ‘functions.php’ en la raíz de la carpeta de tu tema hijo con el siguiente código:

<?php



function estilos_tema_hijo() {



wp_enqueue_style( 'child-theme-styles', get_stylesheet_uri());



}



add_action( 'wp_enqueue_scripts', 'estilos_tema_hijo' );

Esta es la manera habitual de encolar los estilos del tema padre en el tema hijo, pero puede variar en algunos temas concretos. Si tienes cualquier duda consulta la documentación oficial del tema que estés utilizando.

Si estás utilizando un tema basado en bloques (‘block theme’) es posible que no necesites realizar este paso, ya que los estilos se gestionan a través del ‘theme.json’. De todas formas sigue siendo interesante que tengas un archivo ‘functions.php’ en tu tema hijo por si necesitas añadir nuevas funcionalidades.

5 . Para los ya mencionados ‘block themes’ también puedes crear un archivo ‘theme.json’ en la raíz de tu tema hijo si lo necesitas, aunque este paso es totalmente opcional.

6 . A mayores puedes copiar cualquier archivo que quieras sobreescribir y personalizar desde el tema padre al tema hijo. Eso sí, ten en cuenta que debes seguir en todo momento la misma estructura de carpetas que tenga el tema padre. Por ejemplo, si quieres personalizar el archivo ‘footer.php’ del tema padre, que está dentro de la carpeta ‘parts’, debes crear la carpeta ‘parts’ en tu tema hijo y dentro de ella el archivo ‘footer.php’. De esta manera puedes personalizar cualquier archivo que tengas en el tema padre.

Crear un tema hijo en WordPress con plugins

Si el código no es tu fuerte o no quieres complicarte demasiado, puedes recurrir a un plugin para crear un tema hijo en WordPress. Existen muchos plugins para crear un tema hijo o ‘child theme’ en WordPress, te explico cómo hacerlo con algunos de los más habituales.

Crear un tema hijo en WordPress con ‘Generate Child Theme’

Este plugin es muy sencillo y fácil de usar, ya que no hay muchas opciones que configurar para crear tu tema hijo. Pese a ello cumple su función y para crear un ‘child theme’ tan solo tienes que ir a ‘Generate Child Theme’ en el menú lateral del panel de administración de WordPress. En la siguiente pantalla verás que tienes varios campos que rellenar o configurar:

• Select Parent Theme: para seleccionar el tema a partir del cual crear su tema hijo.


• Child theme's name: para darle un nombre a tu tema hijo.


• Description: para darle una descripción.


• Author: para elegir el nombre del autor.


• Version: para el número de versión.

Una vez tengas todos configurado a tu gusto, pulsa el botón ‘Generar’ y tu tema hijo estará listo para ser activado y utilizarlo.

Crear un tema hijo en WordPress con ‘WP Child Theme Generator’

Este plugin es muy similar al anterior, sobre todo en cuanto a sencillez y facilidad de uso. Para acceder a la configuración de ‘WP Child Theme Generator’ y crear un ‘child theme’ puedes hacerlo de dos maneras. Desde el menú lateral de WordPress o entrando directamente al tema que quieras desde ‘Apariencia > Temas’ y pulsando el botón de ‘Child Theme Gen’. En cualquiera de los casos verás una pantalla como esta:



Las opciones que puedes configurar son similares a las del plugin anterior y también similares al ejemplo de ‘Crear un child theme o tema hijo en WordPress manualmente (sin plugins)’ que te expliqué más arriba. Configúralas a tu gusto y pulsa el botón ‘Create Child Theme’.

Crear un tema hijo en WordPress con ‘Child Theme Configurator’

Otro de los plugins que puedes utilizar para crear un tema hijo es ‘Child Theme Configurator’. Es el más completo de los tres que menciono en este artículo, pero a la vez es también muy fácil de usar.



Para acceder a la configuración tienes que ir a ‘Herramientas > Temas hijo’ desde el ‘backend’ de WordPress. Si te fijas el plugin te permite hacer varias cosas:

• Crear un nuevo tema hijo: Puedes crear un tema hijo configurando cómo se manejarán las hojas de estilos (qué hoja de estilos usar, cómo importarla o incluso ignorar los estilos del tema padre). También puedes configurar los atributos (nombre del tema, autor, etiquetas, etc.) y copiar ajustes de widgets y otras personalizaciones del tema padre al tema hijo.


• Configurar un tema hijo existente: Te permite analizar un tema hijo que ya tengas y configurar los apartados mencionados en el punto anterior.


• Duplicar un tema hijo existente: Te permite clonar un tema hijo que ya tengas, en un nuevo directorio.


• Restablecer un tema hijo existente: Para restaurar la hoja de estilos y el archivo ‘functions’ de un tema hijo a su estado inicial. Los archivos adicionales que hayas creado para el tema hijo no se eliminarán.

Además de todo lo anterior, este plugin te permite hacer cosas interesantes como copiar archivos concretos del tema padre al tema hijo o exportar el tema hijo como un archivo .zip.

Consejos y buenas prácticas a la hora de crear un tema hijo

Llegados hasta aquí me gustaría acabar este artículo dándote unos consejos y buenas prácticas que deberías seguir a la hora de crear tu tema hijo:

• Utiliza un tema hijo desde el principio siempre que puedas y lo necesites. Si sabes que vas a personalizar tu plantilla, no esperes a estar metido de lleno en el proceso. Cuanto antes crees el tema hijo mejor.


• No modifiques archivos del tema padre, por pequeño que sea el cambio. Para eso tienes el tema hijo.


• Duplica solo los archivos necesarios. Cuando crees un tema hijo, copia solo los archivos del tema padre que necesites sobreescribir (si es que necesitas personalizar alguno).


• Si puedes probar las modificaciones en un entorno local o de pruebas, mejor. Así evitarás contratiempos innecesarios.


• Cuando añadas funcionalidades en tu archivo ‘functions.php’ procura utilizar las funciones nativas de WordPress si es posible.


• Documenta tu código. Esta es una buena práctica en general en el mundo de la programación. Documentar el código facilita el mantenimiento del mismo, sobre todo si trabajas en equipo.