Crear un tema hijo en WordPress

Existen varias maneras de desarrollar sitios en WordPress, la más común y rápida es comprando un tema ya desarrollado y adaptarlo a nuestras necesidades, pero cuando nuestro sitio requiere de elementos personalizados, necesitamos crear un tema nuevo en WordPress, llamado child theme.

Qué es un child theme o tema hijo de WordPress

Un tema hijo o child theme es un tema que utiliza los archivos e información de un “tema padre” y tiene la capacidad de “pasar por encima” de él.

La importancia de usar un child theme

Se usa para evitar perder los cambios. Si haces cambios sobre el tema padre y hay una actualización, perderás todo.

¿Cómo empezar?

Para explicarte mejor como es el proceso de creación de un Child Theme utilizaremos el tema gratuito de WordPress: Twenty Seveventeen.

1.- El primer paso es crear una nueva carpeta de la siguiente ruta: wp-content/themes/. Las buenas practicas es nombrar esa carpeta igual a la del tema padre y agregar un guion y la palabra child al final del nombre: twentyseventeen-child.

2.- Dentro de la carpeta wp-content/themes/ crearemos dos archivos, styles.css y funtions.php.

3.- Dentro del archivo styles.css agregaremos la siguiente metadata que servirá para identificar el tema dentro de WordPress:

/*
Theme Name: Twenty Seventeen Child

Theme URI: http://tusitio.com/twenty-seventeen-child/

Description: Child theme de modificaciones

Author: Tu nombre

Author URI: http://tusitio.com

Template: twentyseventeen

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain: twenty-seventeen-child
*/

Veamos que contiene el archivo styles.css:

• Theme Name: nombre del tema hijo
• Theme URI: opcional, la url de la documentación y demo del tema hijo.
• Descripción, Author, Author URI: son opcionales pero se recomienda colocarlas.
• Template: este parámetro te indica el nombre de la carpeta del tema padre.
• Version: versión del tema hijo, importante para el control de cambios.
• License, License URI: si se quieres hacer alguna variación a la licencia.
• Tags: si harás variaciones en la funcionalidad del theme, puedes agregar otro tag.
• Text-Domain: si tus cambios implican agregar texto traducible.

4.- Dentro del archivo functions.php agregaremos el siguiente código:

<?php
	function enqueue_styles_child_theme() {

		$parent_style = 'twentyseventeen-style';
		$child_style  = 'twentyseventeen-child-style';

		wp_enqueue_style( $parent_style,
					get_template_directory_uri() . '/style.css' );

		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' );

Veamos que contiene el código en functions.php:

• La función: enqueue_styles_child_theme, es llamada a la acción: wp_enqueue_scripts
• Se definen dos variables que serán los IDs de los estilos a cargar.
  • El ID del padre ya existe por lo que tenemos que buscarlo en el archivo functions.php del tema padre.
  • El ID del tema hijo puede ser cualquier texto, aunque se recomienda igualmente que tenga un nombre similar al tema padre.
• Colocamos en cola el estilo del tema padre a través de la función wp_enqueue_style.
• Colocamos en cola el estilo del tema hijo, igualmente usando la función wp_enqueue_style.
• En la carga del style.css del tema hijo usamos el tercer parámetro para indicar dependencia.
• También usamos el cuarto parámetro para usar la versión que se ha definido en el archivo style.css del tema hijo.

Para comprobar que tu Nuevo Child Theme se a creado con éxito ve al menú de Apariencia > Temas de tu web en WordPress y comprueba que tengas tu nuevo child theme (no tendrá imagen destacada).