A raíz de mi último proyecto, del que pronto os daré detalles, he creado por primera vez un tema hijo. Después de probarlo y ver sus ventajas, voy a crear un child theme, como se conoce en inglés, para cada uno de mis proyectos WordPress.

© Oksana Kuzmina – Fotolia.com

¿Porqué crear un tema hijo en WordPress?

Cada vez que configuras un tema en WordPress, en mayor o menor medida, acabas modificando código de los archivos .php o .css. A veces es simplemente cambiar un color o insertar un icono de redes sociales; pero aunque sea pequeña la modificación, ésta se perderá en la próxima actualización que tengas del tema.

En contra de lo que puedas pensar, no es complicado el funcionar con un tema hijo, y aunque hasta ahora siempre he preferido anotar las modificaciones que hacía de un tema para volverlas a aplicar tras una actualización, ha llegado el momento de trabajar con código más limpio.

¿Cómo crear un tema hijo en WordPress?

Lo primero que tendremos que hacer es crear una carpeta con el nombre de nuestro tema hijo dentro de la carpeta /wp-content/themes/ (debemos poder acceder a los archivos de nuestro WordPress por ftp o por cpanel).

Crearemos la hoja de estilos, un archivo que deberá llamarse style.css.

Cabecera

En el incluiremos una cabecera que podremos copiar del archivo style.css del tema padre:

/*
Theme Name: Nombre del tema hijo
Description:  Descripción del tema
Author: Nombre del autor del tema
Template: Nombre de la carpeta del tema padre

(Adicionalmente puedes añadir los siguientes campos: Theme URI, Author URI, Version)

*/

(He puesto en cursiva las explicaciones del contenido de cada campo)

De la cabecera, los campos obligatorios que debemos completar son:

• Theme name: el nombre que pongamos al tema hijo deberá ser diferente del que tenga el tema padre.
• Template:  hay que poner el nombre de la carpeta del tema padre. Si no ponemos el nombre exacto, el tema hijo no funcionará.

Cuerpo del archivo style.css

Además de la cabecera hemos de incluir la línea siguiente:

@import url(«../directorio tema padre/style.css»);

Donde directorio tema padre es la carpeta donde está instalado el tema padre.

Modificaciones en el tema hijo

Si en este momento activamos el tema hijo (en el escritorio de WordPress, Apariencia, Temas), no notaremos ningún cambio. A partir de ahora las modificaciones que realicemos en nuestro tema hijo, irán cambiando la apariencia de nuestro WordPress y no se verán afectadas cada vez que actualicemos nuestro tema padre.

Las modificaciones que podremos hacer en un tema hijo son las siguientes:

• Añadir estilos: el tema hijo hereda la hoja de estilos del tema padre gracias a la importación que hacemos con

  @import url(«../directorio tema padre/style.css»);

Si en las líneas siguientes añadimos clases personalizadas, éstas tendrán preferencia con respecto a las definidas en el tema padre. Para el resto se aplicará lo definido en style.css del tema padre.

Por ejemplo, si añadimos unas líneas que modifiquen el color de los enlaces a style.css del tema hijo, el cambio se aplicará al tema hijo sin modificar el tema padre y manteniéndose el resto de los estilos del tema padre en el tema hijo.

• Añadir o modificar plantillas: Podemos personalizar los ficheros .php del tema (header.php, footer.php…). Lo primero que tenemos que hacer es copiar los archivos que queremos modificar del tema padre al tema hijo, manteniendo la misma estructura de directorios. Luego realizaremos los cambios que queramos en los archivos copiados al tema hijo.

Las modificaciones en los archivos .php se verán reflejados de forma inmediata en nuestra web sin haber alterado los archivos del tema padre (si hay dos ficheros iguales en ambos temas, tiene preferencia el que exista en el tema hijo).

Es muy raro que una actualización de un tema afecte a los archivos .php, salvo que se produzca una modificación importante en uno que tengamos copiado, no tendremos que preocuparnos de las actualizaciones que se produzcan en el tema padre.

Además podremos añadir las plantillas que necesitemos con nuevos archivos .php, que no se verán afectados por las actualizaciones del tema padre.

• Añadir funciones: Si quieres añadir funciones nuevas a tu tema hijo, añade un archivo  functions.php con ellas. WordPress primero leerá el archivo fuctions.php del tema hijo, y después el archivo functions.php del tema padre, teniendo en cuenta sólo las funciones que no hayan sido incluidas en el tema hijo.

Puedes aprender más sobre los temas hijos en el Codex de WordPress.org.

¿Has trabajado alguna vez con un tema hijo? ¿piensas hacerlo? Me gustaría conocer tu opinión en los comentarios de esta página.

Si te ha gustado este artículo, compártelo en tus redes sociales. Si quieres recibir las próximas entradas suscríbete a este blog.