A todos aquellos que trabajamos habitualmente con WordPress, nos surge la necesidad de modificar la hoja de estilo de nuestro tema para adaptarlo a nuestro cliente. También tenemos muchas veces que adaptar las hojas de estilo de muchos plugins para que se adapten bien al diseño general del tema.

Una vez adaptado esto, nos resulta un inconveniente grande el actualizar cualquier plugin o el tema, ya que se sobreescribe la hoja de estilos y tenemos que volver a modificarla, con ell consiguiente esfuerzo extra.

Para todos ellos, hace algún tiempo que surgieron los «Child Themes«.

¿Que es un «Child Theme»?

Un Child Theme es un tema que hereda las caracteristicas de su tema padre, pero permite modificar sus estilos y añadir funcionalidades extras.

Si usamos un «Child Theme», cualquier actualización del tema o plugin no nos hará tener que volver a modificar el CSS, ya que las modificaciones las hacemos sobre la hoja de estilos del tema hijo o sobre sus funciones.

¿Cómo se crean?

Para crear un tema hijo o «Child theme», basta con crear una carpeta con el mismo nombre que el tema padre y añadiendo «-child».

Estructura de carpetas con Child Theme

Posteriormente habrá que crear un archivo en esa carpeta llamado style.css con el siguiente contenido mínimo:

/*
Theme Name: Twenty Thirteen Child
Theme URI: https://www.gya.es/
Description: Child theme for the Twenty Thirteen theme
Author: Your name here
Author URI: http://gya.es/sobre-nosotros/
Template: twentythirteen
Version: 0.1.0
*/

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

En este caso hemos usado el tema Twenty Thirteen como tema padre, pero habrá que sustituirlo por el nombre de nuestro tema y nombre del directorio que contiene al mismo.

A continuación podremos redefinir estilos según nuestras necesidades.

Si queremos añadir alguna función al tema tendremos que añadir una archivo functions.php en el directorio del tema hijo. Hay que tener en cuenta que las funciones del tema hijo se cargan antes del tema padre, con lo que si queremos usar la del tema hijo sería conveniente cambiar la declaración de la función padre y añadirle la comprobación function_exists para que no se cargue después de la que queremos usar:

if ( ! function_exists( ‘funcion_lo_que_sea’ ) )
{
funcion_lo_que_sea() {
// Aqui el contenido de la funcion padre
}
}

Y por último una pequeña nota. Lo más probable es que de primeras nuestra página no se vea bien. Normalmente hay que volver a asignar los menús a la posición dónde tiene que ir.

Para ampliar información, lo mejor es ir a la página de WordPress