Cómo crear un tema hijo en WordPress paso a paso

Si trabajas con WordPress tarde o temprano te encuentras en la situación de necesitar modificar un tema, cuyos cambios van más allá de lo que se puede hacer desde el backend. Hasta ahí, nada extraño si te dedicas a crear páginas web, ya que forma parte del trabajo habitual.

El problema aparece cuando haces esos cambios directamente en el tema y tiempo después, llega una actualización. En ese momento ocurre lo que muchos ya han vivido alguna vez, que los cambios que hiciste desaparecen porque los archivos que modificaste se sobrescriben

Los temas hijo existen precisamente para resolver este problema. Permiten modificar un tema de WordPress sin perder los cambios cuando el tema se actualiza, algo fundamental cuando trabajas con temas que siguen recibiendo mejoras o parches de seguridad.

Como desarrollador WordPress freelance es algo que utilizo con bastante frecuencia cuando parto de un tema existente, sobre todo en proyectos donde el cliente ya tiene una base instalada o cuando trabajamos sobre un tema comercial que necesita algunos ajustes.

En este artículo voy a explicarte qué es exactamente un tema hijo y cómo puedes crear uno paso a paso, así como diferentes cuestiones que es importante tener en cuenta si es el primer acercamiento que tienes a este tema.

Qué es un tema hijo en WordPress

Un tema hijo, o child theme en la terminología habitual de WordPress, es un tema que hereda el diseño y la funcionalidad de otro tema, llamado tema padre, permitiendo añadir modificaciones sin alterar el tema original.

El tema padre es un tema completo, con todos los archivos necesarios para funcionar y el tema hijo se apoya en él. Utiliza sus plantillas, sus estilos y sus funciones, pero permite añadir modificaciones propias sin tener que modificar directamente los archivos base.

Esto significa que puedes cambiar estilos CSS, añadir funciones en PHP o incluso sobrescribir plantillas concretas desde el tema hijo. Mientras tanto, el tema padre permanece intacto y puede actualizarse sin afectar a esas personalizaciones.

Un detalle importante es que el tema hijo no copia todo el tema original. Solo incluye los archivos que quieras modificar. Todo lo demás se seguirá cargando desde el tema padre.

Gracias a este sistema puedes adaptar un tema a las necesidades de un proyecto sin renunciar a las actualizaciones que haga el desarrollador original del tema (en caso de que no seas tu mismo, claro).

Para qué sirve un tema hijo

Aunque ya hemos visto por encima para qué sirve, la utilidad de los temas hijo se entiende mejor cuando lo llevas a situaciones reales concretas. Así que entremos un poco más en las utilidades principales para despejar dudas.

Una de las más habituales es modificar estilos CSS. El tema puede funcionar bien, pero necesitas ajustar colores, tipografías o pequeños detalles del diseño. En lugar de editar directamente el archivo style.css del tema original, puedes añadir esos cambios en el tema hijo. Es algo especialmente útil cuando vas a hacer una modificación en el diseño de manera permanente y no quieres usar en editor de estilos del backend.

También es frecuente utilizarlo para añadir pequeñas funcionalidades. Por ejemplo, registrar un nuevo menú, modificar el comportamiento de algún elemento del tema o añadir código en functions.php. Expandes la funcionalidad del tema sin miedo a romper la lógica original,

Otra situación muy común aparece cuando trabajas con temas comerciales. Muchos proyectos parten de un tema ya existente que cubre gran parte de las necesidades, pero casi siempre requiere algunos ajustes. El tema hijo permite hacer esas adaptaciones sin tocar el núcleo del tema original. Esto nos permite, por ejemplo, modificar elementos como la maquetación de plantillas concretas.

En proyectos donde se parte de un tema existente suele ser la forma más segura de trabajar. Eso sí, si las modificaciones van a ser muy profundas o el diseño va a cambiar por completo, a veces tiene más sentido desarrollar un tema propio desde el principio.

Cómo crear un tema hijo en WordPress paso a paso

Crear un tema hijo en WordPress es bastante más sencillo de lo que parece. En su forma más básica solo necesitas una carpeta y un archivo. Porque aquí es donde está la clave, un child theme puede ser tan simple o complejo como se quiera, lo que lo hace bastante flexible a nuestras necesidades.

Para ver cómo crearlo, voy a partir del tema Twenty Twenty-Four como ejemplo, que es uno de los temas que vienen por defecto en WordPress, aunque el proceso es el mismo con cualquier otro.

Únicamente ten en cuenta, que el tema original debe encontrarse ya dentro de la instalación, porque lo que vamos a hacer se basara en él.

Crear la carpeta del tema hijo

Lo primero es crear una carpeta nueva dentro del directorio de temas de WordPress, como si fuera un tema más. La ruta donde debes hacerlo es:

wp-content/themes

Dentro de esa carpeta puedes crear una nueva con el nombre que quieras para tu tema hijo. Lo habitual es usar un nombre relacionado con el tema padre o con el proyecto. Por ejemplo:

mi-tema-hijo

El nombre no tiene que coincidir con el del tema padre, pero conviene que sea claro y fácil de identificar. Muchas veces se usa el nombre del tema padre, añadiendo child o childtheme al final. Así evitas la probabilidad de que pueda coincidir con otro.

Crear el archivo style.css

El único archivo imprescindible para que exista un tema hijo es style.css. Dentro de ese archivo debes añadir una cabecera con la información básica del tema. Un ejemplo podría ser este:

/*
Theme Name: Mi tema hijo
Template: twentytwentyfour
*/

El campo importante aquí es Template. Ese valor debe coincidir exactamente con el nombre de la carpeta del tema padre. En este caso el tema Twenty Twenty-Four se encuentra en:

wp-content/themes/twentytwentyfour

Por eso el valor del campo Template es twentytwentyfour, indicando que el tema que estamos creando se basa en ese otro. Desde ese momento estarán estrechamente relacionados.

Si ese nombre no coincide exactamente, WordPress no podrá relacionar el tema hijo con su tema padre y el tema no funcionará correctamente.

Activar el tema hijo

Con la carpeta creada y el archivo style.css dentro, WordPress ya detectará el nuevo tema. Ahora solo tienes que ir al panel de administración y acceder Apariencia >> Temas. Ahí aparecerá tu nuevo tema hijo junto al resto de temas instalados.

Aquí es donde debes activarlo como harías con cualquier otro. En ese momento, tu tema hijo aparecerá como activo y el tema padre como inactivo. Pero en segundo plano sí que lo está, de modo que no elimines el padre.

Si entras en el frontend, no verás ningún cambio visual en la web, y es completamente normal. El tema hijo está utilizando todo el diseño del tema padre porque todavía no hemos añadido ninguna modificación.

Y con esto ya tendríamos un child theme, aunque de momento no hace nada en particular. Eso lo vamos a ver después, primero aclaremos un poco más a nivel de lógica cómo funciona. Esto te ayudará a entender mejor qué puedes hacer.

Cómo funciona un tema hijo

Cuando utilizas un tema hijo, WordPress sigue una lógica bastante simple para decidir qué archivos utilizar. Primero busca el archivo correspondiente dentro del tema hijo. Si lo encuentra, utiliza ese archivo. Si no existe, entonces carga el archivo equivalente desde el tema padre.

Por ejemplo, si copias el archivo single.php del tema padre al tema hijo y lo modificas allí, WordPress utilizará siempre esa versión. El archivo original del tema padre seguirá existiendo, pero dejará de utilizarse mientras exista la versión del tema hijo.

Este mismo comportamiento se aplica a plantillas, estilos o cualquier otro archivo del tema. Solo necesitas añadir en el tema hijo los elementos que quieras modificar. Todo lo demás seguirá funcionando exactamente igual que antes porque se seguirá cargando desde el tema padre.

Es decir, que el sistema que se usa es jerárquico y lo que esté en el hijo tiene prioridad sobre el padre. Esto no significa tampoco que si mete un archivo functions.php sobrescriba el del tema padre, sino que la funciones que se encuentren dentro, tendrán prioridad sobre las originales.

Cómo añadir estilos y personalizaciones

Ahora retomemos la práctica y veamos cómo realizar modificaciones. Y es que una vez activado el tema hijo puedes empezar a añadir cambios dentro del directorio.

Una de las modificaciones más habituales es añadir estilos CSS propios. Para ello puedes utilizar el mismo archivo style.css que has creado antes.

En muchos temas clásicos de WordPress es necesario asegurarse de que ese archivo se carga correctamente desde el tema hijo. Para ello suele añadirse un pequeño fragmento de código en el archivo functions.php.

Un ejemplo sencillo sería este:

add_action( 'wp_enqueue_scripts', 'cargar_estilos_tema_hijo' );

function cargar_estilos_tema_hijo() {
    wp_enqueue_style(
        'estilos-tema-hijo',
        get_stylesheet_uri()
    );
}

Este código se encarga de cargar el archivo style.css del tema hijo para que WordPress aplique los estilos que añadas.

En los temas modernos basados en bloques esto a veces no es necesario, ya que muchos estilos se gestionan desde theme.json. Aun así, este método sigue siendo útil cuando necesitas añadir CSS personalizado.

Otra posibilidad es añadir nuevas funciones en el archivo functions.php. Esto permite ampliar el comportamiento del tema sin tocar el código original. Eso sí, conviene evitar copiar directamente funciones completas desde el tema padre, porque podrías provocar errores si WordPress intenta cargar dos funciones con el mismo nombre.

Una vez que sabes que puedes añadir nuevas funciones, esto abre la posibilidad a incorporar todo tipo de scripts, módulos o librerías. El límite en ese sentido es el cielo (y tus conocimientos). La implementación de todo eso será similar a como lo harías con un tema padre.

Si prefieres no crear el tema hijo desde cero, he preparado una estructura básica que puedes descargar y utilizar como punto de partida. Te dejo el enlace a mi repositorio de GitHub al final del artículo.

Cuándo merece la pena usar un tema hijo

Aunque los temas hijo son una técnica muy habitual en WordPress, no siempre son necesarios ni recomendable. Todo depende de lo que tu proyecto necesite y cómo esté creado.

Tiene sentido utilizarlos cuando quieres hacer modificaciones en un tema que seguirá actualizándose. De esta forma puedes añadir tus propios estilos, funciones o plantillas sin tocar los archivos originales del tema. Eso ya lo tendrás claro a estas alturas.

En cambio, si el proyecto va a implicar cambios muy profundos en el diseño o en la estructura del tema, muchas veces resulta más práctico desarrollar un tema propio desde el principio.

Pero también puede darse el caso en el que lo más recomendable sea crear un plugin para añadir nuevas funcionalidades sin tener que tocar el tema directamente. Algo muy útil cuando los nuevos añadidos serán independientes del tema o si simplemente no tendremos acceso directo al servidor.

En proyectos pequeños o cuando se parte de un tema existente, el tema hijo suele ser la solución más sencilla y segura para personalizar el sitio.

No obstante, para un desarrollador WordPress, tomar la decisión recaerá sobre su criterio profesional. Antes crear uno, lo mejor es tomarse un momento para decidir cuál es la aproximación más adecuada al proyecto. Puede parecer una tontería, pero en proyectos que escalarán mucho, tu criterio, marca la diferencia.

---

Referencias:

• Tema hijo básico para descargar – Mi repositorio en GitHub
• Child Themes (inglés) – WordPress Developer Resources