WordPress: Ventajas de crear child themes

En el post que traigo hoy pretendo dar una visión de las ventajas que tiene crear un child theme en WordPress y porqué deberíamos emplear esta metodología de trabajo en nuestros sites creados con este fabuloso CMS si deseamos realizar modificaciones.

En la mayoría de ocasiones precisamos cambiar la apariencia o funcionalidad de nuestro sitio web creado en WordPress y esto lo podemos hacer mediante los llamados child themes o temas hijos que nos permiten realizar estas modificaciones sin tocar nada del core del tema padre.

Así que pasamos a ver los aspectos más interesantes de este asunto, ¿te vienes?.

Pero, ¿y qué es un child theme?

Un child theme es un tema que crearemos y que nos permitirá heredar las propiedades y funcionalidad de un tema padre.

Pongamos el ejemplo que hemos instalado nuestro tema y deseamos, por ejemplo, cambiar aspectos de la apariencia que tiene tras la instalación.

Hasta aquí todo bien, modificamos el style.css del tema padre y añadimos nuestras reglas CSS en el fichero. Ha pasado un tiempo y recibimos una notificación en el backend de WordPress para actualizar nuestro tema.

Le damos a actualizar, actualiza todo correctamente y pasamos a previsualizar nuestro site. Y….sorpresa! Todos los cambios que realizamos en el style.css de nuestro tema se han marchado ya que se han sobreescrito los ficheros machacando el anterior.

¿Volver a añadir todas las regas CSS que añadimos? Sí, pero ahora lo haremos correctamente creando un tema hijo.

Oye, ¿y cómo hacemos un tema hijo en WordPress?

Muy sencillo. Vamos a ello:

1- En primer lugar debemos crear una carpeta en la carpeta themes y para facilitar la nomenclatura las nombraremos de la siguiente forma:

nombredeltemapadre-child

En la siguiente imagen podemos observar la estructura de directorios que debemos llevar en nuestro child theme.

En esta carpeta es dónde guardaremos todos los ficheros que servirán para hacer funcionar a nuestro tema hijo.

En realidad para que un tema hijo funcione únicamente es necesario crear un fichero en esa carpeta que se corresponde con un fichero css al que deberemos llamar style.css .

Además le añadiremos unas lineas de contenido que veremos a continuación para que permita a WordPress reconocer que se trata de un tema hijo y que debe heredar la funcionalidad del tema padre.

/*
 Theme Name:   Schema Child
 Description:  Schema Child Theme
 Author:       Santi Navarro
 Author URI:   http://www.santinavarro.es
 Template:     schema
 Version:      1.0.0
*/

2- En segundo lugar debemos añadir la directiva @import con el fin de que importe el fichero css que hace referencia al tema padre. Como vemos a continuación:

@import url("../schema/style.css");

Finalmente nuestro fichero style.css quedaría así:

/*
 Theme Name:   Schema Child
 Description:  Schema Child Theme
 Author:       Santi Navarro
 Author URI:   http://www.santinavarro.es
 Template:     schema
 Version:      1.0.0
*/
 
/*Este el fichero CSS que debemos importar del tema padre*/
@import url("../schema/style.css");
 
/*A partir de aquí añade tus reglas CSS personalizados*/

A partir de las líneas comentadas empezaríamos a añadir nuestras reglas CSS y de este modo si volvieramos a actualizar el core de nuestro tema padre no se modificará el fichero css de nuestro tema hijo.

Con lo que todo el trabajo realizado estaría a salvo, no está demás hacer copias de seguridad de nuestro WordPress de vez en cuando, como vimos en un artículo anterior.

Y si quiero añadir mis propias funciones

Otra de las ventajas de hacer un tema hijo es que podemos crear un fichero functions.php donde podemos guardar funciones que tengamos personalizadas para ampliar la funcionalidad de nuestro theme.

Este fichero se guarda al mismo nivel que el style.css de nuestro tema hijo.

Y así si volvemos a actualizar el tema no se machacará el functions del tema padre.

Ojo, en este apartado es importante comentar que si añades una función ten cuidado de no repetir el nombre de una función existente en el tema padre porque sino saldrá el típico error de:

“Cannot redeclare function la que sea.”

Ojo, no tengas la tentación de copiar todo el fichero functions.php del tema padre al hijo porque tendrás el mismo problema.

Y si tengo que cambiar la cabecera de la web

Si deseas modificar cualquier aspecto de la cabecera de la web es tan sencillo como copiar y pegar el header.php del tema padre al hijo.

Posteriormente sobre el header.php del tema hijo realizar todos los cambios que precises para que tu cabecera se acomode a lo que tú deseas.

Y así con todos los ficheros de plantillas e includes que pueda tener tu tema padre, siempre respetando la estructura de directorios.

Como recomendación es que cuanto menos tengas que modificar ficheros del tema padre para meterlos en el hijo mejor que mejor. Si no es así quizás te salga algún error difícil de detectar.

Resumiendo las ventajas de los temas hijos

En primer lugar si actualizamos nuestro tema padre no deberemos temer a que nuestro sitio web sufra cambios ya que hemos sido precavidos y hemos creado un tema hijo. De este modo tendremos actualizado y seguro nuestro tema padre.

Dado que estamos heredando funcionalidad y apariencia la personalización de nuestro tema la realizaremos de una forma ágil y sencilla.

Todo es bonito, ¿hay alguna pega?

La verdad, el único inconveniente que le veo es que al emplear código del tema padre el rendimiento de la web pueda verse mermado ya que carga ficheros del tema padre. Además por el empleo de la directiva import para traer el CSS del tema padre.

Aunque esta variación no creo que sea excesiva y no se note tanto. De todas formas siempre hay recursos para comprobar de una forma y de otra si la variación es mucha. Si lo compruebas agregalo a los comentarios del post!

Lo que si que veo interesante es que cuando vayas a adquirir un tema tengas bien claro lo que quieres y si el tema cumplirá tus espectativas, de este modo seguramente tendrás que realizar menos modificaciones agregadas a tu tema hijo.

Conclusión

Ahora ya no hay excusas para la creación de un tema hijo y así no liarla en nuestras actualizaciones de los themes de WordPress.

Espero que el post sea de utilidad y que lo compartais mucho mucho!

Gracias por vuestro tiempo y un saludo.