Cómo crear un child theme en WordPress

Un child theme en WordPress es un tema hijo, según la traducción literal del lenguaje de Shakespeare…. bueno a lo que vamos. Básicamente es la forma en la que WordPress nos permite realizar cambios a un tema principal, evitando que estos se pierdan al realizar una actualización de nuestro tema padre con posterioridad.

Para qué sirve un child theme en WordPress

Si te encuentras desarrollando una página web con WordPress, por muy bueno que sea el tema que hayas elegido, es posible que necesites modificar el código del tema para realizar alguna modificación. Así a bote pronto se me ocurren un par de casos de lo más común:

• Cambios en el CSS del tema: Cambiar el color a las etiquetas H1), ponerles cursivas a las etiquetas H2…. o cualquier cosa relacionada con el aspecto final de tu página.
• Añadir algún código que te permita realizar alguna funcionalidad nueva que tu tema no tenia

Ahora, si tú modificas el código dentro de los archivos de tu tema, te encontrarás con que no puedes volver a actualizarlo, porque al hacerlo perderás todos los cambios realizados hasta ese momento.

¡Problemón! y gordo. Pero para todo hay una salida y gracias a los child themes estará todo resuelto… o casi, no todo iba a ser perfecto, también tiene alguna desventaja…. pero no te preocupes ahora por eso.

Como funciona un child theme en WordPress

Es muy fácil. Cuando introduces la URL de tu página en el navegador, se cargan los ficheros de tu tema principal y después se cargan los ficheros de tu tema hijo o child theme, con todas las modificaciones que tu hayas hecho. Tu tema hijo obviamente no falla porque hereda el código del tema principal y solo se muestran, por decirlo de alguna manera, las diferencias.

Por tanto, tu sitio web sigue siendo seguro ya que puedes actualizar el tema principal cuando quieras sin que se vea afectado tu tema hijo debido al orden en el que el sistema carga los ficheros.

Comenzamos a crear nuestro child theme en WordPress

Bueno eso es bastante fácil. Nuestro ejemplo lo vamos a realizar con el tema Twenty Seventeen que es uno de los que trae por defecto WordPress.

Ahora vamos a comprobar que tienes instalado y activo el tema Twenty Seventeen. Abre la opción Apariencia-Temas en tu menú principal de WordPress y verás algo parecido a esto.

Genial. Llegados a este punto empezamos con la creación del child theme en WordPress.

Usa el FTP para crear y copiar ficheros

Como nos va a hacer falta trabajar con ficheros, necesitamos un cliente FTP. Este es un programa que nos permite transferir, mover, copiar archivos entre nuestra instalación de WordPress local y nuestro alojamiento en Internet. Hay muchos clientes FTP pero si quieres puedes usar Filezilla es rápido y gratis.

Conéctate a tu dominio y busca la carpeta wp-content/themes. Ahora crea una carpeta para tu tema hijo. Como mi inventiva está a tope le llamaré twentyseventeen-child. Así no podré equivocarme nunca.

Buah… ¡que pasada! De esta forma se mostrarán todos los temas que tienes instalados y verás algo parecido a la siguiente imagen.

Como observarás el tema que tenía instalado es twentyseventeen y el tema hijo será twentyseventeen-child.

Ahora vete a la carpeta del tema padre (twentyseventeen) y copia los siguientes ficheros a la carpeta twentyseventeen-child:

• index.php
• screenshot.png

Realiza las modificaciones

Ya casi está. En la misma carpeta del tema hijo, crea un fichero que se llame style.css y otro que se llame functions.php.

Vamos a introducir dentro del fichero style.css este código y luego lo guardamos:

/*
Theme Name: Twenty Seventeen Child o Tema Hijo
Description: Twenty Seventeen Hijo
Author: Juan Pereira
Author URI: http://www.tunombre.com
Template: twentyseventeen
*/
@import url("../twentyseventeen/style.css");

Tranquilo, tranquilo… que ahora te explico que es todo esto.

• Theme Name: El nombre que asignes al Tema Hijo es el que luego va a aparecer en tu pantalla de Temas para identificarlo.
• Description: Una breve descripción del tema creado.
• Author: El autor del tema hijo.
• Autor URI: La URL del autor.
• Template: Nombre de la carpeta donde se encuentra el tema padre.
• @import: esta es una regla que permite importar los estilos del tema padre. Lo que va entre paréntesis es la ruta relativa al fichero de estilos del tema padre.

En cuanto al fichero functions.php que has creado en la carpeta del tema hijo es donde podrás añadir funcionalidades adicionales.

Ese fichero tiene que existir, aunque esté vacío, porque si no al menos en la versión 4.7 de WordPress te fallará el tema hijo.

No sé si te abras dado cuenta de que antes has copiado un fichero que se llama screenshot.png. Modifica el contenido de ese fichero sin cambiarle el nombre y será el que se vea en la pantalla de Apariencia-Temas. Ponlo bonito, que se note que eres un diseñador nato.

A disfrutar del trabajo bien hecho

Pues ya está hecha la cosa. Si quieres añadir estilos para variar el aspecto de tu tema simplemente tendrás que añadirlos siempre por debajo de la regla @import en el fichero style.css.

Por ejemplo, podrías añadir algo así:

body.has-header-image .site-description, body.has-header-video .site-description {
color: yellow;
opacity: 0.8;
text-align: right;

En mi plantilla he cambiado el color del texto de la portada a amarillo y además lo he alineado a la derecha.

Ventajas de un child theme en WordPress

Para mi hay dos grandes ventajas de utilizar child themes:

• Las actualizaciones del tema padre no afectan a las modificaciones que hayas hecho en tu tema hijo por lo que puedes actualizar tu tema principal sin problemas. Esto hace que no tengas que preocuparte de los fallos o vulnerabilidades que los desarrolladores de tu tema padre vayan encontrando.
• Rapidez en el desarrollo de los temas, ya que no tenemos que escribir el tema desde cero.

Desventajas de un child theme en WordPress

• Tu web puede volverse un poco más lenta, ya que el tema hijo hace una llamada al tema padre que es de donde obtiene la mayoría del código.
• Si te metes en aspectos que no tienen que ver con el código CSS, sino que modificas funciones, es posible que no sepas muy bien donde colocar alguna llamada: en el child theme o en otro lugar del tema principal.

Que te parece el artículo. Sientete libre de aportar tus sugerencias o lo que quieras