Temas hijos en WordPress

Temas hijos en WordPress

Bienvenidos a un nuevo artículo de Escola Espai.

Worpdress es un estupendo CMS que gracias a su sistema de plantillas (o temas como queráis llamarlos) nos permite cambiar la apariencia de nuestro sitio web sin demasiado esfuerzo. Existen multitud de temas, libres o de pago, que permiten manipular más o menos opciones de configuración. Pero creerme que, tarde o temprano, llegará el momento en que esas opciones no nos permitirán modificar aquello que necesitamos.
Cuando ese momento llegué… no entrad en pánico! Con WordPress siempre podemos modificar el código fuente de cualquier componente; en este caso, del tema, para personalizar a nuestro gusto.

Y cual es el problema?
Las plantillas de WordPress, como cualquier código, pueden contener errores, problemas de seguridad, etc. Dichos problemas se van corrigiendo o mejorando con actualizaciones, por lo que es recomendable mantener al día la plantilla. Sin embargo, al realizar una actualización, todos los cambios que hayamos hecho a la plantilla activa se perderán. Tendríamos que guardar una copia de las modificaciones y rehacerlas cada vez que actualizáramos, o no actualizarlas nunca…

Y la solución? Los temas hijos o child themes
Un «tema hijo» es un tema que hereda la funcionalidad de otro tema, llamado «tema padre». Los temas hijos permiten hacer cambios en el código sin tocar absolutamente nada del tema padre. Esta es la forma más segura y fácil de modificar un tema existente, tanto si se quieren hacer pequeños cambios como otros más amplios. En lugar de modificar los archivos del tema directamente, crearemos un tema hijo y lo haremos prevalecer sobre el tema padre.

Y… como lo hago?
Muy fácil, como ejemplo vamos a crear un tema hijo de la plantilla “Twenty Fourteen”. Esta es la plantilla que viene activa por defecto en la instalación de WordPress 4.

Primero, crearemos una nueva carpeta en el directorio donde se almacenan las plantillas (wp-content/themes) y le llamaremos twentyfourteen-child (podéis llamarlo como queráis pero recordar que no puede haber espacios en el nombre de la carpeta).

Segundo, dentro de la carpeta twentyfourteen-child crearemos un fichero llamado style.css y lo editaremos añadiendo la siguiente información.

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twentyfourteen-child/
Description: Tema hijo de Twenty Fourteen
Author: Escola Espai
Author URI: http://www.espai.es
Template: twentyfourteen
Version: 0.1
*/


@import url("../twentyfourteen/style.css");

/* =Aquí empieza la personalización del tema
-------------------------------------------------------------- */

Este fichero es el único que necesitamos para crear nuestro tema hijo. Podemos editar la información a nuestro gusto excepto la información de la linea Template, que evidentemente tiene que coincidir con el nombre del directorio donde esta la plantilla padre.
Lo que hacemos en la linea de @import es importar a los estilos del tema padre.

Opcionalmente también podemos crear nuestra imagen en miniatura de nuestro tema hijo copiando la imagen que aparece en nuestro tema padre llamada screenshot.png y modificandola a nuestro gusto, una vez modificada la subimos junto a nuestro archivo style.css dentro de la carpeta del tema hijo.

Tercero, Solo nos faltaría ir en nuestro panel de administración de Wordrpess en Apariencia>Temas, comprobar que aparece nuestro tema hijo y activarlo.
Evidentemente no veremos ningún tipo de cambio ya que aun no hemos hecho ninguna modificación. Una vez creado y activado el child theme podemos:

  1. Añadir código CSS al fichero style.css hijo que acabamos de crear.
  2. Copiar cualquier fichero PHP del tema padre al tema hijo y modificar el código según nuestras necesidades. (header.php, footer.php, etc…). Tener en cuenta que cada archivo php del tema hijo sustituye al mismo archivo php del tema padre.
  3. Crear un fichero functions.php hijo y añadir las nuevas funciones PHP. El fichero functions.php a diferencia del fichero style.css, no anula al padre. En su lugar, además de las funciones del padre, carga también las del hijo y estas antes que las del padre.

Como veis no es nada complicado trabajar con un tema hijo. No estamos modificando el tema principal, y nos permitirá obtener las actualizaciones oportunas, mejorar el tema principal, y corregir rápidamente los errores.

Os animo a que lo probeis!

Podéis ampliar la información en la documentación de wordpress.

Saludos a tod@s.

1 Comentario

  • Berta
    15/01/2015

    molt interessant! gràcies.

Escribe un comentario