Siempre que utilizamos uno de los miles de temas que tenemos a nuestra disposición en el mundo WordPress, necesitamos darle nuestro toque personal o realizar modificaciones que nos demande nuestro cliente. Si solamente necesitamos cambiar algún que otro color, podemos hacerlo cómodamente desde el editor CSS adicional que ya se incluye en las últimas versiones de WordPress:
Pero si necesitamos realizar cambios estructurales en el HTML de la cabecera, el pié de página o añadir / modificar funciones, necesitaremos modificar los archivos internos del tema (header.php, footer.php, functions.php…) con el inconveniente de que en el momento que salga una nueva versión del tema y actualicemos, perderemos todos los cambios que hayamos realizado, ya que al actualizar un tema se sobreescriben todos los archivos de este.
Para ello surgió la técnica de crear temas hijos o child themes, que consiste en un tema (o sub-tema), que hereda todas las propiedades del tema principal (tema padre), con la particularidad de que si realizas un cambio en el tema hijo, este permanecerá aunque se actualice el tema padre, con lo que podemos aprovechar las mejoras y optimizaciones del tema padre sin perder los cambios que hayamos realizado para nuestro proyecto. Y ahora viene lo mejor, lo fácil que es crear un tema hijo.
¿Cómo se crea un tema hijo o child theme?
Tan sencillo como crear una nueva carpeta dentro del directorio de themes de WordPress (wp-admin/content/themes), usando el nombre que deseemos darle a nuestro nuevo tema hijo. Lo mejor es crearlo en minúsculas, de una sola palabra y sin caracteres especiales.
Ahora dentro de esta carpeta crearemos un archivo style.css vacío (muy importante que se llame style.css).
Para mayor rapidez y comodidad, vamos a copiar la cabecera del archivo style.css del tema principal (casi todo lo que aparece comentado al principio):
Y lo pegamos en el style.css vacío que hemos creado para el tema hijo, con los siguientes cambios:
- En Theme Name: Lo cambiamos por el nombre de nuestro tema hijo.
- La información del autor comor Theme URI, Author, Author URI… podemos dejarlas como están.
- Al final de todo añadir: Template: nombre_de_la _carpeta_del_tema_padre
Esto último es muy importante, ya que si está mal puesto o no se especifica, no funcionará.
Al final debe quedarnos un archivo más o menos así:
Donde en Theme Name hemos puesto el nombre del tema hijo (Boutique), y en Template el directorio del tema padre (storefront).
Una vez completada la cabecera, añadiremos la siguiente instrucción para importar todas las clases del tema padre:
@import url("../carpeta_tema_padre/style.css");
En nuestro ejemplo quedaría así:
Con esto, ya podemos ir al menú Apariencia – Temas de WordPress, y debería aparecer el nuevo tema hijo para seleccionarlo y activarlo:
Si queremos que aparezca una captura del tema, podemos crear un archivo screenshot.png y ponerlo en la carpeta del tema hijo.
A partir de aquí podemos modificar las clases que deseemos, si por ejemplo queremos cambiar el color de fondo de la cabecera, solo tenemos que llamar a su clase y cambiar el valor del background:
.site-header{
background:#ff3300;
}
Modificar archivos internos (header.php, footer.php, content.php…)
Para hacer cambios en la estructura de las cabeceras, pie de página, contenido… simplemente tenemos que copiar los archivos del tema padre y pegarlos en el tema hijo. Todas las modificaciones que hagamos en el tema hijo prevalecerán aunque se actualice el tema padre.
Muy importante es respectar la jerarquía de directorios del tema padre. Si por ejemplo queremos modificar un archivo que se encuentra en:
tema_padre/assets/lib/plantilla.php
Tenemos que crear esta misma jerarquía en el tema hijo:
tema_hijo/assets/lib/plantilla.php
Modificaciones en el archivo de funciones (functions.php)
En este caso no es necesario copiar todo el archivo functions.php del tema padre. Basta con crear un archivo functions.php vacío y añadir las funciones que necesitemos en el nuevo tema hijo. Eso sí, no olvides colocar las aperturas de PHP en el nuevo functions.php creado.
<?php //contenido ?>
Si necesitamos modificar una función del tema padre, podemos copiarla y modificarla en el tema hijo, pues WordPress siempre leerá primero las funciones del tema hijo y continuará cargando las del tema padre.
