Creación de tema hijo con Divi: guía paso a paso

¿Por qué los temas hijo?

La razón más importante para crear un tema hijo es preservar las modificaciones que se realizan al actualizar el tema.

Cada vez que actualices Divi, todos los archivos de tema se actualizan, así que si has hecho algún cambio en estos archivos, perderás esos cambios.

Nosotros siempre desarrollamos en temas hijo, es un «must» que no dejamos pasar. 

Componentes mínimos que forman un tema hijo

A nivel más básico, un tema hijo debe contener estos tres componentes ( y uno recomendable):

1. Una carpeta con el nombre del tema hijo. Esta carpeta está con el resto de temas dentro de la carpeta Themes de WordPress
2. Un archivo style.css (que se utilizará para almacenar los estilos específicos del el tema hijo)
3. Un archivo functions.php – antes no era obligatrorio, ahora tiene que estar para contener la acción wp_enqueue_scripts que encola los estilos del tema principal
4. Imagen del tema, este no es obligatorio, pero es recomendable.

Dicho esto, vamos a comenzar con los pasos a seguir…

Paso 1: Creamos la carpeta con el tema hijo

En estos casos yo trabajo primero en local, tengo configurado mi Sublime Text 3 para conectarse por SFTP a mi servidor, con lo cual realizo los cambios en local y luego los subo al servidor con un golpe de teclado.

Para crear una nueva carpeta para el tema hijo directamente en WordPress, necesitarás acceder a los archivos de tema ubicados en la carpeta Temas de WordPress (wp-content/themes/), repito yo accedo a mi setup en local.

En tu entorno local crea una nueva carpeta dentro de la carpeta de temas y ponle el nombre que desees, en mi caso le puse  «Vidal». Así que el nuevo directorio del tema hijo es wp-content/themes/Vidal

Paso 2: Creamos el fichero style.css

 
[gist id=386ad2fb0faad3d6318239e48a515fff]

Debes asegurarte de que el parámetro «Template:» identifica correctamente el nombre de directorio del tema principal, en este caso «Divi».

El tema Nombre, URI, Descripción y Autor depende totalmente de lo que quieras poner, es «meta-información». Puedes personalizar esta información de cabecera como desees.

En mi caso mi tema hijo se llama «Vidal» , por eso pongo ese nombre. Como he escrito con anterioridad, yo utilizo Sublime Text 3 como editor para estas tareas. 

Paso 3: Creamos el fichero functions.php

Ahora que tenemos nuestro archivo style.css para nuestro tema hijo en su lugar, necesitamos asegurarnos de no omitir completamente el estilo que ya está en su lugar dentro de Divi (el tema padre).

Esto significa que tendremos que asegurarnos de que usamos la hoja de estilo del tema padre Divi primero y luego presentar nuestra nueva hoja de estilo. Este orden es importante porque si estás familiarizado con CSS, el código que introduzcas en la parte inferior siempre tendrá prioridad sobre el código en la parte superior. Así que, en nuestro caso, queremos que el código de la hoja de estilo padre se cargue primero y luego el código de la hoja de estilo hijo al final, para que  cualquier cosa que agreguemos a la hoja de estilo de nuestro tema hijo se añada y reemplace al estilo del tema padre.

Hace tiempo el concatenado de estilos se hacía mediante un @import en el mismo css style.css, pero esto está «deprecado» ( en desuso) . Actualmente esto se implemente en el fichero functions.php 

Para hacer esto, necesitaremos usar nuestro editor de texto para crear otro archivo dentro de la carpeta de temas hijo. Debes guardar el archivo con el nombre functions.php (el nombre debe ser exactamente este) y luego agregas el siguiente código al archivo:

[gist id=2eb86c0fd98ee690520c9e8f4d88c0d7]

Paso 4: Creamos el fichero con la imagen «Thumbnail»

Este paso es opcional. 

Para crear una miniatura para tu tema hijo, primero crea una imagen (se recomienda un tamaño de 880px de ancho por 660px de alto) y guárdala con el nombre del archivo screenshot.png (el nombre del archivo debe ser exactamente así para que WordPress lo reconozca). A continuación, añádelo a la carpeta de temas hijo junto a los dos archivos que ya están allí. 

Paso 5: subimos los ficheros al servidor y activamos tema

Si no has subido los ficheros al servidor, ejecuta un SFTP para llevarlos a tu servidor y así sea posible activar el tema.

Una vez llevados al servidor, entramos en la administración y en la pestaña «Apariencia – Temas» seleccionamos nuestro tema hijo, que tendrá el screenshot que hemos subido previamente.

Si no hay ningún error en los ficheros que hemos subido podremos activar sin problema, y ya tendremos el tema hijo para realizar todas las modificaciones que deseemos sin restricción. 

Conclusión

Hemos explicado paso a paso como crear un tema hijo y como subirlo al server. Una vez tenemos correctamente instalado el tema hijo, podemos realizar personalizaciones profundas del tema, modificando el fichero php que necesitemos de nuestro Divi, sin perder ni una de las actualizaciones de Elegant Themes para Divi

Esta es la forma correcta de desarrollar diseños con Divi y WordPress.

Por ejemplo, podrías copiar el header.php y modificar el menú de Divi para añadir más elementos, o añadir nuevos menús.

Espero tus comentarios.