Cómo usar child themes en WordPress

Child themes - WordPress child themesUsar child themes en WordPress – temas hijo o temas basados en otro tema – es la mejor manera de personalizar nuestro blog WordPress y asegurarnos en cierta medida de que las actualizaciones del tema padre no afectan a nuestras personalizaciones…

Es un proceso bastante simple y el resultado merece la pena.

Esto es posible porque los archivos que decidamos personalizar: css, content, header, functions, etc. estarán en otro directorio distinto del tema original, por lo que cuando recibamos una notificación de que existe alguna actualización, al actualizar el tema original no perderemos los cambios que hayamos hecho; aunque, eso sí, es conveniente echarle un vistazo a los archivos originales del tema padre que hayamos editado en el child para ver si se ha producido en ellos algún cambio y reproducirlo.

Supongamos que hemos editado el header (header.php) y añadido un icono, por ejemplo, si durante la actualización del tema el archivo “header.php” original no ha sufrido ninguna modificación, pues no tendremos que hacer nada, pero si la ha sufrido será interesante sumarla a nuestro “header.php” modificado para que esté actualizado también, aunque sin perder el icono añadido por nosotros…


El proceso básico para crear child themes es sencillo

1. Creamos un nuevo directorio dentro de la carpeta en la que se halle nuestro tema original y lo nombramos como más nos convenga.

Importante:

Siguiendo las convenciones de WordPress y Php: espacios, caracteres, etc.

Aunque lo recomendable es usar el mismo nombre del tema original y añadirle child o hijo, para que así nos sea más fácil localizarlo en el árbol de carpetas…

En mi caso:

/cajondesastre/wp-content/themes/iconic-one
/cajondesastre/wp-content/themes/iconic-one-child

2. Dentro de esta carpeta añadimos un archivo llamado:

style.css

que contendrá los añadidos que deseemos a través de la hoja de estilos, aunque puede estar vacío en cuanto a reglas, pero es absolutamente necesario para poder activar los child themes, porque ha de contener unas líneas de comentarios con los datos indispensables para que WordPress sepa de qué tema padre se trata y dónde encontrarlo

/*
Theme Name: Iconic One Child
Theme URI: http://themonic.com/iconic-one/
Template: iconic-one
Author: Francisco Javier Fernández - (original Themonic)
Author URI: https://lesidea.com
Description: Tema hijo basado en Iconic-One con algunas personalizaciones...
Version: 1.4.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Blue, White, Black, one-column, two-columns, right-sidebar, custom-background, fluid-layout, responsive-layout, custom-menu, full-width-template, post-formats, rtl-language-support, theme-options, custom-colors
Text Domain: Iconic-One-Child
*/

@import url("../iconic-one/style.css");

.entry-summary p {
	text-align: justify;
}

Como se puede apreciar en el código, hay dos líneas resaltadas, que son las únicas verdaderamente importantes:

Template: iconic-one

Ver el detalle de que en Template debe ir el nombre de la carpeta en la que se halla instalado el tema original… /cajondesastre/wp-content/themes/iconic-one

Ésta es una línea que «No» es un comentario y le dice al código dónde se halla el archivo style.css original…

@import url("../iconic-one/style.css");

Opcional:

Estas líneas forman parte de la personalización y, en este caso, reemplazarán cualquier valor existente en el «style.css» original que coincida con la etiqueta «.entry-summary p»

.entry-summary p {
	text-align: justify;
}

Lo mismo, obviamente, para cada etiqueta sobre la que queramos hacer cambios de las ya existentes en el css o de las nuevas que queramos crear; simpre que las hayamos añadido en alguna parte del código, puesto que sino sería como no poner nada…

Activar el child theme en nuestro blog

Puesto que lo único necesario para usar nuestros child themes es lo expuesto anteriormente, solo tenemos que acceder a la pestaña «Apariencia» «Temas», seleccionar nuestro child theme y activarlo…

Así de fácil.

Pero hay algunos detalles a tener en cuenta:

  • Si queremos ver una imagen representativa de nuestro child al igual que pasa con el resto de temas que tenemos instalados, hemos de añadir a nuestro directorio la imagen deseada con el nombre «screenshot.png»; que puede ser la que más nos convenga, y su tamaño también, pero una 800 x 600 o relación 4:3 será una buena elección…
  • Si nos interesa editar alguno de los archivos del tema: content, header, etc. hemos de copiarlos en nuestra nueva carpeta ya editados o bien editarlos desde ella; para lo cual lo ideal es usar un buen gestor FTP como FileZilla o CiberDuck
  • El caso del archivo «functions.php» es algo diferente del resto, puesto que este archivo no reemplazará al original, pudiendo estar vacío sin más consecuencias, sino que será cargado antes que el original y las funciones que hayamos incluido en él serán tomadas como si de una más se tratara

A este respecto hay que decir que estos archivos editados, excepto «functions.php» como ya he dicho, reemplazarán, de forma virtual, a los originales, y los cambios que hagamos serán reproducidos en Firefox o iExplorer tal cual, lo hayamos hecho bien o hayamos cometido errores garrafales; y puede que esos errores hayan sido interceptados por el núcleo PHP y salga la página en blanco o que solo sean malos en cuanto a la presentación de nuestro blog…

Hay que hacer las comprobaciones necesarias después de cada cambio, por nimio que nos parezca…

¡Porque PHP no se casa con nadie!


Cómo detectar errores y corregirlos

Para poder ver los errores que hacen que se vea la página en blanco, por ejemplo, u otros, la mejor manera es usar la constante «WP_DEBUG» del archivo «wp-config.php» situado en la raíz de nuestro blog WordPress

Poner el valor «True» para hacer pruebas y «False» para usar el blog con normalidad…

/**
 * Para desarrolladores: modo debug de WordPress.
 *
 * Cambia esto a true para activar la muestra de avisos durante el desarrollo.
 * Se recomienda encarecidamente a los desarrolladores de temas y plugins que usen WP_DEBUG
 * en sus entornos de desarrollo.
 */
define('WP_DEBUG', false);

 Esto hará que se muestren en pantalla dichos errores para que los podamos ver; pero, obviamente, también los verán el resto de usuarios del blog, por lo que solo hay que usarlo en momentos puntuales si nuestro blog está en la web, no importando, claro está, si usamos «Wamp» o similar en nuestro pc…

Sobre los subdirectorios en nuestros child themes

Podemos usar, si queremos, subdirectorios en nuestro child, al igual que en los temas originales, pero hay un problema difícil de solucionar sin entrar en detalles un tanto complicados:

require_once( get_stylesheet_directory() . '/inc/themonic-customizer.php' );

El problema es que hay que usar la función «require_once()» para hacer la llamada al archivo php deseado, como en el ejemplo de arriba, y ahí reside el quid de la cuestión, porque aunque esta función detecta si el archivo ya ha sido cargado y, en ese caso, no lo carga de nuevo, resulta que hace la comparación con la ruta completa y no solo con el nombre del archivo.

O sea, que si pretendemos cargar el archivo «themonic-customizer.php» editado por nosotros para sustituir al original, que ya existe en el tema padre en la carpeta «inc», se producirá un error inevitable puesto que las rutas son casi iguales, pero diferentes en la parte del directorio original y del child…

Conclusión

Aunque crear y activar los child themes es de lo más sencillo, es importante «complicarse» un poco para hacer de ellos una herramienta verdaderamente útil para nuestros propósitos.

También es muy importante hacer pruebas e investigar en la web, ser metódicos y hacer copias de seguridad, al menos de los archivos que vayamos a editar…