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.

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

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

  1. Juan

    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. Lenis

    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. Guillo

    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

Deja un comentario

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