¬ŅConoces que es un Child Theme? ¬ŅPor qu√© es importante y cu√°ndo utilizarlo?
Si no, no te preocupes. En esta guía completa sobre ChildTheme te explicaremos qué es y cuándo utilizarlo.

¬ŅQu√© es un Child Theme?

Un Child Theme es un tema hijo, un tema que se crea a partir de un Framework, en nuestro caso ser√° de Divi.

“Es un tema secundario que hereda las funciones y estilos de otro tema, llamado tema principal”. WordPress Codex
El tema principal o tema padre es un tema creado y empaquetado por desarrolladores PHP, HTML, JavaScript y CSS.
El tema secundario o tema hijo, es un tema que se puede crear o se puede comprar de terceras tiendas, como DiviLife, DiviLover, DiviSpace, etc.

Portada de nuestro child theme

¬ŅPor qu√© un Child Theme?

Existen muchos beneficios a un tema hijo, pero los principales son dos:

  • Sin un tema hijo puedes botar tu sitio web por la modificaci√≥n en el c√≥digo principal.
  • Sin un tema hijo todas tus modificaciones se desaparecen en la pr√≥xima actualizaci√≥n.

Con un Framework puedes crear sitios excepcionales. Recordemos que Divi, al ser un Tema, puede ser utilizado como un framework para realizar modificaciones, ediciones y creación de módulos.

Dentro del tema Divi, una de las mayores restricciones es la modificación de la página 404, Footer, Header y Widgets. Pero con código puedes eliminar estas restricciones o bien, comprando plugins.

error 404 en divi nuestra pagina default del child theme

Ahora sí, como crear un tema hijo (child theme)

Se puede crear un tema hijo de tres maneras:

  • De la forma manual.
  • Con un generador de temas hijos.
  • Con un plugin.

Método 1: Creando un tema hijo de forma manual.

Para traer a la vida a un tema hijo es necesario de 3 elementos principales:

  • Directorio del tema padre.
  • Hoja de estilos –> Style.css
  • Archivo de funciones –> funtions.php

Paso 1: crear el directorio en la carpeta de temas.

Recuerda crear la carpeta en la direcci√≥n de tu WordPress por medio del Administrador de Archivos de tu Hosting o bien, por medio de FTP. Generalmente est√° en Public_Html –> wp-content –> themes

Themes wordpress y child theme divi

Paso 2: crear un archivo llamado “style.css” sin las comillas. Utilizar un editor de texto como Sublime Text, Atom u otro. En mi caso, estoy utilizando Sublime Text. Escribimos el siguiente texto:

/*

Theme Name:   Divicon 
Theme URI:    https://divicon.net
Description:  Tema creado por y para Divicon.net. Tutoriales sobre Divi y m√°s.
Author:       Divicon
Author URI:   https://divicon.com 
Template:     Divi
*/

Lo importante en este código es que puedes editar todo, excepto los textos de los layouts (Theme Name, Theme URI, Description, etc.) ni Template: Divi.

El layout Theme Name es el nombre que aparece en los temas instalados en WordPress y Template le indica a WordPress quien es el tema padre. OJO, si se modifica “Template: Divi” no funcionar√° la creaci√≥n del tema hijo.

Paso 3: crear el archivo llamado “functions.php” sin las comillas.¬†Utilizar un editor de texto como Sublime Text, Atom u otro. En mi caso, estoy utilizando Sublime Text. Escribimos el siguiente texto:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Este código enlazará el archivo functions.php del tema hijo al functions.php del tema padre.

Paso 4: crear el branding de tu tema hijo

Para ello, necesitamos un archivo con el nombre “screenshot.png” o “screenshot.jpg” sin las comillas. Este es el nuestro:

Nombre de la portada de nuestro child theme sceenshot.png

Bueno, hemos terminado de hacer nuestro ChildTheme. Nuestra carpeta en el servidor debería tener los siguientes archivos:

Y queda nuestro Child Theme.

Tambi√©n puedes crear una carpeta en tu computadora y comprimirla en formato .zip ir a Apariencia –> Temas –> Subir Tema y seleccionas el archivo reci√©n creado.

Instalacion del child theme desde un zip

Método 2: Generador automático de Temas Hijo

Esta es la forma sencilla de crear los archivos style.css y functions.php.

Paso 1: Ingresar al siguiente link.

–> Link: Generador de Temas Hijo de Divi Space

Al ingresar al link tienes los siguientes campos para llenar:

Paso 2: llenamos los campos de Información general del Tema Hijo.

formulario para crear nuestro child theme

Paso 3: subimos nuestro screenshot.

screenshot para nuestro theme child

Paso 3: Configuración del Tema Hijo.

Configuracion de nuestro thema hijo (childtheme)

El correo que coloquemos al final ser√° para descargar los archivos.

Descargamos el archivo que se habr√° enviado a nuestro correo electr√≥nico e instalamos el .zip de la misma forma en que se instala un tema¬†–> Apariecna –> Temas –> A√Īadir nuevo –> Subir.

Instalando nuestro thema hijo o child theme desde un archivo comprimido

La mejor parte de de esta forma de crear ChildThemes es que puede crear un Login Personalizado. Recomendado para dar a conocer tu branding ūüėČ

login personalizador para nuestro theme

Método 3: Plugins

La instalación de Plugins para crear Temas Hijo es la forma más sencilla de proceder. Existen muchos plugins dedicados a la tarea. Mira los siguientes plugins gratuitos:

  • Child Theme Configurator
  • Div Children¬†
    • Divi Children te da opciones nuevas en el personalizador. Es la mejor opci√≥n si deseas personalizar Footer, √≠conos sociales, barra lateral, header y m√°s.

¬°Listo! Haz creado tu propio Child Theme o Tema Hijo. Ahora puedes crear tus propios Child Themes y poder experimentar hasta volverte un experto y poder vender tus creaciones.

Si este tutorial te ha gustado, por favor, comp√°rtelo.

¬ŅTe parece interesante este art√≠culo?
Puntaje
[Total: 4 Average: 4.8]

Mi nombre es Carlos Tum, originario de Guatemala. Soy un emprendedor que inici√≥ una peque√Īa empresa llamada Grupo Digit con base al dise√Īo web, publicidad digital y branding. He trabajado con WordPress y Divi desde el inicio de mi empresa. Un placer.

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares