05. ¿Qué es y como crear un tema hijo en WordPress?

¿Qué son los temas hijo de WordPress?

Los temas hijo (o child themes en inglés) de WordPress nos permiten contar un nuevo diseño para nuestra página web partiendo de un tema ya diseñado. Esta opción resulta extremadamente práctica para el desarrollo de una página web con este CMS y, por eso mismo, es una de las formas de trabajar más extendidas entre los desarrolladores, ya que sólo requiere algunos conocimientos básicos de HMTL, CSS y PHP.

Aunque WordPress tiene un completo sistema de administración de los temas para personalizar el diseño web, es más que habitual que nos basemos en otra plantilla previa, como las que se entregan de manera predeterminada al instalar el CMS, o cualquier otra que podamos adquirir. Generalmente, necesitaremos modificar los estilos para adaptarlos a nuestro proyecto y, en estos casos ,la mejor opción es crear un de estos denominados temas hijo.

La necesidad de uso de temas hijo se hace patente cuando el tema que hemos utilizado como base tiene una actualización disponible. Si procedemos a actualizarlo directamente y no hemos creado correctamente el tema hijo, es posible que perdamos todos los cambios que hemos ido incorporando. Sin embargo, si hemos creado correctamente el child theme evitaremos este contratiempo y la actualización del tema principal no machacará nuestros cambios.

¿Cómo crear el tema hijo de WordPress?

Para crear un tema hijo lo primero será crear una carpeta dentro de wp-content/themes/ Por ejemplo, para el tema padre twenty-eleven, crearíamos una carpeta llamada twenty-eleven-child.

Después crearemos un archivo .css con el nombre de style.css y dentro colocaremos las siguientes líneas:

/*
Theme Name: Twenty Eleven Child
Theme URI: http://example.com/twenty-eleven-child/
Description: Tema hijo de Twenty Eleven
Author: José María Baquero
Author URI: https://www.arsys.es/blog/author/jmbaquero/
Template: twentyeleven
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-eleven-child
*/
@import url("../twenty-eleven/style.css");

/* Aquí comienzan tus estilos personales */

El campo que se debe indicar de manera obligatoria es Theme Name. De esta forma, en la zona de administración de WordPress, aparecerá el nuevo tema hijo creado listo para seleccionar. Otros valores de esta configuración son:

• Theme URL: Nos pide la ruta de nuestra carpeta creada para el tema hijo.
• Description: Una breve descripción del tema creado.
• Author: El autor del tema hijo.
• Author URL: URL del autor.
• Template: Nombre de la carpeta donde se encuentra el tema padre.
• Version: Versión de nuestro tema hijo.
• Tags: Etiquetas para búsquedas, etc.
• Text Domain: Nombre de la carpeta creada para el tema hijo.
• @import: Nos permite importar los estilos del tema padre, aunque ahora veremos que es mejor hacerlo de otra forma.

La forma óptima de importar los estilos del tema padre será a través del archivo functions.php que crearemos en la carpeta del tema hijo. En este archivo utilizaremos la función wp_encueue_style(). Así conseguimos que los estilos del tema padre estén en la cola y que se utilicen en caso de ser necesarios.

El código de functions.php sería así:

wp_encueue_style('style.css',”http://mi-sitio.com/file/theme/twenty-eleven/style.css”);

Modificar los archivos de código PHP en los temas hijo de WordPress

Para cambiar más archivos de la plantilla padre tendremos que crear los archivos en la carpeta del tema hijo. Por ejemplo, para editar la cabecera de la plantilla, tendremos que crear el archivo header.php. Con esto, sobreescribimos el archivo equivalente de la plantilla padre.

También podemos crear archivos que no estén el tema padre. Por ejemplo, si nos interesa crear una plantilla para un sidebar especial que el padre no tiene, tan sólo tendríamos que crear el archivo sidebar-especial.php.

Debemos tener en cuenta que el archivo functions.php del padre y el del hijo funcionarán simultáneamente. Además se cargará antes el functions.php del tema hijo. Por ese motivo es habitual que los temas de WordPress, dentro de functions.php, pregunten antes si una función ya ha sido creada anteriormente, con un código como este:

if(!function_exists('theme_nav')){
	function theme_nav(){
		// hace lo que sea
	}
}

Cuando veamos funciones que no estén envueltas en esta llamada a function_exists(), en el functions.php del tema padre, debemos entender que no se pueden sobrescribir, pues si lo hacemos tendremos un error PHP y las páginas no se generarán correctamente. También puede indicarnos que los creadores del tema que estamos modificando no habían pensado en la posibilidad que otros desarrolladores pudieran realizar temas hijos basados en ellos.