Crear Child Theme (Tema Hijo) en WordPress

Es cierto que WordPress es un gestor de contenido para creación de sitios web muy fácil e intuitivo de usar, mediante el cual se puede crear un sitio web funcional sin la necesidad de llegar a programar código en sí. Más sin embargo llega un momento en que si quiere personalizar o agregar más funcionabilidades al sitio web, se va a requerir incorporar código personalizado. Y si bien se pudiera incorporar este código en los archivos del propio tema lo más recomendable es la creación de un Child Theme o Tema Hijo para ello.

¿Qué es un Child Theme o Tema Hijo en WordPress?

En WordPress un Tema Hijo o Child Theme, es un tema que hereda todas las características y funcionalidades de un tema o plantilla padre. Mediante el child theme se podrá modificar a nivel de código la funcionalidad y apariencia del sitio web sin necesidad de tocar los archivos originales del tema.

¿Para qué sirve un Child Theme o Tema Hijo?

Un Child Theme nos sirve para separar el código y archivos originales de la plantilla o tema original, del código personalizado o creado por el usuario, esto describiéndolo desde un punto de vista visual y estructural. Pero aparte nos permite tener todo ordenado, ayudando también evitar perder  el código adicional que se hayan agregado al tema al actualizar la plantilla o tema original.

En tal sentido, si no se cuenta con un child tema y se agrega código personalizado en los archivos originales del tema, se corre el riesgo de perder todas estas modificaciones tras actualizar el tema. Debido que al actualizar el tema original se sobrescriben los archivos del tema eliminando cualquier código personalizado agregado. Además de que es un poco engorro buscar entre los archivos del tema para agregar las modificaciones personalizadas y también se corre el riesgo de dañar funciones o archivos propios y fundamentales del tema original.

Por otro lado el child theme hereda todas las características y funcionalidades del tema padre u original, lo que incluye las funciones, estilos y demás elementos. Esto permite poder extender la funcionalidad  o redefinir una función ya declarada en el tema padre.

Pasos para Crear un Tema Hijo en WordPress

Para crear un Child Theme de forma manual se requiere acceder al directorio raíz donde se encuentran los archivos de WordPress y crear una carpeta y uno que otro archivo. Para acceder a estos archivos se puede utilizar un programa FTP como FileZilla o WinSCP, o utilizar el Administrador de Archivos de su cuenta de hosting que es lo más práctico. En este caso en particular se hará uso del Administrador de Archivos de la cuenta hosting para acceder a los archivos a modificar.

Paso 1: Crear una Carpeta para el Tema Hijo

En primera instancia se debe crear una carpeta dentro de la ubicación wp-content/themes. Esta carpeta será la que alojara los archivos del child theme. Por otro lado aunque se le pudiera colocar cualquier nombre a esta carpeta lo ideal es que tuviera relación con el tema padre.

Paso 2: Crear Archivo «style.css» (Hojas de Estilos) dentro de la Carpeta del Tema Hijo

Procedemos a crear el el archivo ‘style.css’ dentro de la carpeta del child theme.

Posterior a ello dentro del archivo copiamos el encabezado siguiente:

/*
Theme Name:   Generatepress child theme
Description:  Estilos de tema hijo para personalizar estilos.
Author:       Gonzalo Tovar
Author URL:   https://www.softincode.com/
Template:     generatepress
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  generatepress-child
*/

Descripción:

Se debe mencionar que los valores del encabezado anterior son solo un ejemplo, los mismo se deben modificar de acuerdo a sus especificaciones.

• Theme Name: Nombre del Tema Hijo. Es recomendable que este guarde relación con el tema padre.
• Description: Breve descripción de la función de este tema hijo
• Author: Autor del tema hijo.
• Author URL: Sitio web del autor.
• Template: Importante aquí se debe hacer referencia al tema padre. Se debe colocar el nombre de la carpeta del tema padre tal cual aparece.
• Version: Versión del tema hijo.
• License: Nombre de la licencia usada.
• License URI: Enlace para obtener más información de la licencia usada.
• Text Domain: Dominio propio del tema hijo para el caso de que desee incorporar traducciones.

Nota: Después de este encabezado se pueden agregar todas los estilos personalizados del sitio web. Pudiendo redefinir estilos del tema padre.

Paso 3: Crear y Configurar Archivo «functions.php» para Heredar los Estilos del Tema Padre

Después de haber creado el archivo «style.css» se debe crear en el child theme el archivo «functions.php».

Posterior a ello se debe configurar dicho archivo functions.php para heredar las características del tema padre.

<?php //Como se trata de un archivo PHP abrimos etiqueta PHP
//Función Principal para Heredar las Características del Tema Padre
function enqueue_styles_child_theme() {
        //Identificador para los estilos del tema padre
	$parent_style = 'parent-style'; 
        //Identificador para los estilos del tema hijo
	$child_style  = 'child-style'; 
       
        //Esta declaración trae a la cola los estilos del tema padre
	wp_enqueue_style( $parent_style,
				get_template_directory_uri() . '/style.css' );

        //Esta declaración trae a la cola y concatena los estilos del tema padre con los del hijo.
	wp_enqueue_style( $child_style,
				get_stylesheet_directory_uri() . '/style.css',
				array( $parent_style ),
				wp_get_theme()->get('Version')
				);
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_child_theme' );

?> //Cerramos etiqueta PHP

Descripción:

• enqueue_styles_child_theme(): Nombre de la función, no existe una norma específica para nombrarla, se puede nombrar a preferencia.
• $parent_style y $child_style: Variables para almacenar los identificadores para los estilos de ambos temas. Mientras que las variables se pueden nombrar con el nombre de su preferencia el contenido para ambas variables se debe colocar tal cual como en el ejemplo. Se puede evitar el uso de estas variables colocando directamente el identificador el la función wp_enqueue_style.
• wp_enqueue_style: Función para añadir o embeber un archivo con estilos CSS en una página generada con WordPress. Para más información ver.
• add_action: Función nativa de WordPress para agregar una acción. A la cual le pasamos en este caso dos parámetros ‘wp_enqueue_scripts’ que es el nombre de la acción donde inyectaremos el código y el nombre de la función que queremos ejecutar que es este caso es ‘enqueue_styles_child_theme’. Para más información ver.

Cabe destacar que en este archivo functions.php, es donde se deberían agregar las funciones php personalizadas que se deseen incorporar.

Paso 4: Activar Tema Hijo

Una vez realizamos los pasos anteriores procedemos a activar el tema hijo. Para ello nos dirigimos al entorno de escritorio a Apariencia > Temas, y allí verás que tienes disponible un child theme para activar.

Y listo ya tenemos nuestro child theme para trabajar en nuestras modificaciones personalizadas sin correr el riesgo de perder la mismas tras una modificación, y de tampoco por algún error corromper los archivos originales del tema original.

Un paso opcional sería crear una imagen destacada para el child theme, para ello solo tenemos que subir a la carpeta del child theme la imagen de nuestra preferencia. Lo único que es necesario tener en cuneta es que la imagen debe tener el siguiente nombre y extensión screenshot.png

También en vez de buscar otra imagen se puede usar la misma imagen del tema padre, y solo basta con ir a la carpeta del tema padre copiar la imagen screenshot.png y luego pegarla en el tema hijo y listo.