¿Qué es un tema hijo (theme child)?

Simplemente se trata de añadir dos archivos a nuestro proyecto, en los cuales podremos hacer las modificaciones que deseemos sin que afecten al tema que hayamos elegido (tema padre). Este tema hijo «llama» al tema padre, con la ventaja de poder trabajar con los dos.

¿Porqué es necesario trabajar con un tema hijo?

Periódicamente los temas son actualizados, la mayoría de veces sin causar muchos problemas, pero cuando hemos modificado mucho el estilo (CSS) o el PHP, ocurre que en la actualización, nuestro trabajo se ve perjudicado o simplemente se pierden los cambios. Para evitar este desastre realizamos los cambios en el tema hijo, al que las actualizaciones no afectarán en absoluto.

Cómo crear tu tema hijo, paso a paso:

1. Crear el archivo style.css

Crea un archivo llamado style.css (puedes crearlo con un editor de texto) y añade estas líneas:

/*
 Theme Name:     Divi Child
 Template:       Divi
*/
 
/* =Edición del código a partir de esta línea------ */

*Donde pone Divi Child, puedes poner otro nombre, será el tema hijo y en Template, puedes poner el nombre de tu tema padre.

2. Crear el archivo functions.php

Ahora crea otro archivo llamado functions.php y añade estas líneas:

<?php
function child_theme_enqueue_styles() {
$parent_style = 'parent-style'; // Esta es la hoja de estilos del tema padre.

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', 'child_theme_enqueue_styles' );
?>

Ojo! vas a encontrar un montón de tutoriales con otro código, especializado en temas concretos. Este código php de llamada al tema padre sirve para cualquier tema, no requiere edición.

3. Subirlos a tu proyecto

Ahora debes crear una carpeta, le das el nombre que quieras, pero recomiendo minúsculas y algo sencillo, como por ejemplo ‘divi child’ o ‘tema hijo’ y metes los dos archivos creados dentro.

Ahora debes acceder al directorio de tu proyecto, mediante FTP o con el Control Panel o bien si estás trabajando en localhost, la ruta donde debes colocar esta carpeta es:

\wp-content\themes\

De tal manera que quedaría algo así:

\wp-content\themes\divi_child\   (esta carpeta contendrá los dos archivos functions.php y style.css que hemos creado)

4. Activar el tema hijo

Ahora sólo queda activar nuestro tema hijo, para ello, igual que hicimos con el tema padre, vamos a nuestro CMS, en Apariencia –> Temas –> Si todo está correcto, debería aparecer ahí nuestro recién creado tema hijo, con el nombre que le hemos dado a la carpeta, lo Activamos y ¡listo! ya podemos comenzar a editar nuestra hoja de estilo.

5. Editando nuestro tema hijo

Editar desde el CMS:

Puedes editar en Apariencia –> Editor –> style.css

Ahí editamos el código algo como así:

También podemos editarlo directamente desde el archivo, sin olvidarnos luego de volver a subirlo a nuestro servidor por FTP o CPanel o bien actualizarlo si trabajamos en localhost.

**Edito este post**, he podido comprobar que hay otra forma mucho más rápida y sencilla de crear nuestro tema hijo**

Subir tu tema hijo por el CMS

1. Crear el archivo style.css

Crea un archivo llamado style.css (puedes crearlo con un editor de texto) y añade estas líneas:

/*
 Theme Name:     Divi Child
 Template:       Divi
*/
 
/* =Edición del código a partir de esta línea------ */

*Donde pone Divi Child, puedes poner otro nombre, será el tema hijo y en Template, puedes poner el nombre de tu tema padre.

2. Crear el archivo functions.php

Ahora crea otro archivo llamado functions.php y añade estas líneas:

<?php
function child_theme_enqueue_styles() {
$parent_style = 'parent-style'; // Esta es la hoja de estilos del tema padre.

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', 'child_theme_enqueue_styles' );
?>

Ojo! vas a encontrar un montón de tutoriales con otro código, especializado en temas concretos. Este código php de llamada al tema padre sirve para cualquier tema, no requiere edición.

3. Comprimir los dos archivos

Con estos dos arhivos, los metemos en una carpeta y a la carpeta le damos un nombre, por ejemplo, theme child o tema hijo o lo que sea y usamos un compresor de archivos y hacemos con esta carpeta un .zip

4. Subir el .zip

Finalmente, sólo queda subir como si fuera un tema normal, en Apariencia–>Temas–>Subir Tema–>Seleccionar Archivo y elegir nuestro .zip

En otros tutoriales veremos cómo ir mejorarndo el aspecto de nuestro proyecto, sin utilizar pesados plugins, sólo modificando estos dos archivos que acabamos de crear.

Espero haber servido de ayuda, podeís comentar o compartir si os a gustado, ¡gracias!

SUSCRIBIRSE A NEWSLETTER

¡Comparte!