Cómo crear y personalizar temas hijo en WordPress: Guía práctica para desarrolladores intermedios
En el desarrollo web con WordPress, personalizar un tema sin perder la posibilidad de actualizarlo es fundamental. Los temas hijo permiten hacer modificaciones sobre un tema padre sin alterar su código original, garantizando la estabilidad y facilidad de mantenimiento.
Este tutorial está dirigido a desarrolladores con nivel intermedio interesados en aprender a crear y personalizar temas hijo desde cero. Veremos paso a paso cómo configurarlos, buenas prácticas, errores comunes y cómo probar que tus cambios están aplicados correctamente.
Al finalizar, tendrás las herramientas necesarias para desarrollar temas hijo robustos que mantengan la integridad de tus sitios web WordPress.
¿Qué es un tema hijo en WordPress y por qué usarlo?
Un tema hijo (child theme) es un tema que hereda la funcionalidad y el estilo de otro tema, llamado tema padre. Esto permite personalizar el sitio sin modificar directamente los archivos del tema padre, lo que facilita las actualizaciones sin perder los cambios realizados.
- Ventajas: seguridad en actualizaciones, mejor organización, posibilidad de extender funcionalidades.
- Cuándo usarlo: si quieres modificar un tema existente sin perder las actualizaciones del original.
Preparación: requisitos previos
Para seguir este tutorial necesitas:
- Un sitio WordPress instalado, preferiblemente en local o un entorno de pruebas.
- Acceso a los archivos del sitio (FTP o administrador de archivos).
- Un editor de código (VSCode, Sublime, etc.).
- Conocimientos básicos de PHP, CSS y estructura de WordPress.
Paso 1: Crear la carpeta y archivos básicos del tema hijo
Navega a la carpeta wp-content/themes y crea una nueva carpeta con un nombre representativo, por ejemplo twentytwentyone-child si tu tema padre es Twenty Twenty-One.
Dentro de esta carpeta crea dos archivos esenciales:
- style.css: archivo que define la hoja de estilos del tema hijo y contiene información del tema.
- functions.php: archivo para añadir funciones y cargar estilos.
Contenido mínimo de style.css
Incluye un encabezado especial para que WordPress reconozca el tema hijo:
- Theme Name: Nombre visible del tema hijo.
- Template: carpeta del tema padre (muy importante).
Debes evitar errores en este archivo, especialmente en el campo Template que debe coincidir exactamente con el nombre de la carpeta del tema padre.
Paso 2: Encolar correctamente las hojas de estilo
No basta con sólo importar el CSS del tema padre en style.css. La forma recomendada es usar wp_enqueue_scripts mediante functions.php para cargar ambos estilos correctamente y evitar conflictos o problemas de rendimiento.
Usar @import en CSS es una mala práctica porque ralentiza la carga y puede generar conflictos.
Paso 3: Añadir cambios personalizados
Ahora que el tema hijo está configurado, puedes modificar CSS o añadir funciones extra en functions.php. Por ejemplo, puedes ajustar colores, tipografías o añadir nuevos hooks para funcionalidades personalizadas.
Para personalizaciones más complejas, puedes copiar plantillas del tema padre al hijo y modificarlas, lo que permite cambiar la estructura sin tocar el original.
Errores comunes y cómo evitarlos
- Fallo en el campo Template: si no corresponde al nombre exacto de la carpeta del padre, el tema hijo no se activa.
- No encolar estilos correctamente: usar @import en CSS suele causar problemas.
- Copiar demasiados archivos: sólo copia los necesarios para evitar duplicidad y complicación.
- No probar los cambios: siempre verifica el front-end y usa herramientas de inspección y debugging de WordPress.
Cómo probar los cambios
Para probar, activa el tema hijo desde el panel de administración y revisa el sitio. Usa herramientas de inspección del navegador para verificar que el CSS del hijo se ha cargado y que las funciones personalizadas funcionan sin errores PHP.
Además, puedes activar modo debug de WordPress para detectar errores y warnings durante el desarrollo.
Ejemplos prácticos de código
Archivo style.css básico para tema hijo
Archivo CSS con encabezado obligatorio que indica que es un tema hijo y especifica el tema padre.
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://example.com/twenty-twenty-one-child/
Description: Tema hijo personalizado basado en Twenty Twenty-One.
Author: Tu Nombre
Author URI: https://example.com
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyone-child
*/
/* Aquí puedes añadir estilos CSS personalizados */
body {
background-color: #f0f0f0;
} Functions.php para encolar estilos correctamente
Función en PHP para cargar la hoja de estilos del tema padre y luego la del tema hijo, respetando el orden correcto y buenas prácticas.
<?php
function twentytwentyone_child_enqueue_styles() {
$parenthandle = 'twentytwentyone-style'; // Handle del tema padre
$theme = wp_get_theme();
wp_enqueue_style($parenthandle, get_template_directory_uri() . '/style.css', array(), $theme->parent()->get('Version'));
wp_enqueue_style('twentytwentyone-child-style', get_stylesheet_uri(), array($parenthandle), $theme->get('Version'));
}
add_action('wp_enqueue_scripts', 'twentytwentyone_child_enqueue_styles');
?>Añadir función personalizada en functions.php
Cómo añadir una función que cambia el texto del pie de página usando un hook de WordPress en el tema hijo.
<?php
function twentytwentyone_child_footer_text() {
echo '<p>© ' . date('Y') . ' Sitio personalizado con tema hijo.</p>';
}
add_action('wp_footer', 'twentytwentyone_child_footer_text');
?>Sobrescribir una plantilla copiándola al tema hijo
Ejemplo para sobrescribir el archivo footer.php del tema padre copiándolo en el tema hijo para modificarlo sin afectar el original.
// Copia el archivo footer.php desde la carpeta del tema padre a la del hijo.
// Luego realiza los cambios deseados dentro del nuevo footer.php del tema hijo.
// Ejemplo de contenido modificado en footer.php del tema hijo:
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<p>Este pie de página ha sido personalizado en el tema hijo.</p>
</div><!-- .site-info -->
</footer>
<?php
// Guarda y sube el archivo para ver los cambios reflejados en el front-end.
Crear y personalizar temas hijo en WordPress es una técnica imprescindible para desarrolladores que buscan mantener la integridad del tema padre y facilitar las actualizaciones. Siguiendo las buenas prácticas y evitando errores comunes, puedes extender tu sitio de forma segura y eficiente.
Como próximos pasos, te recomendamos explorar cómo añadir plantillas personalizadas avanzadas y cómo integrar frameworks CSS en tu tema hijo para un desarrollo más profesional.