Temas Hijos en WordPress. Qué son y cómo crearlos

Una de las cualidades que convierten a WordPress en el gestor de contenidos líder para crear un sitio web es sin duda su modularidad. Trabajar con elementos independientes que funcionan como bloques que se van apilando hasta construir finalmente un castillo es una gran ventaja que da mucho juego y flexibilidad al usuario para configurar su blog o web.

Hoy vamos a hablar de una de esas piezas especiales, complementarias a los temas y a los plugins pero dependientes de los primeros. En este caso hablamos de los Temas Hijos o Child Themes, usados principalmente para personalizar el diseño de nuestro WordPress mediante CSS o añadir alguna función sin tener que editar el tema WordPress que tenemos instalado.

Aspecto Tema Hijo en administrador de WordPress

¿Que es un Tema Hijo en WordPress y cómo funciona?

Imagina que compras un movil nuevo, con un diseño elegante, líneas curvas, color blanco, material metálico….pero unas semanas más tarde decides que quieres cambiar algo del aspecto del mismo, por ejemplo el color y que las curvas no sean tan redondeadas. Puedes tallar y pintar el móvil (con lo que seguramente perderías la garantía pudiendo dañar incluso tu teléfono) o puedes añadirle una funda con el nuevo color deseado y los bordes algo menos redondeados.

De esta forma el teléfono sigue intacto, no has perdido la garantía, y en cuento te canses de esa funda puedes usar otra con un diseño distinto, o customizar la misma añadiendo pegatinas o pintándola.

WordPress funciona de una forma parecida. Todo lo referente a la apariencia de nuestro sitio está manejado por un plantilla: las tipografías, los colores, fondos, tamaños de imagen…Si queremos cambiar el aspecto de algo sin alterar estos estilos bases, en vez de editar directamente la plantilla y correr el riesgo de tocar donde no debemos, podemos hacer uso de los temas hijos, que ejercen de fundas o carcasas fácilmente removibles.

Es importante tener en cuenta que al igual que una funda necesita un móvil al que ajustarse, un tema hijo necesita de un tema padre. Por sí solo un tema hijo no es capaz de gestionar el diseño y apariencia de WordPress, requiere siempre que el tema padre esté instalado. Antes de proceder a crear un tema hijo, debes consultar si el tema padre viene preparado apra tener hijos, para ello lo mejor es revisar la documentación (los temas de SiloCreativo si son compatibles con temas hijos) o hacer uso del soporte del tema.

Ventajas de utilizar Temas Hijos en WordPress

La principal ventaja de trabajar con temas hijos en WordPress es la flexibilidad. Ya no necesitamos editar directamente el código CSS que queremos cambiar en el tema padre. Ahora tenemos unos archivos propios para probar y testear. Cuando haya un archivo que queramos editar, simplemente lo copiamos del tema padre y lo pegamos en el mismo directorio del tema hijo. Cuando WordPress muestre la web, primero se pasará por los archivos de nuestro tema hijo. Solo en el caso de que no encuentra dicho archivo, cargará el archivo del tema padre.

Importante también la seguridad. Las vulnerabilidades están en el orden del día si trabajas en cualquier proyecto web, y tener las espaldas cubiertas es muy importante. Una de las normas para que WordPress esté seguro de hackers es tener los plugins y temas actualizados. Usando temas hijos puedes actualizar tu tema padre sin preocuparte de perder las modificaciones realizadas, y así tener al día tu código limpio de vulnerabilidades.

Por último, la escalabilidad. Con un tema hijo podemos ampliar las funciones que trae de base un tema padre. Podemos registrar nuevas áreas de menú, nuevas áreas de widgets o incluir nuevos templates para las páginas. Esto permite que tu blog o web crezca según las necesidades que vaya requiriendo.

Desventajas de usar Temas Hijos en WordPress

Pero usar temas hijos también tiene sus desventajas. En primer lugar hay que tener en cuenta que el sistema hijo padre, pese a convivir en aparente armonía, encierra una lucha frenética entre ambos. El tema hijo siempre lucha por sobreponerse al padre y esto hace que muchos estilos CSS necesiten ser sobreescritos por completo en el tema hijo para que se apliquen los cambios. Lo mismo sucede con las funciones, buscamos que dice el padre y sobreescribimos. Estamos siempre tratando de silenciar que dice el tema padre para conseguir libertad de diseño en el tema hijo.

Por otro lado, la carga de archivos es mayor que si trabajamos con un solo tema. La dualidad tema padre – tema hijo carga más archivos (como mínimo un CSS más) que si solo estuviera activo el tema padre, por lo que la carga de la web empieza a ser mayor desde que decidimos usar un tema hijo.

Y por último, es necesario conocer la estructura de templates y organización de WordPress para crear y editar un tema hijo. No es algo con lo que todos los usuarios se sientan cómodos, por lo que casi siempre la creación de un tema hijo suele quedar relegado a desarrolladores por su relativa complejidad o conocimiento previo.

Cómo crear un tema hijo para WordPress

Activar tema hijo en WordPress

Para crear un tema hijo son necesarios dos archivos básicos, por un lado el style.css donde se recuperará en primer lugar toda la información del tema hijo y la relativa al tema padre que hace referencia. Después de esta cabecera ya podemos agregar nuestro CSS para modificar la apariencia de nuestro site.

Para la cabecera de nuestro archivo style.css hay algunos campos que son fundamentales:

/*
 Theme Name:  tema-hijo
 Theme URI: silocreativo.com
 Description: Tema hijo para nuestro tema padre
 Author: SiloCreativo
 Template: tema-padre
 Version: 1.0.0
 Tags: light,
 Text Domain:  tema-hijo
*/

Lo importante aquí son el Theme Name, donde daremos el nombre a nuestro tema hijo, el Template, donde tendremos que introducir nuestro tema padre y el Text Domain, para poder traducir las cadenas que incluyamos en nuestro tema hijo, en caso de que queremos hacer el tema translation-ready (preparado para traducirse) si lo vamos a usar en otros idiomas o en un sitio multilenguaje.

El segundo archivo básico que todo tema hijo debe tener es el functions.php. En este archivo le indicaremos a WordPress que cargue el CSS del tema padre, para poder arrancar desde una base. Para ello, debemos incluir la siguiente función:

<?php
function child_theme_enqueue_styles() {
$parent_style = 'parent-style'; // Esta es la hoja de estilos del tema padre.

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') );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
?>

Lo que hacemos es cargar la hoja de estilos del tema padre primero, y después cargar la hoja de estilos del tema hijo con dependencia del padre. Así nos aseguraremos que el orden es siempre el correcto y que el CSS del tema hijo sea el que prevalezca por encima del CSS del padre.

Instalar un Tema Hijo en WordPress

Para instalar un Child Theme en WordPress necesitaremos tener instalado primero el tema padre, por lo que debes asegúrate de que se encuentra en la lista de Apariencia > Temas. No es necesario que sea el tema activo, simplemente que se encuentre instalado y no haya ningún error en dicha sección.

instalar.tema-wordpress

Una vez realizada esta comprobación, simplemente procedemos a instalar nuestro tema hijo como un tema normal, vía Apariencia > Temas > Añadir nuevo tema. En este tutorial puedes seguir el proceso paso a paso.

Una vez tengas tu tema hijo instalado, solo queda activar dicho tema y empezar a realizar las modificaciones que necesites.

En definitiva una gran herramienta si queremos buscar una forma sencilla y segura de personalizar nuestro diseño web bajo WordPress.

Comentarios (20)

  1. Gracias por este buen artículo,
    Me surge una duda:
    Para mantener el mismo orden y estructura del style.css del theme master, y para que el style.css del theme hijo no se convierta en un caos, hago lo siguiente:
    – Copiar todas las reglas css del style.css master theme
    – Pegar todo en el child theme
    – Comentarlo todo
    – Buscar las reglas css que quiero cambiar (firefox developer+brackets)
    – Descomentar esa línea en el child theme
    – Realizar los cambios deseados
    – Utilizo el plugin Better WordPress Minify para que no se cargue todo el css comentado del child theme + el style.css del master theme y así acelerar cargas

    ¿Te parece buena práctica?
    ¿Cómo lo haces tu?

    1. Saludos Juan,

      es un buen método el que utilizas. Sin embargo copiar todo el CSS del tema padre, aunque esté comentado, hace que el archivo style.css del tema hijo pese mucho.
      Personalmente me gusta añadir solo los cambios necesarios. Para ello inspecciono el CSS con el navegador y copio únicamente las reglas que van a cambiar, así hacemos que la web sea un pelín más rápida (milisegundos, pero todo cuenta).

      gracias por compartir tu método!
      Saludos

  2. Hola
    Creé el tema hijo y lo estoy editando en un servidor local en el que no tengo etradas ni nungún tipo de contenido, solo la plantilla, ¿Cómo hago para que después el tema hijo pueda ser usado en cualquier otra página? Es decir, que lo pueda pasar a una web real y me mantenga las modificaciones. Intenté hacerlo subiendo el .zip del tema hijo y no me aparecen todos los cambios, además se esconde la opción de agregar css adicional en el editor.

    1. Saludos Lenis,

      un tema hijo solo gestiona cambios en el diseño y aporta o elimina nuevas funcionalidades, además de poder variar la estructura de las entradas y páginas.
      El contenido se guarda en la base de datos de WordPress. Lo mismo sucede con los menus y widgets.

      Si quieres mudar todo el site, entonces hay que optar por otro plugin, tipo Duplicator o similar.

      Suerte!

  3. Hola Ricardo
    Soy nuevo en esto de wordpress. La pregunta….
    Si no hago modificaciones en el tema, ¿no tiene sentido hacer un tema hijo?, ¿es así?
    Gracias y saludos

  4. Hola Ricardo, como estás?. Tengo una duda, mira hace poco que estoy en esto de WordPress, pero siempre me gusto el tema y me gusta estar todo el tiempo editando cosas ajaja. Hace eso de una semana que estoy creando mi pagina, y le e editado unas cuantas cosas, y entre ellas e tocado algunos de los archivos php del tema padre, por un tema de que en la style sheet no la puedo cambiar. Por ejemplo hace un rato edite single.php para desactivar la casilla de comentarios por defecto de WordPress e insertar la de facebook comments, la que si intentaba instalarla mediante el plugin quedaba desordenada por un tema de escritura. En fin mi pregunta es si se puede crear un especie de child theme para los archivos php, porque evidentemente si hay una actualización de mi tema voy a perder esas ediciones. Gracias

    1. Saludos Lucio,

      exacto, lo ideal es que realices esas modificaciones en un child-theme. Los temas hijos se pueden usar tanto para modificar CSS como archivos PHP o JS. Simplemente duplica el archivo single.php de tu tema padre en tu tema hijo, y ya siempre usará el del tema hijo en vez de la versión de padre. Así el tema padre se podrá ir actualizando libremente y sin miedo a perder nada con las actualizaciones.

      Suerte!

  5. Hola Ricardo, que bueno el artículo, ojalá lo hubiera leído antes ya que he modificado un montón de archivos sin crear un tema hijo… Ya es demasiado tarde verdad? Aunque estoy trabajando en local y al subir el wp a un servidor se me desbarata todo, no me coge la mayoría de las rutas ni me guarda los contenidos que meto a través del apartado de apariencia que trae la plantilla. Así que me tocara hacer de nuevo un montón de cosas y estaba pensando empezarla de cero desde remoto y así poder crear un tema hijo. Como lo ves? Muchas gracias!

    1. Saludos Carlos,

      si, es lo mejor. Además si pides soporte al autor del tema (por si algo no funcionase bien) no podrá darte las indicaciones exactas, ya que el tema original habría cambiado. La mayoría de autores no suelen dar soporte si los archivos originales han sido modificados, por lo tanto, si, tema hijo al rescate!

      Suerte y gracias por comentar 🙂

      1. Hola Ricardo:
        Para el caso de Carlos, ¿no podría utilizar el archivo modificado como tema hijo y cargar el padre nuevamente del original?

        1. Si exacto!

          Podría hacerlo con todos los archivos php excepto con los de funciones (functions.php y similares) y los CSS y JS, que habrá que cargarlos desde el nuevo functions.php del tema hija.

          Buen apunte, gracias! 😀

  6. Hay algo que no entiendo, si tengo que hacer una actualizacion que me pide el tema, lo hago sobre el tema padre o el tema hijo, asi no pierdo todo. GEnial el articulo

  7. Hola Ricardo, tengo una web realizada por un informático, en la cual todas las modificaciones las he realizado sobre el tema padre puesto que yo no entiendo de programación y no tenía ni idea de lo importante de un tema hijo. Ahora tengo que actualizar el tema y quiero crear su tema hijo pero no sé exactamente qué carpetas tengo que crear puesto no se lo que el informatico modifico en su día y lo que he estado modificando. Me podrías ayudar a saber qué carpetas tendría que modificar? Y también quería saber si al actualizar el tema tengo que tener activado el tema padre o el tema hijo? Muchas gracias.

    1. Saludos Fuen,

      puedes crear una copia de todos los archivos y moverlos al tema hijo. El único problema serán las hojas de estilo y el functions.php, que con duplicarlo no vale, deberás comparar con el tema padre que cosas ha modificado y cuales no. Una ver realizado esto, deberías poder actualizar el padre sin problemas con el tema hijo activado. Pero asegúrate antes que no pierdes nada. Para ello puedes probar la actualización en local o en un site de prueba si tu hosting lo permite.

      Suerte!

  8. Hola Ricardo,
    soy nueva en esto y me pregunto: qué diferencia hay entre crear un tema hijo para ponerle mi css o instalar un plugin de css personalizado?
    Gracias

    1. Saludos Eugenia,

      si solo vas a tocar CSS, no hay diferencias. De hecho es más rápido instalar un plugin como bien dices o usar el CSS Adicional nativo de WordPress como hablamos aquí. Si quieres modificar algún elemento extra, como el HTML o añadir funciones propias, entonces si es necesario usar un tema hijo.

      Gracias por comentar!

  9. Saludos, interesante tema, tengo una dudad respecto si quiero hacer una landing page, y quiero hacer un seguimiento propio en google anlytics para esta página en particular, tengo que hacer un tema hijo?, o como agrego el código de seguimiento exclusivamente a esa página? ya que el tema que utilizo que es AVADA, me permite agregar el tracking code al sitio web principal, pero en este caso quiero rastrear la thankyoupage, gracias

    1. Saludos Mauricio.

      Exacto, tendrás que crear un tema hijo con un header.php diferente para esta nueva página (header-thankyou.php por ejemplo), donde no se cargue en código general pero si el específico para dicha página.
      Después en la página que vayas a usar, tendrás que cargar dicho header: get_header( 'thankyou' );

      Suerte.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *