¿Cómo crear un child theme (tema hijo) en WordPress?

Para quienes trabajamos con WordPress, ya sea en desarrollos personales o de índole comercial, siempre es importante que los cambios que hacemos sigan siendo actualizables.

Hace algún tiempo, cuando le hacías cambios a un theme comprado o gratuito, era muy difícil actualizarlo si el desarrollador lanzaba cambios importantes: la actualización te pasaba por encima y se llevaba tu trabajo. Para eso el equipo de WordPress desarrolló el concepto de child theme, que es una extensión al theme base en la cual puedes mover las hojas de estilo a tu antojo, agregar o cambiar funciones, reemplazar secciones completas.

Lo mejor es que si el desarrollador lanza una actualización al theme base, no tienes ningún problema y puedes actualizar sin pisar tus cambios. Clientes contentos y un sinnúmero menos de dolores de cabeza para el desarrollador.

Ahora te enseño con pasos simples cómo crear uno.

1. La carpeta

Navega a la carpeta themes de tu WordPress. En general la ruta completa sería esta:

public_html/wp-content/themes

Crea una carpeta nueva llamada theme-child. En mi caso será Divi-child, porque estoy creando un child para el theme Divi.

2. El style.css

Crea un archivo nuevo, llámalo style.css, y escribe adentro lo siguiente:

/*
Theme Name: Mi primer child-theme
Theme URI: http://www.elegantthemes.com/gallery/Divi/
Description: Este es el primer child-theme que hago con la ayuda de nosoynerd
Author: Yo mismo
Author URI: http://www.nosoynerd.com
Template: Divi
Version: 1.0.0
*/

/* Aquí comienzan mis cambios
------------------------------------------------- */

.mi-clase { color: #5bbc26; font-weight: 300; }

Ahora te explico qué significa cada línea.

Theme Name es el nombre que le vas a dar a tu child theme, puede ser el que quieras.

Theme URI es la URL de la galería del theme, puede ser la del original si lo deseas.

Description, el texto que mejor describa tu child theme.

Author, tu nombre, nick, apodo, lo que sea.

Author URI, la URL del autor.

Template, y esto es importante, debe ser el nombre de la carpeta del theme padre. Busca cómo está escrito en el style.css del theme original, porque si te equivocas acá el child theme no va a cargar.

Version te sirve para llevar un control de versiones de tu creación.

Y lo que sigue bajo “Aquí comienzan mis cambios” es todo el estilo escrito por ti para personalizar el theme.

3. Heredar los estilos del padre

Acá hay un detalle que conviene hacer bien desde el principio. Durante años lo normal fue poner un @import al style.css del padre dentro del archivo, y funciona, pero es lento: el navegador tiene que descargar tu hoja de estilos, leerla, y recién ahí descubrir que debe ir a buscar otra.

La forma correcta es encolarlo desde PHP. Crea un archivo functions.php dentro de la misma carpeta del child theme, con esto:

<?php
add_action( 'wp_enqueue_scripts', 'mi_child_theme_estilos' );

function mi_child_theme_estilos() {
    wp_enqueue_style( 'padre-style', get_template_directory_uri() . '/style.css' );
}

Con eso heredas todo el estilo del padre y el navegador puede pedir los dos archivos en paralelo.

4. Subirlo

Una vez que terminaste tus archivos, súbelos dentro de la carpeta que creaste en el paso 1.

5. Activarlo

Ve al menú Apariencia, y ahí a Temas. En esa sección vas a ver tu creación. La activas y ya, está hecha la magia.

Ahora, cualquier cambio que hagas en el código del theme lo subes a la carpeta de tu child, no vas a afectar en nada al theme padre, y vas a poder actualizarlo tan pronto se lancen actualizaciones de seguridad.

Un detalle que se olvida

Cuando actives el child theme por primera vez, es normal que se te pierdan los menús y los widgets, y que el sitio se vea desarmado por un rato. WordPress los asocia al theme activo, no al padre.

No es que hayas roto nada. Los vuelves a asignar una vez, desde Apariencia, y no vuelve a pasar.

Eso sería todo, quedo atento a cualquier duda.