Cómo crear un Child Theme para WordPress

Probablemente alguna vez has conseguido (de la manera que sea) una plantilla para WordPress que incluía un tema secundario y no sabías qué era. Generalmente suele tener un nombre similar con la terminación «-child» añadida, ¿te suena? Es frecuente no prestarle mucha atención. No te preocupes, a partir de hoy sabrás qué es, para qué se utiliza y por qué es recomendable el uso de Child Themes para Wordpress.

Empecemos, ¿qué es un Child Theme?

En pocas palabras, es una extensión de la plantilla padre (Parent Theme) que utilizaremos para hacer modificaciones sin que esto afecte en un futuro a posibles actualizaciones de la plantilla original. Te pongo un ejemplo:

Supón que instalas una plantilla en tu WordPress y quieres adaptarla a una imagen algo distinta, además de hacer algunos cambios en el código. Lo normal es indagar entre tantos archivos y hacer los cambios pertinentes para conseguir los resultados que queremos: cambios en el estilo, modificación de alguna función, etc. Pero, ¿qué pasa si el día de mañana esta plantilla recibe una actualización? Lo que pasará, si actualizas, es que perderás todos los cambios que en su día hiciste, ya que los archivos del template se machacarán y tu trabajo habrá sido en vano.

Supongo que ya te harás una idea de para qué sirven los Temas Hijo. No es más que una plantilla donde realizarás los cambios que desees sobre el tema padre. Este child theme hereda tanto el diseño como la funcionalidad de su parent theme, por lo que podremos reemplazar el código simplemente escribiendo uno nuevo en esta plantilla, o añadiendo modificaciones al ya existente. Crear un tema hijo es muy sencillo.

¿Cómo creo un Child Theme?

Técnicamente sólo necesitas llevar a cabo dos pasos para crear un tema hijo:

1. Crear una carpeta en el directorio wp-content/themes dándole el nombre que quieras a tu tema hijo (por ejemplo: macarron-child, si el tema padre se llamara «Macarron»)
2. Incluir un fichero style.css en el directorio creado. Es el único archivo requerido y debe incluir el siguiente código:

/*
Theme Name: Macarrón Child
Theme URI: https://ejemplo.com/macarron-child/
Description: Child Theme para la plantilla Macarrón
Author: Carlos Alfaro
Author URI: https://www.calfaro.es
Template: macarron
Version: 1.0.0
Tags: etiqueta1, etiqueta2, etiqueta3...
*/
@import url("../macarron/style.css"); // Importamos la hoja de estilo del tema padre

¿Y qué significa todo este código? Bueno, realmente sólo tiene importancia el nombre que le asignes a Template, ya que deberá ser el nombre de la carpeta que contenga tu parent theme, el resto rellénalo ajustándote a tu caso.

La última línea se utiliza para importar la hoja de estilo del parent theme, sin embargo existe una manera más correcta de hacerlo a través de wp_enqueue_style, aunque necesitarás otro archivo llamado functions.php con el siguiente código. ¡Es vital que te vayas familiarizando con el archivo functions.php!

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Ahora tienes un child theme con dos archivos fundamentales: functions.php y style.css. Ya podemos modificar el tema sin miedo a perderlo en un futuro, pero antes debemos activarlo. Como si de otra plantilla se tratara, entrando en el menú Apariencia – Temas, encontraremos nuestro nuevo Child Theme listo para activar.

Cambiando el estilo de una clase mediante el Child Theme

Para que resulte más fácil entenderlo, vamos con un ejemplo práctico de cómo cambiar el aspecto de nuestra plantilla con unas simples líneas de css. Es muy simple, pero servirá para que se entienda, en la imagen podéis ver el cambio que vamos a llevar a cabo.Modificaremos el color del encabezado H3 y le añadiremos un subrayado; por otra parte, cambiaremos el background del mensaje destacado y el grosor del borde izquierdo. Bastará con añadir el siguiente código a nuestro style.css del tema hijo.

h3{
text-decoration: underline;
color: #44AAFF;
}
div.alert-box {
background-color:#E9FDEE;
border-left: 1px solid green;
}

Así de fácil cambiamos el estilo, pero podemos ir mucho más lejos con el uso de filtros y otros métodos muy útiles. Ahora que sabes lo que es y por qué debemos usar Child Themes te animo a que pruebes a hacer alguna modificación por tu cuenta.

Si has encontrado útil esta entrada, o tienes cualquier tipo de duda, no dudes en dejar un comentario. ¡No te pierdas las próximas entradas sobre WordPress!