Cómo utilizar un tema hijo en WordPress [Guía completa]

Una de las herramientas más utilizadas en el desarrollo de webs con WordPress es la creación de un tema hijo en WordPress. Para hablarnos de cómo crearlo y configurarlo, he invitado a mi blog a mi compañero y amigo José Manuel Sanz.

En el post, nos habla sobre la importancia y necesidad de usar este sistema y de cómo debemos trabajar con él tanto de forma manual o mediante plugin. También veremos como se puede utilizar este sistema cuando ya tenemos el tema de nuestra web configurado (menús, widgets, código personalizado, etc.).

Así que vamos con ello… Espero que os parezca interesante y nos leemos en los comentarios.

Cómo utilizar un tema hijo en WordPress

Las plantillas y temas que podemos instalar en nuestro proyecto de WordPress, cubren casi todas las funcionalidades que les demandamos, pero en ocasiones, cuando queremos personalizarlo con elementos que el tema no incluye, nos vemos obligados a tocar el código.

Básicamente un tema hijo en WordPress, es una extensión del tema principal o padre, que hereda todas las funcionalidades, pero permite mantener cualquier tipo de modificación que hagamos en dicho tema hijo, aunque el tema padre haya sido actualizado.

Hay que tener en cuenta que una actualización de un tema en WordPress no supone una actualización de los archivos que componen el tema, sino su sobrescritura, con lo cual, cualquier cambio que se haya realizado para modificar, por ejemplo, la colocación de unos div concretos en una frontend, se perderían.

Aunque el uso de temas hijos, sea recomendable en todos las situaciones, hay algunos casos concretos en los que es más que recomendable, obligatorio.

En qué momento es obligatorio utilizar el tema hijo de WordPress

• Para evitar perder las modificaciones hechas con las actualizaciones del tema. Como hemos comentado anteriormente, en el momento que el tema actualice, si nosotros hemos hecho cambios sobre la estructura de la página principal o de otro elemento, si no tenemos un tema hijo, se sobreescribirá el contenido y perderemos cualquier tipo de cambio que hayamos hecho.

• Como sanbox, para hacer pruebas con el código del tema. Supongamos que no estamos seguros si un tema concreto responderá a las modificaciones que queremos hacer. Entonces, una buena forma de probarlo puede ser usar un tema hijo, que podremos activar o eliminar en su momento, en caso de que responda bien o no a los cambios que hagamos.

• Como copia de seguridad de un tema concreto. Es posible considerar este tema hijo como un backup del principal, para asegurarnos durante el desarrollo que no perderemos ningún elemento fundamenta del mismo. Hay opciones para realizar backups más efectivas, pero durante el proceso de desarrollo, si necesitamos una copia rápida, podemos hacerlo.

Creando un tema hijo en WordPress de forma manual

La forma de crear un tema hijo, es muy sencilla. Tanto que se puede hacer si usar ningún tipo de plugin, pero vamos a ver ambas situaciones para que el desarrollador pueda elegir la que más le interesa, sobre todo si se intenta mantener un sitio web lo más libre de plugins posible.

Este método no tiene excesiva complejidad y puede estar al alcance de cualquier desarrollador sin más herramientas que el acceso al servidor FTP y un editor de código. Vamos a verlo paso a paso.

Crea un tema hijo en WordPress paso a paso

1) Accedemos a la carpeta themes de nuestra instalación WordPress y creamos una carpeta con el mismo nombre que el tema que queremos clonar y le añadimos el sufijo “-child”.

Segundo paso para crear el tema hijo de forma manual: creando fichero de estilos

2) Dentro de la carpeta que hemos creado, tenemos crear un fichero de estilos con el nombre style.css vacío, al que añadiremos el siguiente contenido

/*
Theme Name: TwentyTwentyOne-child
Theme URI: http://localhost/demo
Description: Tema hijo de TwentyTwentyOne
Author: José Manuel Sanz
Author URI: https://www.josemanuelsanz.es
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: TwentyTwentyOne-child
*/

Esto es el contenido mínimo que debería figurar en nuestra hoja de estilo, de momento sin más datos:
• Theme Name: Nombre del tema
• Theme URI: URL de la web donde se va a cargar el tema
• Description: Descripción del tema
• Author: Autor del tema hijo
• Author URI: URL del creador del tema hijo
• Template: nombre del tema padre
• Version: 1.0.0 (o el número de versión correspondiente)
• License: GNU General Public License v2 or later (tipo de licencia)
• License URI: http://www.gnu.org/licenses/gpl-2.0.html (información sobre el tipo de licencia
• Tags: Etiquetas para la busqueda del tema (si se va a publicar)
• Text Domain: slug del nombre del tema, para hacerlo traducible, si es necesario.

Guardando este fichero, ya aparecería nuestro tema hijo en el selector de temas de WordPress.

Último paso para crear el tema hijo de forma manual

3) Ahora que tenemos el tema disponible en el selector de temas, es necesario un paso más para poder activarlo. En un editor de código creamos un fichero vacío llamado functions.php que solo debe contener las etiquetas php, como el de la imagen inferior.

El siguiente paso es importante, pues para importar los estilos del tema padre, los temas hijos no se puede usar @import en la hoja de estilos, sino que hay que importarlos con una función creada a propósito. Puedes obtener más información en la documentación de WordPress haciendo click aquí.

El contenido concreto de esta función es muy simple, concretamente este:

function carga_estilos() {
wp_enqueue_style( ‘child-theme-css’, ‘[URL HOJA ESTILOS TEMA PADRE]’ );
}
add_action( ‘wp_enqueue_scripts’, ‘carga_estilos’ );

Donde simplemente substituiremos [URL HOJA ESTILOS TEMA PADRE], por la dirección de la hoja de estilos del tema padre, quedando el fichero de esta manera:

Configurando la miniatura del tema hijo

Una vez guardado el fichero, tendremos el tema hijo disponible para ser activado desde el selector de temas. Si además queremos que muestre una miniatura del tema para que sea más atractiva la presentación, será necesario hacer una captura de pantalla con la imagen que queramos mostrar en tamaño 1200×900 y guardarla en el directorio del tema hija con el nombre screenshot.png. Una vez hecho esto, podremos usar el tema y realizar con él las modificaciones de código que necesitemos, sin temer por las actualizaciones del tema principal.

Crear un child theme usando plugins

Si no queremos complicarnos con el código o no tenemos acceso al directorio FTP del servidor web, otra opción para crear temas hijos es mediante plugins.

Vamos a utilizar el plugin Child Theme Configurator, que es muy simple de usar y en pocos clics nos permite tener operativo el tema hijo. No voy a hablar de la descarga ni la instalación y activación del plugin pues es trivial.

Una vez descargado y activado, el plugin estará accesible desde el menú Herramientas→Child Theme. Podemos ver que hay muchas opciones para la configuración y la creación de un tema hijo, pero vamos a centrarnos en las más sencillas y las que nos permiten tener el tema disponible en pocos minutos.

Lo primero que haremos será indicar que queremos crear un tema hijo nuevo. Una vez seleccionada esta opción, en el apartado 2 buscaremos en el desplegable el tema padre que nos interesa clonar y lo analizaremos para verificar que se puede crear un tema hijo.

Una vez verificado que podemos crear un tema hijo basado en este tema, en el apartado 7, podremos editar las propiedades del tema hijo, indicando al autor, el nombre, la descripción, etc., de la misma manera que lo hacíamos en el fichero style.css anterior, pero de forma más visual.

El final del proceso será simplemente pulsar sobre el botón de creación que aparece en el apartado 9, que nos dejará el tema en el selector de temas disponible para su activación.

Es importante tener en cuenta que en el caso que vayamos a crear un tema hijo de un tema que esté ya modificado completamente (menús, widgets, código personalizado, etc.) tendremos que seleccionar el checkbox del apartado 8, para asegurarnos que todas las configuraciones se vayan a copiar.

Ya tengo el tema hijo creado, ¿y ahora qué?

Una vez nuestro tema hijo está creado y activado, la configuración y cambios en la estructura y diseño no es más complicada que en un tema tradicional de WordPress. Afortunadamente, la plataforma nos brinda herramientas para poder hacer estas modificaciones de forma relativamente sencillas. Vamos a ver algunos ejemplos de esto.

Uno de los primeros cambios que podemos hacer es modificar el color de fondo del tema hijo, bien para distinguirlo del tema padre o porque sea el objetivo, crear un tema completamente diferente. Para ello será necesario acceder a Apariencia→ Personalizar y una vez dentro, al apartado CSS adicional del tema.

Aquí podremos introducir los parámetros que nos sean necesarios para poder efectuar este cambio de color de fondo. Algo similar a los siguiente:

body.custom-background {
background-color: #cecece;
}

De esta forma, y una vez guardada la configuración, podremos tener nuestro tema con un color o contenido de fondo diferenciado del tema padre. En el mismo sentido podremos modificar las fuentes o el color de los diferentes elementos de la página, cambiando los parámetros adecuados.

Para ello podemos, usando Chrome, inspeccionar los diferentes elementos que componen el sitio web usando F12, buscar el elemento a modificar y copiar el código css en el apartado de CSS personalizado, para después, hacer los cambios convenientes.

Otra característica importante de los temas hijo, es la posibilidad de tener un fichero de funciones diferenciado del tema principal. De esta manera, podremos tener una configuración exclusiva para nuestro tema hijo, sin miedo a perderla tras las actualizaciones.

Si por ejemplo deseamos añadir un enlace al favicon para el tema hijo, simplemente deberemos incluir en el fichero functions.php que hemos creado para este tema una función que nos permita gestionar este enlace. Sería algo similar a esto:

// Función personalizada
function enlace_favicon() {
    echo “<link rel=»shortcut icon» type=»image/x-icon» href=»/favicon.ico» />’ «;
}
add_action( ‘wp_head’, ‘enlace_favicon’ );

Con esta función añadida, el fichero functions.php tendría un aspecto similar a este:

Simplemente añadiendo las funciones necesarias podemos modificar sustancialmente el funcionamiento de nuestro tema.

Como hemos visto, la forma de crear un tema hijo en WordPress, no es compleja y además disponemos de diversos métodos. El uso de uno o de otro, dependerá del tipo de exportación que queramos hacer: clonar un tema desde 0 o un tema que ya haya sido trabajado previamente. En el primer caso, sería fácil usar el método manual y en el segundo es más recomendable usar un plugin al uso.