Temas hijos en WordPress

Una de las primeras cosas que hacemos es definir el aspecto visual de nuestra web, necesitamos que sea atractiva y amigable para nuestros visitantes. Es la vía de comunicación entre nosotros y ellos. Dentro de WordPress los temas se encargan de esa tarea, implementando el aspecto visual y muchas de las funcionalidades requeridas.

Un tema de WordPress no es más que un grupo de archivos, diseñados para funcionar en conjunto y determinan tanto el aspecto visual, como las funcionalidades de nuestra web. Si lo primero que hacemos es escoger un tema para nuestra web, el siguiente paso que debemos dar es crear un tema hijo. ¿Por qué debemos hacerlo?

La respuesta es simple, sea cual sea el tema elegido, llegará el momento en que haremos algún ajuste o modificación del diseño, o puede que necesitemos ampliar las funcionalides incluidas de serie. Si modificamos los archivos originales, correremos el riesgo de que al actualizar el tema, nuestras modificaciones se pierdan. 

Y debemos mantener nuestro tema actualizado. Las actualizaciones no solo nos ofrecen nuevas y mejores funcionalidades, sino que corrigen errores y fallos de seguridad. Si no mantenemos nuestro software al día, aumentamos innecesariamente el riego de perder nuestros contenidos, o que nuestra web sea comprometida por hackers.

Podemos definir un tema hijo como un grupo de archivos independientes, que modifican las funcionalidades del tema padre.  Un tema hijo nos permite hacer las modificaciones necesarias y a la vez podemos mantener el tema actualizado. Lógicamente tendremos que revisar nuestras modificacioens para mantenderlas adaptadas a las nuevas versiones del tema, pero no perdemos nuestro trabajo.

Muchos temas comerciales, incluyen temas hijos y recomiendan trabajar con ellos. Cuando no sea así, crear un tema hijo es una tarea sencilla, al alcance de cualquiera. 

Como para casi todo en WordPress, tenemos más de un plugin para hacerlo. Una busqueda en el repositorio o en Google nos presentará varias opciones. Nos obstante, veamos como hacerlo manualmente.

Para ello debemos crear una carpeta dentro de /wp-content/themes, con el nombre que deseemos y dentro de esa carpeta tenemos que crear 2 archivos:

Este archivo debe comenzar con el siguiente texto:

/*    
Theme Name:   Tema Hijo    
Theme URI:    http://example.com/tema-hijo/    
Version:      1    
Description:  Descripción del tema hijo.     
Author:       Nombre del autor    
Author URI:   http://example.com 
License:      GNU General Public License v2 or later 
License URI:  http://www.gnu.org/licenses/gpl-2.0.html 
Tags:         light, dark, responsive-layout  
Template:     tema-padre
Text Domain:  tema-hijo
*/
/* A partir de esta línea comienza la personalización del tema */

Cambiaremos las líneas, según nuestras necesidades. 
Theme Name: Pondremos el nombre de nuestro tema.
Template: Pondremos el nombre de la carpeta que contiene el tema padre, por ejemplo si estamos desarrollando un tema hijo de Twenty Seventeen, la carpeta sería twentyseventeen.
Text Domain: Necesaria si queremos agregar texto traducible en nuestro tema hijo.

El resto de las líneas son opcionales, pero se recomienda colocarlas.

El archivo style.css del tema hijo, reemplaza al archivo style.css del tema padre. Por ese motivo es necesario cargar su contenido. La práctica recomendada es cargar los estilos usando el archivo functions.php.

El código para cargar los estilos es similar a:

<?php

function enqueue_child_styles() {
$estilo_p   = 'estilo-del-padre';
$uri_padre  = get_template_directory_uri();
$estilo_h   = 'estilo-del-hijo';
$uri_hijo   = get_stylesheet_directory_uri();
wp_enqueue_style( $estilo_p, $uri_padre . '/style.css' );
wp_enqueue_style( $estilo_h, . '/style.css',
array($estilo_p),wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_styles');

Este fragmento de código utiliza la acción wp_enqueue_scripts para cargar los estilos definidos en nuestra función enqueue_child_styles.

Dentro de nuestra función definimos las variables:
$estilo_p: ID del padre, lo buscaremos dentro del functions.php del padre. Una ubicación probable es  la llamada a wp_enqueue_scripts
$estilo_h: ID del hijo, podemos usar cualquier texto
$uri_padre: Ubicación de los archivos del padre, utilizamos la función predefinida en WordPress para ello.
$uri_hijo: Ubicación de los archivos del hijo. También utilizamos la función predefinida en WordPress para ello.

A diferencia de style.css, el archivo functions.php no sobrescribe al del tema padre, se carga antes que él. Como podemos nuestro propio código, sin limitaciones, esto permite añadir nuevas funcionalidades, y también modificar las existentes. 

Si subimos ambos archivo a nuestra instalación, tendremos nuestro tema disponible en nuestro panel de control en WordPress. 

Un pequeño detalle;  si queremos utilizar una imagen para nuestro tema hijo, debemos subirla en formato png o jpg. El nombre del archivo debe ser screenshot.png o screenshot.jpg, según corresponda. Yo uso un tamaño de 800x600. Si accedemos a los detalles del tema, se nos mostrará la información que hayamos incluido en style.css

Solo tendremos que activar nuestro tema hijo y a partir de ese momento, haremos nuestras modificaciones, con la confianza de que podemos actualizar el tema padre sin perder nuestro trabajo.

Usaremos style.css para modificar los estilos del tema padre e incluir los nuestros. Si repasamos functions.php vemos que primero cargamos los estilos del padre, de esa forma nuestras modificaciones tienen precedencia.

El archivo functions.php, es nuestro mejor amigo. Por ejemplo, veremos que a veces incluir unas pocas líneas de código, nos pueden evitar tener instalado un plugin. Encontraremos ese tipo de recomendaciones muy a menudo.

En el caso de modificaciones complejas, podemos estructurar nuestras modificaciones de acuerdo a nuestras necesidades y en lugar de tener un functions.php gigantesco, usaremos las herramientas de PHP para gestionar nuestro código.

Una funcionalidad muy importante es la que nos permite modificar los archivos del tema padre. Por ejemplo queremos modificar la cabecera (header.php), el pie de página footer.php) o la plantilla de nuestras páginas (page,php). Solo tenemos que copiarlas a las carpeta de nuestro tema hijo y realizar las modificaciones pertinentes. 

En realidad podemos hacer esto con cualquier archivo del padre, lo copiamos en la misma ubicación dentro de nuestro tema hijo, creando las carpetas intermedias que sean necesarias, y trabajamos sobre nuestra copia. Siempre que exista una copia modificada, WordPress la utilizará en lugar de utilizar el archivo original.

También podemos crear nuevos archivos para añadir plantillas y formatos adicionales, específicos para nuestro tema. Para ello nos guiaremos por la jerarquía de WordPress. En breve trataremos este aspecto con más detalle.

Esta gran ventaja, tiene un pequeño impacto en la velocidad de carga de nuestra web. La búsqueda adicional dentro del tema hijo requiere tiempo.