Child themes en WordPress: qué son, por qué usarlos y cómo crearlos

Por /

Un child theme en WordPress es un tema secundario que hereda las funcionalidades y el diseño de un tema padre. Te permite modificar plantillas, estilos y funciones sin tocar ni una línea del tema original, por lo que las actualizaciones no te borran el trabajo.

Por qué usar un child theme

La razón principal es la seguridad y la mantenibilidad. Cuando actualizas un tema padre, todos los archivos se sobrescriben. Si has metido mano directamente en header.php, single.php o style.css, adiós a tus cambios. Con un child theme mantienes tu código separado y limpio.

Además, es la forma recomendada por el equipo de WordPress. Si alguna vez tienes que pasar el proyecto a otro desarrollador o vendes la web, un child theme deja claro qué es tuyo y qué viene del tema original.

Cuándo no hace falta un child theme

Desde WordPress 5.9 y con los temas de bloques (block themes), la cosa cambia. Si tu tema usa solo theme.json y bloques, muchas personalizaciones se pueden hacer directamente desde el editor de sitio sin tocar código. En esos casos, un child theme puede ser un sobreesfuerzo innecesario. Úsalo solo cuando necesites sobrescribir plantillas PHP, añadir funciones complejas o modificar CSS que no se puede controlar con variables de theme.json.

Paso 1: Crea la carpeta del child theme

Conéctate por FTP o usa el gestor de archivos de tu hosting. Ve a wp-content/themes/ y crea una nueva carpeta. El nombre es libre, pero lo habitual es poner el slug del tema padre seguido de -child. Por ejemplo, si tu tema padre se llama twentytwentyfour, la carpeta se llamará twentytwentyfour-child.

Paso 2: Crea el archivo style.css

Este es el archivo obligatorio. Debe contener una cabecera con información del tema. Sin ella WordPress no reconocerá tu child theme.

/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://netcodes.es
Author: Tu Nombre
Author URI: https://netcodes.es
Description: Child theme del Twenty Twenty-Four
Template: twentytwentyfour
Version: 1.0
*/

La línea más importante es Template:. Ahí debes poner exactamente el nombre de carpeta del tema padre. Un error aquí y el child theme no funcionará.

Paso 3: Encola la hoja de estilos del padre

En versiones antiguas se usaba @import en el style.css. Eso está obsoleto y penaliza el rendimiento. La forma correcta es usar functions.php.

Crea un archivo functions.php en la raíz de tu child theme con este contenido:

<?php
add_action( 'wp_enqueue_scripts', 'netcodes_child_enqueue_styles' );

function netcodes_child_enqueue_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style,
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

Este código primero carga el CSS del tema padre y después el del child. El array de dependencias asegura que el estilo del hijo se cargue después.

Paso 4: Activa el child theme

Entra en tu panel de WordPress, ve a Apariencia → Temas y activa el nuevo tema. Verás que mantiene exactamente el mismo aspecto que el padre. Ya puedes empezar a modificar.

Qué puedes sobrescribir

En un child theme puedes sobrescribir casi cualquier archivo del tema padre copiándolo con la misma ruta y nombre. Por ejemplo:

  • header.php
  • footer.php
  • single.php
  • content.php
  • Cualquier plantilla de la carpeta template-parts/

También puedes crear tus propias plantillas. Si creas page-mi-plantilla-personalizada.php estará disponible en el editor de páginas.

Sobrescribir funciones del padre

Si el tema padre tiene funciones en functions.php, no puedes sobrescribirlas directamente. La solución es usar remove_action y remove_filter antes de añadir tu versión, o usar prioridades diferentes si es posible.

Ejemplo para eliminar una acción que añade un script innecesario:

add_action( 'wp_enqueue_scripts', 'netcodes_child_remove_parent_scripts', 20 );

function netcodes_child_remove_parent_scripts() {
    wp_dequeue_script( 'parent-unnecessary-script' );
}

Añadir CSS personalizado

Una vez tienes el child theme funcionando, puedes añadir tus reglas al final de style.css. Como se carga después del padre, tus estilos tienen prioridad.

/* Estilos personalizados del child theme */
.site-header {
    background-color: #1a1a1a;
    padding: 2rem 0;
}

.entry-title {
    font-size: 2.8rem;
    color: #222;
}

Plantillas de bloques en child themes

Con los temas de bloques también puedes usar child themes. En este caso la carpeta templates/ y parts/ del child sobrescribe a la del padre. El theme.json del hijo también tiene prioridad sobre el del padre en la mayoría de configuraciones.

Consejos finales de alguien que lleva años montando tiendas

No hagas child themes de temas que no están pensados para ello. Algunos temas comerciales ya incluyen su propio sistema de personalización y crear un child puede romper actualizaciones de su builder. En esos casos es mejor usar un tema hijo oficial si lo ofrecen o decantarte por un tema más limpio como punto de partida.

Guarda siempre tu child theme en Git. Parece obvio, pero más de uno ha perdido semanas de trabajo por un mal update del servidor. Y prueba siempre en un entorno de staging antes de activarlo en producción; un error en functions.php puede dejar tu web en blanco.

Con esta estructura tienes todo lo necesario para trabajar de forma profesional y mantenible. El resto es cuestión de ir añadiendo lo que necesites según avance el proyecto.

Scroll al inicio