Qué es un child theme y para qué sirve

Si estás buscando qué es un child theme, o tema hijo, vamos a ir al grano. Un Child Theme o tema hijo es una forma de mantener intacto tu theme principal, haciendo las modificaciones en un theme que trabaja en paralelo al principal.

De esta forma todo sigue intacto salvo las pequeñas modificaciones que hagas al código.

¿Por qué mantener intacto el theme principal?

La primera vez que oí hablar de child theme es porque actualicé el tema de mi CMS y todas las modificaciones que había hecho hasta el momento desaparecieron.

Lo primero fue llorar y recordar a Tom Hanks gritando Wilsooooooon!!!
Lo segundo dar la razón a los que me decían haz un backup (copia de seguridad de la base de datos) antes de actualizar.
Lo tercero fue ponerse manos a la obra para volver a modificar todo lo esencial para mi site.

Conseguí arreglar gran parte del desastre (no siempre recuerdas todo lo que has ido mejorando con los años). Ahora la pregunta que me hacía era: ¿Y a partir de ahora qué?

Aquí es donde empieza lo que te interesa de verdad. El mayor problema de las modificaciones que puedes hacer a un CMS radica en que cada vez que lo actualices vas a sobreescribir la información (ya sea wordpress, magento, prestashop, shopify o el que sea).

Índice de Contenidos

¿Por consiguiente? Perder las modificaciones que tanto esfuerzo, tiempo y dinero te habían costado.

Nota mental: Esto no puede volver a pasarme. Tengo que buscar la forma de solucionarlo.

Tras enterrar mi cabeza en la arena cual avestruz di con el concepto Child Theme (aquí suena la música celestial de apertura de cualquier ordenador).

¿Dónde está la clave del éxito? El Tema hijo depende del tema principal, pero funciona en paralelo. De esta forma, cualquier modificación hecha en el tema hijo, no se verá afectada ni sobreescrita cuando se actualice el tema principal.

¿Cómo evito perder todos los cambios cuando tenga que actualizar wordpress?

Ahora mismo me imagino dos posibles escenarios:

En el primero has llorado y gritado Wilson. En el segundo eres mucho más precavido que yo y antes de modificar nada del código has pensado a futuro y deducido que eso podía tener consecuencias.

En ambos casos voy a enseñarte cómo crear un child theme para wordpress sin plugins.

¿Existen plugins para crear un Child Theme? Sí.

¿Es mejor evitar el uso de plugins para cosas que puedes hacer tú fácilmente? También.

Cómo crear un Child Theme sin plugins

Antes de empezar: Esto debería costarte unos 10 minutos de tiempo, y no demasiados conocimientos técnicos más allá de moverte por tu hosting y administrador de wordpress con soltura.

Guía para crear un tema hijo paso a paso

Conectarse a tu base datos. Puedes hacerlo por FTP o abriendo tu hosting y buscando una zona en la que te diga algo tipo: administrador de archivos.

Busca la carpeta en la que está tu tema de wordpress. A no ser que lo hayas cambiado, tienes que navegar a la siguiente ruta:

public_html/wp-content/themes/

Dentro del directorio themes tienes que crear una nueva carpeta con el nombre que quieras ponerle a tu tema hijo. Tienes que basar tu nombre en el tema principal. Por ejemplo, si tu tema principal es el generatepress, tu tema hijo debería ser generatepress-child.

Ya te vas sintiendo Neo en matrix, a que sí.

Entra en esta nueva carpeta y crea un archivo que se llame style.css

El siguiente paso es editar este nuevo archivo. Siguiendo con el ejemplo que te he dado de nombre de plantilla principal: Haz clic en editar archivo, pega las siguientes lineas en él y dale a guardar.

/*
Theme Name: Generate Press-Child
Theme URI: http://ejemplo.com/generatepress-child/
Description: Child Theme for Generate Press
Author: Tu Nombre Author
URI: http://ejemplo.com
Template: generatepress
Version: 1.0.0
*/

De todo lo que hay en este código la línea más sensible es la que dice Template: generatepress, ya que le dice a WordPress que lo que has creado es un tema hijo de generatepress.

Ahora vas a crear otro archivo y llamarlo functions.php

En el mismo directorio en el que has creado style.css debes crear un nuevo archivo que se llame functions.php para luego editarlo y pegar el siguiente código dentro y darle a guardar:

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

Lo sé, esto puede ser abrumador la primera vez que lo haces pero créeme, no tiene nada de raro.
Lo que está explicando este código es que antes de cargar cualquier estilo o función del tema hijo, deben cargarse los del tema padre.

Y con esto y un bizcocho… ¡Hasta mañana a las ocho!

Ya tienes tu child theme listo para activar y editar las modificaciones sin miedo a desmontar todo el site.

Un último detalle que supongo que ya sabes pero por si las moscas te dejo aquí:

Muy importante: A partir del momento que añadas un archivo en tu tema hijo, ese pasará a ser lo único que utiliza wordpress para esa nomenclatura de archivo. En otras palabras:

Para modificar cualquier archivo del tema principal debes copiarlo, pegarlo en la misma ruta pero del tema hijo y allí modificar lo que consideres necesario. De lo contrario los únicos estilos que wordpress aplique serán lo que acabas de añadir y se olvidará de los del tema padre.

Cómo modificar un archivo del tema principal para usarlo en el tema hijo

Y como todo en la vida suele ser más fácil poniendo un ejemplo voy a explicar uno en concreto, pero que muestra cuál es la forma para actuar en cualquiera.

En mi caso quiero modificar el archivo archive.php ya que por defecto el tema que utilizo mostraba 3 entradas como destacadas y el resto en modo parrilla.

Lo primero que debes hacer es copiar el archivo archive.php del tema padre y pegarlo en la misma ruta del tema hijo (en este caso en la carpeta principal del tema hijo).

Ahora edítalo y busca el punto exacto en el que se cita la característica que quieres cambiar. En mi ejemplo concreto era este fragmento:

La parte editada está en los números 12. En este código se dice que si existe un número de entradas destacadas igual a 12 procede a la acción «after_featured_archive». También se dice que si el número de entradas destacadas es inferior a 12 mantenga la estética «featured» y concluye con otra regla que dice que si es otra opción (en este caso se sobreentiende que superior a 12) use la estética «grid».

Ahora que ya sabes cómo crear un child theme para wordpress sin plugins no tienes excusa para empezar a modificar tu web y llevarla al siguiente nivel…

Aunque si ves claro que lo tuyo no es el SEO Técnico y prefieres delegar este tipo de trabajos contáctame y hablamos.