Guía de los temas hijos de WordPress

Qué es un tema hijo de WordPress

Un tema hijo (child theme) en WordPress es un tema que hereda la funcionalidad, los estilos y los archivos de plantilla de otro tema llamado padre (parent). Un tema hijo te permite cambiar el diseño y la funcionalidad de un sitio sin modificar directamente los archivos del tema padre. ¿Por qué es importante? Porque, cuando actualizas el tema padre, todos los cambios que hayas hecho en sus archivos se borran y se restablecen a los valores predeterminados.

Imagina este escenario: compraste un tema premium de WordPress, personalizaste los estilos CSS, añadiste funciones personalizadas en functions.php y modificaste archivos de plantilla. Un mes después, el autor del tema publica una actualización con parches de seguridad. Actualizas el tema y... todas tus personalizaciones desaparecen. Tienes que rehacerlo todo desde cero. Con un tema hijo, este problema no existe, porque tus cambios se guardan en archivos separados que no se tocan durante las actualizaciones.

Por qué usar un tema hijo

Hay varias razones clave para usar un tema hijo en lugar de modificar directamente el tema padre.

Actualizaciones seguras

Esta es la razón principal. Los temas de WordPress se actualizan con regularidad con parches de seguridad, correcciones de errores y nuevas funciones. Sin un tema hijo, tienes dos malas opciones: actualizar el tema y perder todas las personalizaciones, o no actualizarlo y exponer el sitio a vulnerabilidades de seguridad. Con un tema hijo, actualizas el tema padre sin preocupaciones, porque tus cambios están a salvo en el tema hijo.

Organización del código

Un tema hijo separa claramente tus personalizaciones del código original del tema. Cuando miras los archivos del tema hijo, ves exactamente qué has cambiado respecto al diseño original. Esto facilita la depuración, la documentación y la colaboración con otros desarrolladores. Si algo no funciona bien, basta con eliminar el archivo del tema hijo y volver al comportamiento original del tema padre.

Aprender y experimentar

Un tema hijo es un espacio seguro para aprender desarrollo en WordPress. Puedes experimentar con CSS, PHP y archivos de plantilla sin miedo a romper el sitio. Si algo sale mal, desactivas el tema hijo y el sitio vuelve al aspecto original con el tema padre. Esto es especialmente útil para principiantes que están aprendiendo a desarrollar en WordPress.

Crear un tema hijo paso a paso

Crear un tema hijo es un proceso sencillo que solo requiere dos archivos. Aquí tienes una guía detallada.

Paso 1: Crear el directorio

En el directorio wp-content/themes/ crea una nueva carpeta para el tema hijo. Accede a los archivos mediante el Administrador de archivos de cPanel o por FTP. La convención de nombres es nombre-del-tema-padre-child. Por ejemplo, si usas el tema "flavor", crea la carpeta "flavor-child". No es obligatorio, pero facilita identificar el tema hijo. El nombre de la carpeta debe ser único entre todos los temas del sitio.

Paso 2: Crear el archivo style.css

Crea un archivo style.css en el directorio del tema hijo con el siguiente comentario de cabecera: Theme Name (obligatorio: el nombre único de tu tema hijo), Template (obligatorio: el nombre del directorio del tema padre, exactamente como se llama la carpeta), Version, Description y Author. El campo Template es fundamental: debe coincidir exactamente con el nombre de la carpeta del tema padre. Si el tema padre está en la carpeta flavor, Template debe ser flavor. Un error en este campo hará que el tema hijo no funcione.

Paso 3: Crear el archivo functions.php

Crea functions.php en el tema hijo y añade una función que encole los estilos del tema padre. Esto es necesario para que el tema hijo herede el diseño del tema padre. Usa wp_enqueue_style() dentro de una función enganchada a la acción wp_enqueue_scripts. Encola parent-style con get_template_directory_uri() para la ruta al tema padre y child-style con get_stylesheet_directory_uri() para la ruta al tema hijo, con parent-style como dependencia para que se cargue primero.

Paso 4: Activación

Ve al panel de administración de WordPress, Apariencia → Temas, y activa tu tema hijo. Deberías ver un sitio idéntico al de antes: todos los estilos y la funcionalidad del tema padre. Si el sitio se ve completamente diferente (sin estilos), comprueba que functions.php encola correctamente los estilos del padre y que la cabecera Template de style.css es correcta.

Personalizar el tema hijo

Ahora que tienes un tema hijo funcional, puedes empezar con las personalizaciones.

Personalizaciones de CSS

Añade tus cambios de CSS al archivo style.css del tema hijo. Como el tema hijo se carga DESPUÉS del tema padre, tus estilos tienen prioridad (el principio de la cascada de CSS). Por ejemplo, si quieres cambiar el color del título, añade la regla en el style.css del hijo y sobrescribirá el estilo del tema padre. Usa las Herramientas para desarrolladores del navegador (F12) para identificar los selectores CSS exactos que necesitas cambiar.

Sobrescribir plantillas

WordPress utiliza una jerarquía de plantillas para determinar qué archivo usar al mostrar una página. Un tema hijo puede sobrescribir cualquier archivo de plantilla del tema padre creando un archivo con el mismo nombre. Por ejemplo, si quieres cambiar el aspecto de una entrada de blog individual, copia single.php del tema padre al tema hijo y modifícalo. WordPress usará automáticamente la versión del tema hijo. IMPORTANTE: copia el archivo completo, no solo la parte que vas a cambiar, porque el archivo del tema hijo sustituye por completo la versión del padre.

Particularidades de functions.php

A diferencia de los archivos de plantilla, donde el tema hijo sustituye al padre, el functions.php del tema hijo se carga ANTES que el functions.php del tema padre. Eso significa que ambos archivos están activos al mismo tiempo. Esto es útil porque puedes añadir funciones nuevas sin copiar todo el functions.php del tema padre. Pero ten cuidado: si defines una función con el mismo nombre que en el tema padre (y el padre usa una comprobación if(!function_exists())), tu versión tendrá prioridad.

Añadir nuevos archivos de plantilla

Además de sobrescribir archivos de plantilla existentes, un tema hijo puede añadir otros completamente nuevos. Por ejemplo, puedes crear una plantilla de página personalizada que no existe en el tema padre. Añade un archivo PHP con un comentario Template Name en la parte superior y estará disponible como opción en el editor de WordPress al crear una nueva página. Esta es una forma potente de añadir diseños específicos para páginas de aterrizaje, páginas de portafolio u otras necesidades personalizadas.

Técnicas avanzadas

Eliminar acciones y filtros del padre

A veces quieres eliminar funcionalidad del tema padre en lugar de añadir funcionalidad nueva. Usa remove_action() y remove_filter() en el functions.php del tema hijo para eliminar los hooks que el tema padre haya registrado. Esto requiere conocer el nombre exacto de la función, el hook y la prioridad del tema padre. Revisa el código fuente del tema padre para encontrar esta información. Nota: remove_action() debe llamarse después de que la acción esté registrada; usa el hook after_setup_theme con una prioridad posterior.

Sobrescribir plantillas de WooCommerce

Si usas WooCommerce, el tema hijo puede sobrescribir los archivos de plantilla de WooCommerce creando un directorio woocommerce/ dentro del tema hijo. Por ejemplo, para personalizar el aspecto de la página de producto, copia content-single-product.php de wp-content/plugins/woocommerce/templates/ a wp-content/themes/tu-tema-hijo/woocommerce/ y modifícalo. WooCommerce usará automáticamente tu versión.

Usar un tema hijo con maquetadores de páginas

Si usas Elementor, Divi u otro maquetador de páginas, sigue siendo recomendable un tema hijo. El maquetador almacena el contenido en la base de datos, por lo que no depende de los archivos de plantilla, pero las personalizaciones de CSS, las funciones PHP personalizadas y las modificaciones de cabecera/pie de página deberían estar en el tema hijo. La mayoría de los temas populares (Astra, GeneratePress, OceanWP) tienen temas hijos oficiales disponibles para descargar desde el sitio del autor del tema.

Errores comunes y cómo evitarlos

• Cabecera Template incorrecta: Template debe coincidir exactamente con el nombre del directorio del tema padre. Incluso una diferencia entre mayúsculas y minúsculas puede causar problemas.
• Falta el encolado del estilo del padre: Sin un encolado correcto, el tema hijo no heredará el diseño del tema padre y el sitio se verá roto.
• Copiar demasiados archivos: No copies todos los archivos del tema padre al tema hijo. Copia SOLO los archivos que realmente cambies. Demasiadas copias significa que no recibirás las actualizaciones del tema padre para esos archivos.
• Olvidar la etiqueta PHP: functions.php debe empezar con una etiqueta <?php. Sin ella, WordPress no reconocerá el archivo como PHP y lo ignorará.
• Editar el tema hijo en lugar del Personalizador: Para cambios simples (colores, fuentes, diseño) usa el Personalizador de WordPress, que guarda los ajustes en la base de datos. Usa el tema hijo para cambios estructurales que el Personalizador no cubre.

Conclusión

Los temas hijos de WordPress son una herramienta esencial para cualquiera que personalice el aspecto o la funcionalidad de su sitio. Se crean en 5 minutos (dos archivos), protegen tus personalizaciones de las actualizaciones del tema padre y proporcionan una forma organizada de gestionar el código personalizado. Tanto si cambias solo unas pocas reglas de CSS como si creas sobrescrituras de plantillas complejas, usa siempre un tema hijo. En BeoHosting, nuestro soporte puede ayudarte a crear y configurar un tema hijo para tu sitio WordPress, para que puedas personalizar el diseño con seguridad sin miedo a perder los cambios.