Cómo crear un tema hijo en WordPress

Introducción
En WordPress, un tema hijo, es un tema que hereda la funcionalidad de otro tema llamado tema padre. El tema hijo permite modificar funcionalidades del tema padre o añadirle nuevas funcionalidades.

Es la forma más segura de modificar un tema existente. En lugar de modificar los archivos del tema padre directamente, lo que hacemos es crear un tema hijo y hacemos prevalecer sus funcionalidades sobre las del tema padre.

Si se modifica un tema existente y luego se actualiza, las modificaciones se perderán. Con el uso de un tema hijo, se puede actualizar el tema padre, por cuestiones de seguridad o funcionalidad y seguir manteniendo las modificaciones realizadas en el tema hijo.

Si estamos iniciándonos en el desarrollo de temas WordPress, el uso de temas hijo es una buena forma de empezar.
 
Cómo crear el tema hijo

1. Crear una carpeta en la carpeta de temas dónde guardaremos el tema hijo. La carpeta de temas está en wp-content/themes. El nombre de la carpeta no llevará ningún espacio como parte del nombre, y es habitual usar el nombre del tema padre seguido de -hijo (o -child en inglés). Es decir, si vamos a hacer un hijo del tema llamado virtue, el nombre de la carpeta debería ser virtue-hijo (o bien, virtue-child).

 

2. En la carpeta del tema hijo, creamos un archivo llamado style.css. Este es el único archivo requerido para crear un tema hijo. La hoja de estilos debe empezar con las siguientes líneas (es aconsejable hacer una copia del archivo style.css del tema padre, copiarlo en la carpeta del tema hijo y modificar las líneas que nos interesan, en concreto las líneas resaltadas):

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   /*  Theme Name: Virtue Hijo Theme URI: http://hacemostemas.com/virtue-hijo/  Description: Tema hijo de Virtue Author: Mortadelo & Filemón Author URI: http://hacemostemas.com  Template: virtue  Version: 1.0.0  Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready  Text Domain: virtue-hijo*/ @import url("../virtue/style.css");   /* Aquí empieza la personalización de tu tema */ [...]

   /* Theme Name: Virtue Hijo Theme URI: http://hacemostemas.com/virtue-hijo/ Description: Tema hijo de Virtue Author: Mortadelo & Filemón Author URI: http://hacemostemas.com Template: virtue Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: virtue-hijo */ @import url("../virtue/style.css"); /* Aquí empieza la personalización de tu tema */ [...]

   Podemos modificar cada una de las líneas anteriores para personalizar nuestro Theme.

   MUY IMPORTANTE: Las líneas que sólo requieren cambios son las correspondientes al nombre del Theme (Theme Name) y la de la Plantilla (Template).

   La Plantilla (Template) indica el nombre del directorio del tema principal. En este caso, el tema principal o padre es el Theme Virtue, por lo que la Plantilla (Template) es virtue, que es el nombre del directorio donde se encuentra el tema Virtue.

   @import no debe utilizarse para importar la hoja de estilos de los temas padres en los temas hijos. El método correcto es utilizar wp_enqueue_style (), para poner en cola la hoja de estilos de los padres. El uso de este código se hará en el archivo functions.php del tema hijo, por lo que tendremos que tener un archivo functions.php en la carpeta raíz del tema hijo.
   

style.css y functions.php son los dos únicos archivos necesarios para crear un tema hijo o theme child.
 
Archivos de plantilla
Si queremos cambiar algo más que la hoja de estilos, nuestro tema hijo puede sobrescribir cualquier archivo del tema padre. Solo tenemos que incluir un archivo del mismo nombre en la carpeta del tema hijo y este sobrescribirá el archivo equivalente en la carpeta del tema padre. Por ejemplo, si queremos cambiar el código PHP de la cabecera (header), podemos inlcuir un header.php en la carpeta de tu tema hijo. De este modo, este archivo se usará en lugar del header.php del tema padre.

También podemos incluir archivos en el tema hijo que no estén incluidos en el tema padre.
 
Uso de functions.php
A diferencia de style.css, el archivo functions.php de un tema hijo no sobrescribe al del tema padre, en lugar de eso, se carga en adición a functions.php del tema padre. Exactamente, se carga justo antes que el del tema padre.

El archivo functions.php de un tema hijo nos permite modificar la funcionalidad del tema padre. Por ejemplo, si añadimos una función PHP a nuestro tema, la forma más rápida sería abrir el archivo functions.php y poner la función ahí. Pero no es lo más inteligente, la próxima vez que el tema se actualice, esa función desaparecerá.

Hay una forma alternativa que es la forma más inteligente. Podemos crear un tema hijo, añadir un archivo functions.php en él y añadir la función en ese archivo. La función hará exactamente el mismo trabajo desde ahí, con la ventaja de que no será eliminada en la próxima actualización del tema padre.

NOTA: No hay que copiar todo el contenido de functions.php del tema padre en functions.php del tema hijo.

La estructura del archivo functions.php es simple, una etiqueta PHP de inicio, una etiqueta PHP de cierre al final, y entre ellas, nuestro código en PHP. El ejemplo de más abajo muestra un archivo básico functions.php que solo hace una cosa: añade un enlace de favicon al elemento head (cabecera) de páginas HTML.

<?php //Etiqueta PHP de inicio
 
// Funciones que necesitemos, en este caso, solo una funcion
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );
 
?> //Etiqueta PHP de cierre

Referenciando archivos en el tema hijo
Para incluir archivos que residen dentro de la estructura de directorios del tema hijo, se utilizará get_stylesheet_directory(). Como la plantilla style.css del tema padre se sustituye por style.css del tema hijo, y al residir esta en la raíz del subdirectorio del tema hijo, get_stylesheet_directory() apunta al directorio del tema hijo.

Este ejemplo utiliza require_once, que muestra cómo se puede utilizar get_stylesheet_directory() para hacer referencia a un archivo almacenado dentro de la estructura de directorio del tema hijo.

require_once( get_stylesheet_directory() . '/my_included_file.php' );

 
Soporte RTL
Para agregar soporte a lenguajes RTL (Right-to-left, de derecha a izquierda), tendremos que incluir el archivo rtl.css en el tema hijo:

/*
Theme Name: Virtue Hijo
Template: virtue
*/
 
@import url("../virtue/rtl.css");

WordPress sólo carga el archivo rtl.css si is_rtl() es verdadero.

Es recomendable agregar el archivo rtl.css al tema hijo, incluso si el tema padre no lo tiene.