Tutorial crear child-theme WordPress

Por qué crear un child theme en WordPress

Cada vez es más común encontrar en páginas como Themeforest, WooThemes o ElegantThemes, temas que incluyen un child theme WordPress (o tema hijo) dentro de la plantilla de WordPress.

Puede resultar confuso para muchos usuarios, pues hasta ahora lo habitual era instalar un tema principal en nuestro WordPress. Luego, si además queríamos realizar una personalización avanzada del tema yendo más allá de las opciones de personalización que trae en el dashboard, lo haríamos directamente modificando los archivos que componen el tema (PHP’s, JS’s, CSS’s). Pero trabajar sobre los archivos fuentes del tema tiene sus contras, como por ejemplo que si actualizamos el tema perderemos todas las modificaciones que hayamos realizado.

Para evitar perder modificaciones al actualizar un tema de WordPress surgen los child themes. Un child theme es como un entorno anexo a una plantilla de WordPress, desde él podemos sobreescribir y ampliar funcionalidades del tema que tengamos instalado y activado. El funcionamiento es sencillo, si copiamos un archivo del tema principal al directorio del child-theme y lo modificamos en el tema hijo, tendrán prioridad los cambios realizados en el child theme.

Crear un child theme en WordPress desde cero

Para crear un child theme lo único que deberemos hacer es crear una carpeta en el directorio del servidor que contiene los temas de WordPress con la siguiente estructura: “nombredeltema-child” y dentro de esta carpeta añadiremos como mínimo el archivo “style.css” con las siguientes líneas en él:

[css]
/*
Theme Name: Mi tema hijo
Template: nombre-del-tema-padre
*/
[/css]

Se pueden pasar más datos a WordPress sobre el tema hijo, como por ejemplo una descripción, versión del tema, etiquetas, autor… Pero para que WordPress lo reconozca, como mínimo deberemos especificar el nombre del theme y el template del que será hijo, tal y como se ve en el código anterior.

Para que nuestro child theme en WordPress muestre una imagen en “apariencia > temas” como el resto de temas que tenemos descargados, lo que haremos será crear un png con el nombre “screenshot.png” con una captura de pantalla del tema, el logo del tema o lo que queramos mostrar como miniatura.

 

child theme en wordpress

 

En resumen, trabajar desde child themes no sólo evitará que perdamos o tengamos que echarle un tiempo a migrar cambios de un tema a otro tras actualizarlo. Un child theme nos va a permitir modificar comportamientos y aspectos del parent theme, además de darnos la posibilidad de crear nuevas plantillas, cargar librerías inexistentes en el tema padre o ampliar action hooks y filters.

Usando un parent theme y sus child themes

Cuando vamos a instalar un tema de WordPress que además incluye un child theme, lo que haremos es subir los archivos (parent y child theme en WordPress) a la siguiente ruta del servidor (/wp-content/themes). O desde el uploader de WordPress subir primero el zip con el tema principal (parent theme) y a continuación el zip del child theme.

Una vez subidos ambos, lo que haremos para poner en funcionamiento el child theme es ir a apariencia > temas y activar el child theme.

Modificando archivos del parent theme de WordPress a prueba de actualizaciones

Como ya hemos explicado en este artículo, todos los archivos que se llamen igual que los del parent theme tendrán prioridad al cargarse el tema, sobrescribiendo los archivos del tema principal. Así que si por ejemplo queremos realizar modificaciones en header.php lo que haremos es llevarnos una copia a nuestro child theme y editarlo desde el child theme.

child theme en wordpress

Esta técnica puede usarse para modificar cualquier archivo del parent theme. Lo único que será necesario es que recreemos la misma estructura de carpetas que existe en el parent theme.