Child themes en WordPress: qué son y por qué necesitas uno antes de personalizar
Si alguna vez has personalizado un tema de WordPress directamente — cambiando código en el archivo functions.php o en las hojas de estilo del tema — probablemente ya has vivido esto: actualizas el tema y todos tus cambios desaparecen. Todo lo que habías añadido, borrado. De golpe.
Eso se soluciona con un child theme (tema hijo). Es una de las bases del desarrollo en WordPress y una práctica que deberías aplicar siempre que vayas a modificar el código de un tema, sin excepciones.
Esta guía explica qué es, cómo funciona y cómo crear uno desde cero en menos de diez minutos.
Qué es un child theme y cómo funciona
Un child theme es un tema de WordPress que hereda toda la funcionalidad y el diseño de otro tema (el «tema padre» o parent theme), pero que te permite añadir modificaciones propias sin tocar el tema original.
La mecánica es simple: WordPress carga primero los archivos del child theme, y solo recurre al tema padre para los archivos que no encuentre en el child. Si en el child theme tienes un archivo functions.php, WordPress lo carga además del del tema padre (no en lugar de él). Si tienes un archivo single.php, WordPress usa el tuyo e ignora el del padre.
Esto significa que:
- Puedes modificar cualquier aspecto del tema padre sin tocar sus archivos originales.
- Cuando el tema padre se actualiza, tus cambios en el child theme no se pierden porque están en archivos separados.
- Si algo sale mal con una personalización, puedes simplemente desactivar el child theme y el sitio vuelve al estado original del tema padre.
Por qué no debes modificar el tema padre directamente
La razón principal es las actualizaciones. Los temas se actualizan regularmente para corregir errores de seguridad, mejorar la compatibilidad con nuevas versiones de WordPress y PHP, y añadir funcionalidades. Cuando un tema se actualiza, WordPress reemplaza todos sus archivos por los nuevos — y cualquier modificación que hayas hecho en esos archivos desaparece.
Las consecuencias prácticas de no usar un child theme:
- Pierdes tus personalizaciones cada vez que el tema padre se actualiza.
- No puedes actualizar el tema sin perder cambios, lo que te deja expuesto a vulnerabilidades de seguridad.
- El historial de cambios es opaco: si algo se rompe, no tienes una separación clara entre el código original del tema y tus modificaciones.
Hay desarrolladores que «resuelven» esto no actualizando nunca el tema padre. Es una mala práctica que acumula deuda técnica y riesgos de seguridad. La solución correcta es usar un child theme desde el principio.
Cuándo necesitas un child theme y cuándo no
Necesitas un child theme cuando:
- Vas a modificar archivos PHP del tema (plantillas de página, header, footer, single, archive, etc.).
- Vas a añadir funciones personalizadas en
functions.php. - Vas a sobrescribir estilos CSS del tema con cambios extensos o estructurales.
- Estás desarrollando un sitio para un cliente que va a mantenerse a largo plazo.
Podrías no necesitarlo cuando:
- Solo añades CSS menor que puedes gestionar desde el Personalizador de WordPress (Apariencia → Personalizar → CSS adicional). El CSS del Personalizador se guarda en la base de datos y no se pierde con las actualizaciones del tema.
- Usas un page builder como Elementor o Divi y todas tus personalizaciones están dentro del constructor, sin tocar archivos del tema.
- El tema que usas ya es un «starter theme» diseñado para ser modificado directamente (algunos temas como Underscores están pensados para esto, aunque incluso en ese caso un child theme es una buena práctica).
Cómo crear un child theme desde cero
Un child theme en su forma más básica necesita solo dos archivos: un style.css con el encabezado de identificación y un functions.php para cargar los estilos del tema padre.
Paso 1: Crear la carpeta del child theme
En tu servidor, dentro de /wp-content/themes/, crea una nueva carpeta con el nombre de tu child theme. La convención es usar el nombre del tema padre seguido de -child:
/wp-content/themes/
astra/ (tema padre)
astra-child/ (child theme)Puedes crear la carpeta desde el Gestor de archivos de cPanel, por SFTP o por SSH:
bash
mkdir /var/www/miweb/wp-content/themes/astra-childPaso 2: Crear el archivo style.css
Dentro de la carpeta del child theme, crea un archivo llamado style.css con este contenido:
css
/*
Theme Name: Astra Child
Theme URI: https://tudominio.com
Description: Child theme de Astra para tudominio.com
Author: Tu Nombre
Author URI: https://tudominio.com
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/Los campos importantes son:
- Theme Name: el nombre que verá WordPress para identificar el child theme.
- Template: el nombre de la carpeta del tema padre (en minúsculas, exactamente como se llama la carpeta en
/wp-content/themes/). Este es el campo que le dice a WordPress cuál es el tema padre.
El resto de campos son opcionales pero recomendables.
Paso 3: Crear el archivo functions.php
El child theme necesita cargar los estilos del tema padre. Crea un archivo functions.php en la carpeta del child theme con este contenido:
php
<?php
function mi_child_theme_estilos() {
wp_enqueue_style(
'tema-padre-estilos',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'tema-hijo-estilos',
get_stylesheet_directory_uri() . '/style.css',
array('tema-padre-estilos')
);
}
add_action('wp_enqueue_scripts', 'mi_child_theme_estilos');Este código carga primero el CSS del tema padre y luego el del child theme, asegurando que tus estilos se aplican encima de los del padre.
Nota: algunos temas modernos gestionan el CSS de forma diferente (sin usar
style.csscomo hoja principal) y no necesitan este código exacto. Si después de activar el child theme el diseño se ve roto, revisa la documentación del tema padre — puede que usewp_enqueue_style()internamente y no necesites cargar el style.css del padre manualmente.
Paso 4: Activar el child theme
Una vez creados los dos archivos, ve al panel de WordPress → Apariencia → Temas. Verás el child theme en la lista. Haz clic en Activar.
El sitio debería verse exactamente igual que antes. Si algo cambia visualmente, revisa el paso de carga de estilos.
Alternativa: crear el child theme con un plugin
Si prefieres no crear los archivos manualmente, hay plugins que automatizan el proceso:
Child Theme Configurator: el más completo. Genera el child theme con la configuración correcta, copia los archivos del tema padre que necesitas personalizar y tiene opciones avanzadas de configuración.
One-Click Child Theme: la opción más simple. Con un solo clic genera el child theme con los archivos mínimos necesarios.
Para proyectos serios, la creación manual es recomendable porque entiendes exactamente qué contiene el child theme. Para usuarios que necesitan una solución rápida, los plugins funcionan bien.
Cómo añadir personalizaciones en el child theme
Añadir CSS personalizado
Todo el CSS que escribas en el style.css del child theme se aplica encima del CSS del tema padre. Esto significa que puedes sobrescribir cualquier estilo del tema padre sin modificar sus archivos:
css
/* style.css del child theme */
/* Cambiar el color de los títulos */
h1, h2, h3 {
color: #1a1a2e;
}
/* Modificar el ancho del contenido */
.site-content {
max-width: 1100px;
}
/* Cambiar la fuente del cuerpo */
body {
font-family: 'Georgia', serif;
}Si el estilo no se aplica porque el tema padre usa una especificidad CSS mayor, puedes aumentar la especificidad de tu selector o, como último recurso, usar !important.
Añadir funciones personalizadas
El functions.php del child theme se carga además del del tema padre, no en lugar de él. Eso significa que puedes añadir tus propias funciones directamente:
php
<?php
// Cargar estilos (ya lo tienes del paso anterior)
function mi_child_theme_estilos() { /* ... */ }
add_action('wp_enqueue_scripts', 'mi_child_theme_estilos');
// Añadir soporte para formatos de entrada
add_theme_support('post-formats', array('aside', 'gallery', 'quote'));
// Registrar una nueva área de widgets
function mi_area_widgets() {
register_sidebar(array(
'name' => 'Sidebar del blog',
'id' => 'sidebar-blog',
'description' => 'Widgets del sidebar del blog',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
));
}
add_action('widgets_init', 'mi_area_widgets');
// Cambiar el número de resultados en búsquedas
function mi_resultados_busqueda($query) {
if ($query->is_search && !is_admin()) {
$query->set('posts_per_page', 12);
}
return $query;
}
add_filter('pre_get_posts', 'mi_resultados_busqueda');Sobrescribir plantillas del tema padre
Esta es la parte más potente de los child themes. Si quieres modificar cómo se muestran las entradas individuales, el header, el footer, los archivos de categorías o cualquier otra parte del sitio, puedes copiar la plantilla del tema padre al child theme y modificarla ahí.
WordPress buscará primero los archivos de plantilla en el child theme. Si los encuentra, los usa en lugar de los del padre.
Por ejemplo, para modificar el footer:
- Localiza el archivo
footer.phpen la carpeta del tema padre (/wp-content/themes/astra/footer.php). - Cópialo a la carpeta del child theme (
/wp-content/themes/astra-child/footer.php). - Edita el archivo copiado con los cambios que necesitas.
A partir de ese momento, WordPress usa tu versión del footer. Cuando el tema padre se actualice y su footer.php cambie, tu versión en el child theme no se verá afectada — aunque tendrás que revisar periódicamente si los cambios del padre necesitan integrarse en tu versión.
Estructura de un child theme más completo
Para un proyecto real, un child theme puede tener esta estructura:
astra-child/
├── style.css (obligatorio: identificación del child theme)
├── functions.php (obligatorio: cargar estilos y funciones)
├── footer.php (opcional: plantilla de footer personalizada)
├── header.php (opcional: plantilla de header personalizada)
├── single.php (opcional: plantilla de entrada individual)
├── page.php (opcional: plantilla de página estática)
├── archive.php (opcional: plantilla de archivos)
├── 404.php (opcional: página de error personalizada)
├── /assets/
│ ├── /css/
│ │ └── custom.css (CSS adicional organizado)
│ ├── /js/
│ │ └── custom.js (JavaScript personalizado)
│ └── /images/
│ └── logo.png (imágenes del tema)
└── /template-parts/ (partes de plantilla personalizadas)No necesitas todos estos archivos desde el principio. Crea cada uno solo cuando necesites modificar esa parte concreta del tema.
Child themes y el editor de bloques (Gutenberg)
Con la adopción del editor de bloques de WordPress y los temas de bloques (block themes), el rol de los child themes está evolucionando. Los temas de bloques modernos usan un sistema diferente: las plantillas se gestionan desde el editor visual en formato HTML/JSON en lugar de archivos PHP.
Para los block themes, WordPress 6.x introdujo los child block themes, que funcionan de forma similar pero con una estructura diferente:
mi-child-block-theme/
├── style.css (con el encabezado Template: nombre-tema-padre)
├── theme.json (configuración de estilos y ajustes)
└── /templates/ (plantillas en formato HTML de bloques)Si usas un tema de bloques moderno (como Twenty Twenty-Five), el child theme se crea igual pero las personalizaciones se hacen principalmente en theme.json y en plantillas de bloques, no en PHP.
Para proyectos con temas clásicos (Astra, GeneratePress, Kadence, etc.), el sistema de child themes descrito en esta guía sigue siendo el estándar.
Gestionar el child theme en un entorno de desarrollo
Una buena práctica es desarrollar el child theme en un entorno local antes de subir los cambios al servidor de producción. Herramientas como LocalWP te permiten tener WordPress funcionando en tu ordenador de forma gratuita.
El flujo de trabajo recomendado es:
- Desarrolla y prueba los cambios en local.
- Cuando estés satisfecho, sube los archivos del child theme al servidor mediante SFTP o el Gestor de archivos de cPanel.
- Verifica que todo funciona en producción.
Si usas Git para el control de versiones (lo cual es muy recomendable para proyectos serios), el child theme es exactamente lo que deberías versionar — no el tema padre, que es un componente de terceros.
Preguntas frecuentes sobre child themes
¿Un child theme ralentiza la web?
No de forma significativa. Añade una petición HTTP adicional para el CSS del child theme, pero el impacto es mínimo (milisegundos). Si tienes pocas líneas de CSS personalizado, puedes concatenarlo con el del padre usando un plugin de caché.
¿Puedo usar un child theme con Elementor o Divi?
Sí. Los page builders funcionan perfectamente con child themes. De hecho, si usas un page builder y además necesitas modificar código PHP del tema, el child theme es imprescindible.
¿Qué pasa si actualizo el tema padre y el child theme deja de funcionar?
Las actualizaciones del tema padre pueden romper el child theme si añaden cambios incompatibles. Antes de actualizar el tema padre, revisa las notas de la actualización y prueba en un entorno de staging.
¿Puedo tener más de un child theme?
Puedes tener instalados varios child themes del mismo padre, pero solo uno puede estar activo a la vez. Algunos desarrolladores crean diferentes child themes para diferentes clientes o entornos.
¿El child theme afecta al SEO?
No directamente. Lo que afecta al SEO es la velocidad de carga, la estructura del HTML y el contenido — no si usas o no un child theme. Un child theme bien hecho no añade código innecesario.
