Crear un «Child Theme» o Tema hijo es una excelente manera para darle personalidad a tu plantilla sin tener que preocuparte de que, al realizar actualizaciones, todos los cambios que hiciste se borren o pierdan.

Con un Child Theme puedes organizar mejor los cambios que introduces en los estilos en un solo lugar y esto también te permite proteger tus modificaciones de cara a tus clientes con acceso a la parte administrativa de la web.

En este post te mostraré, paso a paso, como crear un Child Theme que funcione sin problemas con nuestra plantilla favorita: Divi.

Espero que te sea de provecho. Comenzamos?

Por qué necesitas un Child Theme para Divi?

Una razón importante para crear tu Child Theme es inherente al diseño y la funcionalidad del Tema Padre

Como ya sabrás Divi es un tema para WordPress y siempre que necesites realizar modificaciones en cualquier tema de WordPress, se recomienda crear un tema secundario que herede el diseño y la funcionalidad de ese tema principal.

Una razón importante para crear un tema secundario es conservar las modificaciones que realizas al actualizar el tema principal. Cada vez que actualices Divi, todos los archivos de plantillas se actualizarán, de modo que si has realizado algún cambio en estos archivos, dichos cambios se borrarán.

Por lo tanto, en lugar de modificar directamente los archivos de plantillas de Divi, puedes crear archivos adicionales dentro de un tema secundario para que cuando Divi se actualice, esos archivos permanezcan sin cambios.

Por lo tanto, si planeas realizar personalizaciones avanzadas para tu tema, como modificar plantillas de página y / o agregar grandes cantidades de CSS / JavaScript, y / o agregar nuevas funciones, es mejor hacer estos cambios a tu tema secundario sin tener que tocar los archivos de tema principal.

Es posible usar Divi sin un Child Theme?

Sí, es posible usar Divi sin crear un tema Divi Child, siempre que entiendas por qué.

Divi le permite agregar CSS y código personalizados en lugares como el Divi Builder, el Personalizador de temas y en el panel de Configuración de tema. De hecho Divi ha mejorado la edición de código para este propósito.

Y este código se conserva al actualizar el tema Divi.

Por lo tanto, se debe argumentar que un tema secundario no es necesario si un usuario solo va a realizar modificaciones menores. Además, Divi minimiza y almacena en caché un archivo CSS estático para que no haya problemas con la velocidad de carga de la página.

Para simplificarte las cosas, permíteme desglosar las circunstancias en las que probablemente deberías y no deberías usar un Divi Child Theme.

Probablemente DEBERÍAS usar un Divi Child Theme si…

1. Planeas realizar cambios en el código de los archivos del temas específicos (esto incluye cosas como plantillas de página y functions.php)
2. Planeas agregar cientos de líneas de código (CSS, JavaScript, etc.). A pesar de que es posible agregar esto a lugares como la configuración de tu tema, es más difícil de administrar con una gran cantidad de CSS.
3. Deseas colaborar con otros y acelerar el tiempo de desarrollo manteniendo todo en un espacio organizado.
4. No quieres que los clientes jugueteen en el Personalizador de Temas / Configuración y destrocen tu código. Colocándolo en tu Child theme definitivamente lo mantendrás a salvo de los demás.

Probablemente NO DEBERÍAS usar un Divi Child Theme si…

1. Planeas hacer modificaciones menores de tema. Agregar una pequeña cantidad de CSS (como menos de 100 líneas, por ejemplo) o algunas secuencias de comandos en la configuración o el personalizador del tema.
2. No planeas colaborar con un equipo. Digamos que contratas a un desarrollador para que trabaje en tu sitio, esa persona puede o no estar familiarizada con Divi y, sin duda, recurrirá a la creación de un tema secundario para realizar modificaciones de todos modos.
3. No te importa que los clientes vean las modificaciones de su código en la configuración de tema / personalizador.

Qué necesitas para crear un Divi Child Theme

Para crear tu Divi Child theme, vas a necesitar lo siguiente:

• La plantilla Divi instalada y activada
• Un Editor de texto para editar archivos de temas. Puedes usar el editor de texto que viene con Windows o Mac, pero si planeas tener como hábito la edición de estos archivos, te sugiero obtener un editor de texto más completo como Atom, Sublime, Notepad ++, etc.
• Cliente FTP: esto no es necesario si planeas cargar el tema a WordPress como un archivo zip. Pero si estás intentando acceder a los archivos de temas para un sitio en vivo, necesitarás un cliente FTP como FileZilla para poder acceder, editar, agregar o eliminar archivos de la plantilla. Si estás trabajando en una instalación local, deberías poder acceder a los archivos de temas directamente en tu disco duro.
• Una buena taza de café o té (esto es totalmente opcional ;))

¿Qué archivos componen un Child Theme?

Al nivel más básico, un tema hijo debe contener estos tres archivos:

1. Una carpeta para el tema hijo. Como todos los temas o plantillas, la carpeta de tu child theme se creará dentro de las carpetas de WordPress destinadas a contener las plantillas.
2. Un archivo llamado style.css file (que será usado para guardar los estilos o CSS de tu child theme)
3. Un archivo llamado functions.php – A nivel muy básico, este archivo ejecutará la acción wp_enqueue_scripts que pondrá en cola la hoja de estilo del tema principal (más adelante más sobre este tema)

Crea la carpeta para tu Child Theme

Hay dos formas de agregar los archivos de temas secundarios a WordPress:

1. Puedes agregar la carpeta de temas secundarios a los archivos de temas de WordPress directamente a través de FTP o localmente.
2. O puede crear una carpeta fuera de WordPress para luego comprimirla y cargarla a WordPress como un nuevo tema.

Para crear una nueva carpeta directamente en WordPress, deberás acceder a tus archivos de tema ubicados en la carpeta Temas de wordpress (wp-content / themes /).

Luego creas una nueva carpeta dentro de la carpeta de temas y asígnale el nombre «divi-child». Entonces, el nuevo directorio de temas secundarios será wp-content / themes / divi-child.

Si estás creando una carpeta de tu tema hijo para luego comprimirla y cargarla en WordPress, simplemente puedes crearla en tu computadora y darle el nombre de «divi-child».

Crear tu archivo de estilos/CSS

Dentro de tu nueva carpeta de temas, usa un editor de texto para crear un archivo llamado style.css (el nombre debe ser exactamente este o WordPress no lo reconocerá) y completa la información como se describe a continuación.

/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: Elegant Themes
Author URI: https://www.elegantthemes.com
Template: Divi
Version: 1.0.0
/ / =Theme customization starts here
——————————————————- */

Si no planeas publicar tu tema hijo, solo tienes que ingresar el nombre del tema y una plantilla. Entonces, si estás luchando por saber cómo completar toda esa información, no te preocupes por eso.

Debe asegurarse de que el parámetro «Template» identifique correctamente el nombre del directorio de tu tema principal, que es «Divi».

El nombre del tema, la URI, la descripción y el autor dependen totalmente de ti. Puedes personalizar esta información de encabezado para que se adapte a las necesidades de tu cliente. Por ejemplo, es posible que desees agregar el nombre de la compañía de tu cliente para el nombre de su tema, ya que este es el nombre que aparece cuando visita su tema en el Panel de WordPress.

Crea tu archivo Functions.php

Ahora que tenemos nuestro archivo style.css en su lugar, debemos asegurarnos de no omitir completamente el estilo que ya está colocado dentro de Divi (el tema principal). Eso significa que necesitaremos asegurarnos de que primero usamos la hoja de estilo de la plantilla padre es decir de Divi y luego presentaremos nuestra nueva hoja de estilos.

Este orden es importante porque si estás familiarizado con CSS, el código que ingreses en la parte inferior siempre tendrá prioridad sobre el código que esta en la parte superior. En nuestro caso, queremos que el código de la hoja de estilo primaria se cargue primero y luego el código de nuestra hoja de estilo secundaria.

Para hacer esto, necesitamos poner en fila la hoja de estilos del tema principal (Divi). En este caso estamos agregando la hoja de estilo principal para que se ponga en cola antes de la hoja de estilo del tema secundario. En otras palabras, cualquier cosa que agreguemos a nuestra hoja de estilos de temas secundarios se agregará y reemplazará al tema principal.

Para hacer esto, necesitaremos usar nuestro editor de texto para crear otro archivo dentro de la carpeta de temas secundarios.

Guarda el archivo con el nombre functions.php (el nombre debe ser exactamente este) y luego agrega el siguiente código en el archivo:

<?php
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

Luego guarda el archivo.

Este código es específico de Divi y es una versión modificada del método propuesto por el Códice de WordPress.

Crea una imagen para identificar tu Child Theme (esto es opcional)

WordPress te permite proporcionar una imagen en miniatura para que sirva como captura de pantalla de tu tema o imagen de marca de tu tema cuando lo veas en el Panel de WordPress.

Para crear una miniatura para el tema de su hijo, primero crea una imagen (WP recomienda un tamaño de 1200px de ancho por 900px de altura) y guárdala con el nombre de archivo screenshot.png (el nombre del archivo debe ser exactamente así para que WP lo reconozca). Luego, agréguela a la carpeta de temas secundarios junto a los dos archivos que ya están allí.

Aquí te muestro un ejemplo de miniatura de Divi Child que suelo manejar:

Aquí están los tres archivos que tu carpeta de temas debería tener:

Sube y activa tu Child Theme

Una vez que hayas creado los archivos style.css y functions.php, tienes que comprimirlos en un único archivo .zip de nombre «Divi-child.zip» y cuando lo tengas tu tema estará listo para cargar y activar.
En este punto, asegúrate de que su tema Divi se haya cargado para que tu Tema hijo funcione después de la activación.

Si agregaste la carpeta de tu tema secundario y los archivos directamente al directorio de Temas de WordPress, no es necesario cargar el tema a WordPress. Ya está ahí. Todo lo que necesitas hacer es ir al panel de WordPress y navegar a Apariencia> Tema, desplazarte sobre el tema de su hijo y hacer clic en el botón Activar.

Si simplemente creaste la carpeta y los archivos de temas secundarios en tu computadora, no olvides que primero deberás comprimir la carpeta (ZIP) para que esté en el formato adecuado para cargar en WordPress.

Una vez que tu carpeta está comprimida, cargarla y activarla no es diferente de un tema normal, simplemente cárgala a través de la página Apariencia> Temas en tu Tablero de WordPress y actívela.

Para probar si tu tema hijo está funcionando correctamente, agrega algo de CSS en el archivo style.css del tema hijo y guarda los cambios. Deberías ver esos cambios en el sitio en vivo. Es posible que tengas que abrir tu página en un navegador privado en caso de que esté en caché.

Migración del código / CSS personalizado actual a tu nuevo tema hijo

Después de crear tu tema Divi Child, querrás asegurarte de que todo esté en un solo lugar. Por lo tanto, si ya tiene CSS o código personalizado agregado a Divi, debes migrarlo a tu tema secundario. Por ejemplo, si tiene CSS personalizado en Divi> Personalizador de tema> CSS adicional, todo lo que deberás hacer es mover (cortar y pegar) el CSS al archivo style.css del child theme.

Actualizando tu Child Theme

Divi y WordPress continuamente se están mejorando y adaptando. Por lo tanto, puede llegar un momento (después de muchas actualizaciones de Divi) en el que algunos de los archivos de Divi cambien.

Y, si tienes un tema secundario que reemplaza al archivo que se ha modificado, tu tema secundario puede interrumpirse de alguna manera. Esto se debe a que estás utilizando un código desactualizado y debe actualizarse para que coincida con el nuevo código que utiliza Divi.

Por lo tanto, si has estado usando un tema secundario por un tiempo y las cosas están empezando a fallar, es posible que debas actualizar tu código.

Creo que con esta publicación tendrás un resumen paso a paso muy concreto para conseguir tu tema hijo sin complicaciones…

Espero haber contribuido a aclarar tus dudas y espero escuchar tus comentarios al respecto.