Child-themes en WordPress: Todo lo que deberías saber sobre ellos

Child-themes en WordPress (Destacada)

En la mayoría de casos, cuando te encargan un diseño de una web, el cliente quiere algo lo más personalizado posible. Es por eso que se suele editar la hoja de estilos del tema para conseguir ese «diseño único». Pero, ¿qué pasa cuando actualizas el tema? Pues que se pierde todo. Para evitar esa pérdida, puedes crear child-themes en WordPress.

Los child-themes en WordPress (temas hijos) no son más que temas creados a partir de otro (parent theme o tema padre). El child-theme, además, necesita que esté instalado el padre para poder funcionar (de ahí que se denomine de esta forma).

Child-themes en WordPress

Crear un child-theme en WordPress es la mejor manera de personalizar cualquier web diseñada con este CMS, para empezar, porque no se perderán los nuevos estilos y funcionalidades que hayas añadido cuando actualices el parent-theme.

Ahora, puede que estés pensando: «pues si se puede perder todo, mejor no actualizo el tema y así no pasa nada, y de paso me ahorro instalar dos temas que me van a ocupar el doble de espacio». ¡Grave error! Nunca dejes de actualizar nada de lo que tengas en tu web, pues ayudará a que esta siga funcionando de forma óptima y segura.

Además, usar un child-theme en WordPress está considerado como buena práctica en el desarrollo de una web, ya que este tipo de temas se centran más en los diseños y funcionalidades añadidas, habiendo menos archivos para editar y mantener. Si un día decides revisar el código de tu web (ya sea por añadir más personalizaciones o simplemente por actualizar las que ya tienes), te será mucho más fácil de encontrar lo que estás buscando que si tienes que ir revisando cada uno de los archivos y carpetas de tu parent-theme.

¿Cómo crear un child-theme para WordPress?

Ya sabes lo que es un child-theme y los beneficios que te puede traer como diseñador web, así que te voy a explicar como crear uno, ¿vale? No pierdas detalle.

Imagina que tienes instalado en WordPress un tema que te has descargado del repositorio o has comprado en algún marketplace. Si accedes por FTP a la carpeta de dicho tema, podrás ver que contiene archivos y más carpetas. Pues bien, vuelve a la raiz de la carpeta temas (normalmente estará en wp-content/themes) y crea una nueva carpeta llamada child-nombredeltemapadre. Por ejemplo, para el tema Twenty Seventeen de WordPress, nombraremos la carpeta como child-twentyseventeen.

A continuación, entra en esta carpeta y crea dos archivos: style.css y functions.php. Estos archivos serán los que contengan los estilos y las funciones del child-theme, respectivamente.

¿Ya está? No, aún quedan un par de cosas por hacer.

Enlazar el child-theme con el parent-theme

Pero, ¿es que no sabe WordPress que el tema de la carpeta child-twentyseventeen es el hijo de Twenty Seventeen? No. Aunque WordPress para algunas cosas sea muy listo, para otras… hay que dejárselo bien clarito. Ya con la carpeta del child-theme, el archivo style.css y el archivo functions.php creados, tienes que indicarle a WordPress de qué tema padre depende.

Para ello, abre el archivo style.css y en la primera línea (justo encima de cualquier función CSS que puedas poner), escribe el siguiente código:

/*
Theme name: Nombre del child-theme que acabas de crear (en el ejemplo, Twenty Seventeen Child).
Theme URI: https://www.tuweb.com
Description: Una breve descripción del tema (por ejemplo, "Hijo de Twenty Seventeen").
Author: Tu nombre.
Author URI: https://www.tuweb.com/tu-pagina-de-autor
Template: Nombre de la carpeta del parent-theme (en el ejemplo, twentyseventeen).
Version: Versión del child-theme (empieza por la 1.0 y ve actualizando conforme añadas nuevas funcionalidades o actualices las existentes).
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

De esta forma, WordPress sabrá quien es el parent-theme de este child-theme. Lo siguiente que tendrás que hacer es importar los estilos del tema padre al tema hijo, así que abre el archivo functions.php y añade la siguiente función:


function my_theme_enqueue_styles()
{
wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css");
}
add_action("wp_enqueue_scripts", "my_theme_enqueue_styles");

Esta función lo que está haciendo es insertar, a través del hook que busca los archivos de estilos personalizados en un tema, el estilo del parent-theme.

Añadir nuevos estilos al child-theme

Ya le has dicho a WordPress quien es el parent-theme de tu child-theme. Ahora, tocar personalizarlo. Para ello, vas a seguir utilizando los archivos style.css y functions.php. En el primero de ellos, tienes que poner todos los estilos que quieras añadir o modificar en el child-theme.

Por ejemplo, imagina que quieres crear una nueva clase para poner un borde azul en todas las imágenes de la web a las que le asignes esa clase. Pues bien, dentro de tu archivo style.css tienes que escribir el siguiente código:


.img-blue-border {
border-color: #67C3E6;
}

De esta forma, cada vez que quieras ponerle el borde azul a una imagen, solo tendrás que insertar dentro de la etiqueta IMG el atributo class=»img-blue-border».

Añadir nuevas funcionalidades al child-theme

Igual que puedes añadir estilos personalizados, también puedes insertar nuevas funcionalidades en tu child-theme (como si de un plugin se tratase, pero sin la necesidad de instalarlo). Para ello, abre el archivo functions.php y da rienda suelta a tu imaginación.

Por ejemplo, imagina que quieres añadir una función al child-theme que te permita insertar imágenes SVG en tu web (algo que por defecto WordPress no trae de serie). Tan solo tienes que escribir el siguiente código:


function enableSVG($mimes = array())
{
$mimes["svg"] = "image/svg+xml";
return $mimes;
}
add_filter("upload_mimes", "enableSVG");

De esta forma, ya tendrás habilitada la subida de imágenes SVG en tu web. Te invito a que leas este otro artículo para ampliar información sobre cómo añadir funcionalidades extra a tu child-theme.

Prioridad de estilos y funcionalidades

Con esta explicación ya sabes añadir a tu child-theme nuevos estilos y funcionalidades. Pero, ¿cómo sabe WordPress si tiene que utilizar las del parent-theme o las del child-theme? Muy sencillo. Te lo explico.

En el caso de los estilos, cualquiera que añadas al archivo style.css del tema hijo sustituirá al del padre. Así, si en un parent-theme tienes un estilo que es…


p {
font-weight: 100;
}

… y añades en el child-theme el estilo…


p {
font-weight: 300;
}

… todos los párrafos de la web pasarán a tener un grosor de 300.

Para el caso de las funcionalidades, lo que ocurre es que las que añadas al archivo functions.php del child-theme van a complementar a las del parent-theme.

Personalizar plantillas

¿Y solamente se pueden añadir estilos y funcionalidades al child-theme en WordPress? ¿Algo más se podrá hacer, no? Efectivamente, también puedes personalizar las plantillas (o añadir nuevas).

Imagina que no te gusta como queda el header de la web y que quieres cambiarlo. Con un tema multipropósito esto podrías hacerlo con solo cambiar una opción, pero vamos a suponer que el tema que tú has instalado no te permite hacerlo.

Para personalizar la plantilla (del header en este caso), lo único que tienes que hacer es copiar el archivo header.php del parent-theme y copiarla en el child-theme. Si la plantilla está dentro de una carpeta, tienes que copiar la carpeta con el archivo dentro.

Ahora, tan solo tienes que editar el archivo header.php del tema hijo como si de un HTML normal se tratase (eso sí, respetando siempre las funciones de WordPress, que si no se te puede caer la web).

Y ya está. El sistema de archivos de WordPress indicará que le de prioridad a las plantillas del hijo antes que a las del padre.

Conclusiones

A lo largo de este artículo has podido ver las ventajas de utilizar un child-theme en WordPress, como vincularlo con su parent-theme, como añadir nuevos estilos y funcionalidades y, por último, a modificar las plantillas para que no se pierdan los cambios al actualizarlo. Ahora, te toca a ti ponerte manos al a obra.

Recuerda que no se te debe olvidar activar el child-theme en tu WordPress, en la sección de temas, como si fuese un tema normal. Y nunca, pero NUNCA elimines el parent-theme, pues de él depende.

Puedes ampliar más información sobre los child-themes en el Codex de WordPress y preguntarme cualquier duda que tengas a través de los comentarios o del formulario de contacto.