Instalar tema hijo en WordPress | Guía para principiantes

¿Alguna vez has querido cambiar un color, añadir un botón gigante o modificar la tipografía de tu WordPress y has sentido miedo de cargarte todo el diseño? Tranquilo, no estás solo. La solución a ese miedo se llama tema hijo wordpress (o child theme en inglés). Es como un "traje de protección" que te permite experimentar sin romper tu web.

En esta guía completa, paso a paso y sin tecnicismos raros, te voy a enseñar a instalar tema hijo y a personalizar wordpress sin romper nada. Al final, serás capaz de tocar el código con confianza y mantener tu página rápida y estable.

¡Vamos allá!

¿Qué es un tema hijo y por qué es tu mejor amigo?

Imagina que tu tema principal (el que ves en Apariencia > Temas) es un coche de fábrica. Es bonito, funcional, pero cada vez que quieres añadirle un alerón o cambiarle el color de las llantas, el fabricante (el desarrollador del tema) te dice que si lo tocas, pierdes la garantía (las actualizaciones).

Un child theme wordpress es como tener un taller propio al lado del concesionario. No tocas el coche original. Creas una copia "en miniatura" que solo contiene tus modificaciones. Cuando el fabricante lanza una actualización del coche original (el tema padre), tú simplemente la aplicas y tu taller (el tema hijo) sigue funcionando perfectamente, conservando todos tus cambios.

Los 3 beneficios más importantes de usar un tema hijo

Actualizaciones seguras: Esta es la razón número uno. Si modificas directamente el tema padre, al actualizarlo perderás todos tus cambios (se sobrescribirán). Con un tema hijo, tus cambios viven aparte, así que puedes actualizar el tema original sin miedo.
Velocidad y rendimiento: Un tema hijo suele ser más ligero, ya que solo carga lo que necesita. No arrastra código basura de funciones que no usas.
Depuración sencilla: Si algo se rompe, es mucho más fácil encontrar el error porque sabes que está en tu tema hijo, no en el código complejo del tema padre.

Requisitos antes de empezar (No te saltes esto)

Para hacer este tutorial necesitas tener acceso a tu hosting. No te preocupes, es más fácil de lo que parece.

Acceso FTP o al Administrador de Archivos: Necesitas entrar en la carpeta wp-content/themes de tu instalación de WordPress. Puedes usar un cliente FTP como FileZilla, o si tu hosting usa Syspanel (el panel de control con puerto de acceso 2106), puedes usar su Administrador de Archivos en línea desde el navegador.
Un editor de texto plano: Nada de Word. Necesitas un editor de código como el Bloc de Notas de Windows, o mejor, uno gratuito como Visual Studio Code o Sublime Text. Sirven para crear y editar los archivos del tema.
Tema padre instalado: Debes tener el tema que quieres modificar ya instalado y activado (o saber su nombre exacto en la carpeta).

Paso 1: Crear la carpeta del tema hijo

Este es el primer paso. Vamos a crear una carpeta nueva donde vivirá nuestro tema hijo.

Entra a tu hosting y navega hasta la carpeta de tu WordPress.
Dentro, busca la carpeta wp-content, luego entra en themes.
Crea una carpeta nueva. El nombre debe ser único y normalmente se le añade -child al final del nombre del tema padre. Por ejemplo, si tu tema se llama flavor, la carpeta del hijo se llamará flavor-child.

[INFO] No uses espacios ni caracteres raros (como ñ o tildes) en el nombre de la carpeta. Usa guiones medios (-) para separar palabras. Es una regla de oro en WordPress.

Paso 2: Crear el archivo `style.css` (La Partida de Nacimiento)

Este es el archivo más importante. No solo controla los estilos, sino que le dice a WordPress que este tema existe y quién es su "padre".

Dentro de la carpeta que acabas de crear (ej. flavor-child), crea un archivo nuevo llamado style.css.
Ábrelo con tu editor de texto y pega el siguiente código:

/*
 Theme Name:   Flavor Child
 Theme URI:    https://tudominio.com/mi-tema-hijo
 Description:  Tema hijo para personalizar Flavor. Todos mis cambios van aquí.
 Author:       Tu Nombre
 Author URI:   https://tudominio.com
 Template:     flavor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  flavor-child
*/

¡Ojo con estos dos campos clave!

Theme Name: Ponle el nombre que quieras, pero que sea descriptivo. Aquí puedes usar espacios y mayúsculas.
Template: ESTE ES EL CAMPO CRÍTICO. Aquí debes escribir el nombre exacto de la carpeta del tema padre (el que viste en el Paso 1). En mi ejemplo, es flavor. Si te equivocas aquí, WordPress te dirá que el tema padre no existe y no podrás activarlo. Es la conexión entre el hijo y el padre.

Guarda el archivo.

Paso 3: Crear el archivo `functions.php` (El Motor de Personalización)

Este archivo es el que "hereda" las funciones del tema padre y nos permite añadir las nuestras propias. Sin él, tu tema hijo solo sería una hoja de estilos vacía.

Crea otro archivo en la misma carpeta (flavor-child). Nómbralo functions.php.
Ábrelo y pega este código básico:

<?php
// Acciones de mi tema hijo

function flavor_child_enqueue_styles() {
    // Primero cargamos el estilo del tema padre
    wp_enqueue_style( 'flavor-parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'flavor_child_enqueue_styles' );
?>

¿Qué hace este código?

Básicamente, le dice a WordPress: "Oye, cuando cargues la web, primero carga el CSS del tema padre y luego carga el mío (el del hijo)". Así, si quiero cambiar un color, escribo el nuevo color en mi style.css y como se carga después, tendrá prioridad. No estamos tocando el archivo del padre, solo le decimos que cargue el nuestro después.

[TIP] Si quieres añadir funciones PHP personalizadas (como crear un shortcode o cambiar la longitud del extracto), las añades dentro de este archivo functions.php. Nunca toques el del tema padre.

Paso 4: Activar el tema hijo desde el panel de WordPress

Ahora viene la parte fácil. Vamos a encender nuestro nuevo tema.

Ve a tu escritorio de WordPress.
Entra en Apariencia > Temas.
Deberías ver tu nuevo tema hijo (ej. "Flavor Child"). Búscalo y haz clic en Activar.

Si has hecho los pasos correctamente, tu web se verá exactamente igual que antes. Eso es una buena señal. Si se ve rara o sale un error, revisa que el campo Template en style.css tenga el nombre exacto de la carpeta del tema padre.

[WARNING] Si al activar el tema hijo ves un error que dice "El tema padre está roto" o "Template no existe", no entres en pánico. Vuelve al Paso 2 y verifica que el nombre en Template: coincida perfectamente con el nombre de la carpeta del tema padre en la carpeta themes. Es el error más común.

Paso 5: Personalizar sin romper (Tu zona segura)

Ahora que ya tienes el tema hijo activo, es hora de la diversión. Aquí es donde entra la regla de oro: todos tus cambios van en el tema hijo.

Para cambiar estilos (Colores, fuentes, márgenes)

Abre el archivo style.css de tu tema hijo.
Debajo del bloque de comentarios que pusiste al principio, pega tus reglas CSS.

Por ejemplo, para cambiar el color de fondo de tu web a un azul claro, añadirías:

body {
    background-color: #e0f7fa;
}

Guarda el archivo y recarga tu web (con Ctrl + F5 para limpiar la caché). ¡Verás el cambio al instante!

[TIP] Te recomiendo usar la herramienta "Inspeccionar" de tu navegador (clic derecho > Inspeccionar) para encontrar el nombre exacto de las clases CSS que quieres modificar. Así no tendrás que adivinar.

Para cambiar la estructura (PHP)

¿Quieres añadir un texto en el pie de página o modificar el HTML de un widget? Para eso necesitas usar "hooks" (ganchos) de WordPress.

Un ejemplo muy común es añadir un texto de copyright personalizado al final de la página. En tu functions.php del tema hijo, añadirías:

function flavor_custom_copyright() {
    echo '<p>© 2024 Mi Empresa Increíble. Todos los derechos reservados.</p>';
}
add_action( 'wp_footer', 'flavor_custom_copyright' );

Esto "engancha" tu función al pie de página y añade ese texto. No tienes que tocar el archivo footer.php del tema padre.

Preguntas Frecuentes (FAQ) sobre temas hijo

Aquí te resuelvo las dudas más comunes que nos llegan al soporte técnico.

¿Puedo tener varios temas hijo?

Sí, puedes tener los que quieras, pero solo puedes tener uno activo a la vez. Es buena idea tener uno de respaldo antes de hacer cambios grandes, pero para el día a día, uno es suficiente.

¿Qué pasa si el tema padre se actualiza?

Nada. Tu tema hijo seguirá funcionando. La actualización solo tocará el código del tema padre. Es como si pintaras tu coche en el taller y el concesionario te cambiara el aceite. No se afectan mutuamente.

¿Necesito saber programar para usar un tema hijo?

Para instalar un tema hijo, no. Solo necesitas copiar y pegar los códigos que te he dado. Para personalizarlo, necesitas al menos nociones básicas de CSS (para estilos) y PHP (para funciones). Pero puedes empezar solo con CSS, que es muy visual y fácil de aprender.

¿Es obligatorio usar un tema hijo si solo voy a usar el personalizador de WordPress?

No es obligatorio, pero es una buena práctica. A veces, el personalizador guarda cambios en la base de datos, pero si un plugin te da una opción para añadir CSS personalizado, ese CSS se pierde si cambias de tema. Con un tema hijo, tienes todo centralizado en tus archivos.

¿Dónde guardo las imágenes que quiero usar en mi tema hijo?

Crea una carpeta llamada images dentro de la carpeta de tu tema hijo (ej. flavor-child/images/). Puedes subir ahí tus logos o imágenes de fondo. Para llamarlas desde tu CSS, usarías una ruta relativa como url('images/mi-logo.png').

¿Puedo usar un tema hijo con cualquier tema de WordPress?

Sí, siempre que el tema padre siga las directrices estándar de WordPress (que la mayoría hace). Si el tema padre es un "bloque" (Block Theme) de la nueva generación, el proceso es un poco diferente, pero la idea de crear la carpeta y el style.css sigue siendo la base.

Conclusión y consejo final

Crear un tema hijo wordpress es el primer paso para convertirte en un usuario avanzado de WordPress. Te da la libertad de experimentar sin miedo y te asegura que tu web no se romperá con las actualizaciones.

Recuerda el mantra: "Todo al hijo, nada al padre".

Si tienes un problema con tu hosting o no encuentras la carpeta de archivos, recuerda que en Syspanel (accediendo por el puerto 2106) tienes el Administrador de Archivos para hacer todo esto sin necesidad de programas externos.

Ahora ve, crea tu carpeta, pega los códigos y empieza a personalizar tu web con total tranquilidad. ¡Tu yo del futuro (y tus visitantes) te lo agradecerán!