Crear temas hijo (child themes) en WordPress

por | Abr 28, 2014 | Temas WordPress

Crear temas hijo (child themes) en WordPress

A medida que profundizas en WordPress seguramente vas a tener la necesidad de realizar modificaciones a los archivos del tema.

Es cierto que muchos temas, especialmente los de pago, tienen muchas opciones para configurar colores, diseño, etc.

Sin embargo si encuentras alguna modificación que sólo se puede hacer a través de los archivos de tu tema o simplemente porque quieres tener todas tus modificaciones centralizadas en archivos, entonces puedes hacer un tema hijo o child-theme.

Un tema hijo te asegura que si actualizas el tema padre tus modificaciones de código se conservarán, ya que las habrás realizado en los archivos del tema hijo.

Un tema hijo hereda todos los archivos del tema padre, sin embargo puedes sobrescribir estos archivos y agregar código adicional.

Creación de un tema hijo a través de un plugin

Existen varios plugins que tienen la funcionalidad de crear temas hijo, en este caso lo haremos usando el plugin Child Theme Configurator.

Desde el backend de WordPress en Plugins > Añadir nuevo, busca el termino “child theme”, y ubica el plugin.

Instalación plugin child theme configurator

Luego de instalar y activar aparecerá una nueva opción de menú bajo el menú de Herramientas, tal como se muestra en la siguiente imagen:

Menú herramientas plugin

Al ingresar verás una pantalla que muestra los tres primeros pasos, por defecto detecta el tema activo en base al cual se creará el tema hijo, en nuestro ejemplo es el tema Store Front, para continuar con el proceso clic en Analizar.

Pasos 1-3 creación tema hijo

Luego parecerán pasos adicionales, salvo quieras especificar algo especial para el tema hijo, te recomiendo dejar todos estos valores por defecto y simplemente dirígete al final y clic en Create New Child Theme.

Creación tema hijo pasos 4-9

Con esto ya tendrás el tema hijo creado, aparecerá un mensaje de que se ha creado correctamente.

Proceso finalizado creación tema hijo

Ahora para activarlo ve a Apariencia > Temas, ubica el tema hijo y actívalo, tal como se muestra en la siguiente imagen:

Para finalizar no olvides desinstalar el plugin Child theme Configurator, ya que sólo sirvió para esta tarea específica de crear un tema hijo.

Eliminar plugin

Creación de un tema hijo de manera manual

La otra opción es crear el tema hijo de manera manual, para esto necesitarás crear una carpeta y algunos archivos, puedes usar un programa FTP o el Administrador de Archivos de tu cuenta de hosting.

Administrador de Archivos Cpanel

Primero en tu instalación de WordPress ubica la ruta: wp-content/themes/
Allí crearas una nueva carpeta para el tema hijo, para el nombre de la carpeta te recomiendo que incluya el nombre del tema padre seguido del texto “child”.

En nuestro ejemplo crearemos un tema hijo para el tema storefront, por lo tanto el nombre de la carpeta será: storefront-child

Creación de la carpeta del tema hijo

Luego ingresa a esa carpeta y crearemos dos archivos, el archivo style.css y el archivo functions.php

Creación archivos tema hijo

Dentro del archivo style.css agrega un código similar a como se muestra a continuación:


/*
Theme Name:   storefront child theme
Description: Tema hijo para hacer personalizaciones de código
Author:       Jhon Marreros G.
Author URL:  https://tusitio.com
Template:     storefront
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-child
*/

Cambia los valores de acuerdo a tus necesidades, los principales son:

  • Theme Name: El nombre del tema hijo, es recomendable mantener le nombre del tema padre como parte del nuevo nombre.
  • Description: Descripción del nuevo tema hijo
  • Author: Nombre del autor del tema hijo
  • Autor URL: Sitio web del autor
  • Template: Esta es la referencia al tema padre, debes colocar el nombre de la carpeta del tema padre.
  • Version: versión del tema hijo
  • License: Nombre de la licencia por defecto
  • License URI: Url para informaicón adicional de la licencia usada.
  • Text Domain: identificación para traducciones del tema hijo

Luego edita igualmente el archivo functions.php y agregar el siguiente código:


function enqueue_styles_child_theme() {

	$parent_style = 'parent-style';
	$child_style  = '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' );

Una vez realizado esto si te diriges a Apariencia > temas, verás que ya tienes un nuevo child-theme que puedes activar.

Activar tema hijo

Conclusión

Tal como has podido ver, no tienes pretextos para no usar un tema hijo, es muy fácil crearlo, además todas las modificaciones de código que hagas estarán centralizadas y lógicamente no perderás estas modificaciones al actualizar el tema padre.

En el siguiente video se detallan los puntos anteriores.

5/5 (4 Reviews)