Cómo crear un niño (child theme) en WordPress
¿Alguna vez has querido cambiar un color, añadir un botón o modificar un texto en tu web y has tenido miedo de romper todo? Es un miedo muy común, y la solución profesional a ese problema se llama crear un child theme o tema hijo. En este artículo, te voy a explicar de forma clara y sencilla qué es, por qué es esencial y, sobre todo, cómo crear un child theme en WordPress paso a paso, incluso si nunca has tocado una línea de código.
¿Qué es un child theme o tema hijo?
Imagina que el tema de WordPress que usas (como Astra, GeneratePress o Divi) es una receta de cocina. El child theme es tu cuaderno de notas donde escribes tus propios trucos, ingredientes extra o modificaciones. No tocas la receta original, así que si la receta original se actualiza (el tema principal), tus anotaciones siguen ahí, intactas.
Técnicamente, un tema hijo es un tema de WordPress que hereda todas las funciones, estilos y plantillas del tema principal (llamado tema padre). Sin embargo, te permite sobrescribir partes concretas sin afectar al original. Es la base del desarrollo wordpress seguro.
¿Por qué es tan importante usar un tema hijo?
Hay tres razones de peso para no modificar nunca el tema padre directamente:
- Las actualizaciones no te romperán la web: Si editas el archivo
style.cssofunctions.phpdel tema principal, cuando ese tema se actualice, perderás todos tus cambios. Al usar un tema hijo, tus modificaciones están a salvo porque viven en una carpeta separada. - Mantienes la web rápida y segura: Al no hackear el tema principal, el código de tu web sigue siendo limpio y compatible con las últimas versiones de WordPress y PHP.
- Es la práctica profesional estándar: Cualquier agencia o desarrollador serio te exigirá trabajar con un tema hijo para personalizar wordpress sin dramas. Es la forma correcta de trabajar.
Requisitos previos: ¿qué necesito para empezar?
Antes de lanzarnos a la acción, necesitas tres cosas:
- Un tema padre instalado: Puede ser el que ya tienes activo. No pasa nada si no es el más popular.
- Un gestor de archivos: Puedes usar el administrador de archivos de tu hosting (como Syspanel, que es el panel de control que te recomendamos y se accede por el puerto 2106), o un cliente FTP como FileZilla.
- Un editor de texto plano: Nada de Word. Usa el Bloc de notas, Sublime Text o Visual Studio Code.
Cómo crear un child theme en WordPress: La guía definitiva (Método Manual)
Vamos a hacerlo a mano, porque así entiendes qué pasa por debajo. Es más fácil de lo que parece y te dará un control total. Sigue estos pasos al pie de la letra.
Paso 1: Crear la carpeta del tema hijo
Lo primero es ir a la carpeta de temas de WordPress. Usa tu cliente FTP o el gestor de archivos de Syspanel (recuerda, el puerto es el 2106).
Navega hasta:
/public_html/wp-content/themes/
Aquí es donde viven todos tus temas. Crea una nueva carpeta. El nombre debe ser descriptivo pero sin espacios. Una buena práctica es usar el nombre del tema padre y añadirle -child.
- Si tu tema padre se llama
mi-tema, la carpeta hija se llamarámi-tema-child.
Paso 2: Crear el archivo style.css (la hoja de estilos)
Dentro de la carpeta recién creada (mi-tema-child), crea un archivo llamado style.css. Este archivo es el corazón del tema hijo. No es un archivo vacío; debe tener una cabecera especial que WordPress reconoce. Copia y pega este código, cambiando los datos por los tuyos:
/*
Theme Name: Mi Tema Child
Theme URI: https://tusitio.com
Description: Tema hijo personalizado para Mi Tema.
Author: Tu Nombre
Author URI: https://tusitio.com
Template: mi-tema
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
Text Domain: mi-tema-child
*/
Atención a la línea Template: Es la más crítica. Debe decir exactamente el nombre de la carpeta de tu tema padre. Si el tema padre está en wp-content/themes/astra, entonces la línea debe ser Template: astra. Si pones mal este nombre, WordPress no encontrará el tema padre y te dará un error.
Paso 3: Activar el tema hijo en WordPress
Ahora ve a tu escritorio de WordPress. En el menú lateral, entra en Apariencia > Temas. Verás tu nuevo tema hijo listado. Actívalo igual que harías con cualquier otro tema.
No te asustes si tu web se ve un poco "desnuda" o sin estilos al principio. Es normal. Aún no hemos conectado los estilos del tema padre. Lo haremos en el siguiente paso.
Paso 4: Encolar los estilos del tema padre (¡El paso más importante!)
Un error común es pensar que al activar el tema hijo, este hereda los estilos automáticamente. No es así. Tienes que decirle a WordPress que cargue los estilos del padre y luego los tuyos. Esto se hace mediante el archivo functions.php.
Crea otro archivo en tu carpeta mi-tema-child, llámalo functions.php. Copia y pega este código:
<?php
/**
* Encola los estilos del tema padre y del tema hijo.
*/
function mi_tema_child_enqueue_styles() {
// 1. Obtener el nombre del tema padre (lo saca de la cabecera del style.css)
$parent_style = 'parent-style';
// 2. Encolar el estilo del padre
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
// 3. Encolar el estilo del hijo (el nuestro)
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'mi_tema_child_enqueue_styles' );
Guarda el archivo y vuelve a tu web. Ahora sí, deberías ver tu web con el diseño de tu tema padre, pero con la seguridad de que ya puedes editarlo sin miedo.
[TIP] Si tu tema padre usa un sistema de carga de estilos más avanzado (como variables CSS), puede que necesites usar get_template_directory_uri() en lugar de get_stylesheet_uri(). Este código que te he dado es el más universal y funciona en el 99% de los casos.
Método Alternativo: Crear un tema hijo con un Plugin
Si prefieres no tocar código y quieres hacerlo en 2 minutos, existe una forma aún más fácil: usar un plugin. El más conocido y fiable es Child Theme Configurator.
- Ve a Plugins > Añadir nuevo en tu WordPress.
- Busca "Child Theme Configurator".
- Instálalo y actívalo.
- Ve a Herramientas > Child Themes.
- Selecciona tu tema padre en el desplegable y haz clic en "Analizar".
- El plugin detectará automáticamente los archivos necesarios y te ofrecerá crear el tema hijo. Solo tienes que darle a "Crear nuevo tema hijo".
- Luego, actívalo desde Apariencia > Temas.
Este plugin también te permite copiar archivos del padre al hijo (como header.php o footer.php) para que los edites sin romper nada. Es una maravilla.
[INFO] Aunque uses un plugin, es fundamental que entiendas la estructura (carpetas y archivos). Los plugins a veces fallan o se quedan obsoletos, y saber hacerlo a mano te salvará en el futuro.
Cómo personalizar tu tema hijo (Ejemplos prácticos)
Ahora viene lo divertido: personalizar wordpress a tu gusto. Aquí tienes dos ejemplos clave de lo que puedes hacer.
Añadir CSS personalizado
Quieres cambiar el color de los enlaces a rojo. En lugar de tocar el tema padre, añade esto al final de tu style.css del tema hijo:
a {
color: #ff0000;
}
Así de simple. Tus cambios se aplican por encima de los del padre.
Modificar la funcionalidad con PHP
¿Quieres añadir un "Hola" en el footer? Abre tu functions.php del tema hijo y añade esta función antes del cierre ?>:
function mi_tema_child_footer_mensaje() {
echo '<p>¡Gracias por visitar mi web!</p>';
}
add_action( 'wp_footer', 'mi_tema_child_footer_mensaje' );
Regla de oro: Nunca edites directamente el functions.php del tema padre. Usa siempre el del hijo.
Errores comunes y cómo solucionarlos
- Error: "El tema padre está ausente": Esto significa que la línea
Template:en tustyle.cssestá mal escrita o el nombre de la carpeta del padre no coincide. Revisa que sea exacto (mayúsculas y minúsculas cuentan). - La web se ve sin diseño: No has encolado los estilos del padre. Revisa que tu
functions.phptenga el código correcto y que esté en la carpeta correcta (mi-tema-child/functions.php). - No veo mis cambios: Limpia la caché del navegador y la caché de plugins de caché (como WP Rocket o W3 Total Cache). A veces el navegador guarda una versión antigua.
Preguntas Frecuentes (FAQ)
¿Puedo crear un tema hijo de cualquier tema?
Sí, de cualquier tema de WordPress, ya sea del repositorio oficial o de pago (como los de ThemeForest), siempre que el tema tenga un archivo style.css con la cabecera correcta.
¿Perderé mi SEO si cambio a un tema hijo?
No. El SEO lo gestionan plugins como Yoast o RankMath, y la estructura de HTML. Al crear un tema hijo correctamente, el HTML es el mismo que el del tema padre, así que no pierdes nada. De hecho, al mantener el sitio rápido y estable, ayudas al SEO.
¿Qué pasa si el tema padre se actualiza?
Nada. Ese es el punto. Tus archivos en el tema hijo no se tocan. Las actualizaciones del padre solo afectan a la carpeta del padre.
¿Puedo eliminar el tema padre después de crear el hijo?
No, nunca. El tema hijo depende del padre para funcionar. Si eliminas el padre, tu web se romperá.
¿Es mejor un tema hijo que un page builder?
No son excluyentes. Puedes usar un page builder (como Elementor) dentro de un tema hijo. El tema hijo te da seguridad para el código, y el page builder te da facilidad visual.
[WARNING] No intentes crear un tema hijo si tu tema padre es un tema "clásico" muy antiguo que no usa wp_enqueue_style. Consulta la documentación del tema. En casos muy raros, necesitarás encolar los scripts del padre de forma manual.
Conclusión: Tu web, tu seguridad
Crear un child theme de wordpress es la primera lección de cualquier curso serio de desarrollo wordpress. Es un hábito que te ahorrará dolores de cabeza, dinero y tiempo. Ya sea que uses el método manual o el plugin, lo importante es que empieces a trabajar con esta estructura desde hoy.
No tengas miedo a equivocarte. Crea una copia de seguridad antes de empezar (puedes hacerlo desde Syspanel en el puerto 2106, en la sección de backups) y experimenta. Una vez que domines esto, estarás un paso más cerca de ser un verdadero profesional de WordPress.
Ahora que ya sabes cómo crear un tema hijo, es el momento de pasar a la acción. Ve a tu panel, crea tu carpeta y escribe tu primer style.css. ¡Tu yo del futuro te lo agradecerá!
