Child theme o cómo personalizar un tema de WordPress sin temor a perder los cambios

Índice

1. Qué es un Child Theme
2. Por qué usar un Child Theme
3. Cómo crear un Child Theme paso a paso
4. Activando tu Child Theme
5. Otros archivos de la plantilla
6. Usando functions.php

1. Qué es un Child Theme

Un child theme te brinda una manera segura y sencilla para que puedas realizar grandes o pequeños cambios a un tema activo en tu web con WordPress. Es una especie de subtema que hereda la funcionalidad del tema principal, al que llamaremos tema padre, y que te permite modificar o añadir funciones nuevas a dicho tema padre. En lugar de modificar los archivos de un tema directamente, puedes crear un child theme.

Cada cambio que haces en el child theme sobrescribe el código del tema padre, pero sin tocarlo en absoluto.

2. Por qué usar un Child Theme

Cuando utilizamos WordPress llega un momento en que nos es imposible evitar modificar el tema que tenemos activo porque difícilmente se adaptará siempre a nuestras necesidades. El problema llega cuando al autor del tema se le ocurre la fantástica idea de actualizarlo, porque si procedemos a la actualización todos nuestros cambios se esfuman como por arte de magia y si no lo actualizamos corremos un riesgo de seguridad que no nos podemos permitir.

Afortunadamente todo (o casi todo) está pensando en WordPress. Existe una forma de que podamos personalizar el tema sin que los cambios que haga su autor nos arruinen horas y horas de trabajo, y esa forma es con los child theme o temas hijos, para traducirlo al idioma de Cervantes.

Asimismo un child theme es una buena forma de comenzar si estás aprendiendo a desarrollar temas para WordPress 😉

3. Cómo crear un Child Theme paso a paso

Crea un nuevo directorio en tu directorio de temas: (\wp-content\themes) y llámalo como quieras, lo más habitual es utilizar el nombre del tema padre y añadirle un «child». Ejemplo, tema padre: twentytwelve, tema hijo: twentytwelve-child. 

En el directorio hijo crea un archivo llamado style.css. Este es el único archivo necesario para un child theme. La hoja de estilo debe comenzar con las siguientes líneas de código:

/*
Theme Name: Twenty Twelve Child
Theme URI: http://ejemplo.com/
Description: Child theme para Twenty Twelve
Author: Tu nombre aquí
Author URI: http://ejemplo.com/acercade/
Template: twentytwelve
Version: 0.1.0
*/

Puedes cambiar cada una de estas líneas para tu tema, las únicas líneas requeridas son Theme Name y Template. En Template va el nombre del directorio del tema padre.

La hoja de estilo del child theme (style.css) sobreescribirá la hoja de estilo del tema padre, lo más probable es que quieras incluir la misma hoja de estilo del tema padre, en ese caso puedes copiarla completa, pero es más sencillo que pongas solo una referencia, para ello debes comenzar el archivo con la siguiente línea:

@import url(«../twentytwelve/style.css»);

Reemplaza twentytwelve por el nombre del directorio de tu tema padre. Esta línea debe ir después de código de la cabecera especificado anteriormente y antes de cualquier otra regla CSS, si pones otra regla CSS antes de @import, esta no funcionará.

4. Activando tu Child Theme

Entra en la Administración de tu sitio web, ve al menú Apariencia -> Temas, verás allí listado a tu child theme recién creado. Haz click en «Activar».

5. Otros archivos de la plantilla

Si quieres hacer cambios en otros archivos además de la hoja de estilo, que sepas que tu child theme puede sobreescribir cualquier archivo del tema padre. Simplemente incluye el archivo con el mismo nombre en el directorio y éste sobreescribirá a su archivo equivalente en el directorio del tema padre. Si por ejemplo quisieras cambiar el código php de la cabecera del sitio, incluyendo el archivo header.php en el directorio del child theme, éste reemplazará el archivo header.php original.

Asimismo puedes incluir archivos en el child theme que no existan en el tema padre. Para ello puedes querer crear una plantilla más específica, por ejemplo para una página determinada.

6. Usando functions.php

A diferencia del archivo style.css, el archivo functions.php de un child theme no sobreescribe su archivo equivalente en el tema padre. En lugar de ello se ejecuta en adición al archivo padre functions.php. Específicamente se cargará antes del archivo padre, por lo tanto no copies el contenido completo del functions.php padre en el hijo.

De esta forma, el functions.php de un child theme ofrece una inteligente forma de modificar la funcionalidad del tema padre.

Esto es todo 🙂 indudablemente este directorio hijo nos aporta un gran alivio a la hora de ponernos a personalizar tranquilamente y a nuestro antojo, el tema de nuestra web con WordPress.