Cómo crear el child theme desde cero
¿Qué vas a tener al terminar esta lección?
Antes de arrancar, mirá el resultado final que vas a lograr — 2 archivos creados en VSC y el child theme activo en WordPress:
⚙️ La herramienta que vamos a usar: Visual Studio Code
En este curso vamos a usar Visual Studio Code (VSC) para crear y editar todos los archivos. Es gratuito y es el editor que usan millones de desarrolladores en todo el mundo.
| Opción | Programa | ¿Lo usamos? |
|---|---|---|
| ✅ Elegida | Visual Studio Code — gratuito, multiplataforma | Sí — este usamos en todo el curso |
| Alternativa | Notepad++ (solo Windows) | Solo si no podés instalar VSC |
| ❌ Evitar siempre | Microsoft Word, WordPad, Google Docs | Nunca — agregan formato invisible que rompe los archivos |
Paso a paso — Creá el child theme completo
Abrí tu proyecto en VSC con «Open Folder»
Abrí Visual Studio Code. Hacé clic en «Open Folder» (Abrir carpeta) y navegá hasta la carpeta raíz de tu WordPress en Laragon:
C:laragon/www/wp-learnpress
VSC te muestra el árbol de carpetas en el panel izquierdo. Desde ahí navegás a wp-content → themes.
Creá la carpeta
divi-lms-child dentro de themesEn el panel izquierdo de VSC, ubicá la carpeta wp-content/themes/. Hacé clic derecho sobre themes y elegí «New Folder»:
divi-lms-child
divi-lms-child — todo en minúsculas, con guiones, sin espacios ni mayúsculas. WordPress es sensible al nombre.Verificá que la carpeta aparece vacía en VSC
En el panel izquierdo deberías ver la nueva carpeta bajo themes. Está vacía por ahora — eso es correcto:
🎨 Creá el primer archivo: style.css
Creá el archivo
style.css dentro de divi-lms-childHacé clic derecho sobre la carpeta divi-lms-child → «New File» → escribí el nombre → Enter:
style.css
El archivo se abre automáticamente en el editor a la derecha. Está vacío — ahora pegamos el contenido.
Pegá este contenido en
style.cssHacé clic dentro del archivo en VSC y pegá el siguiente contenido con CTRL+V:
/* Theme Name: Divi LMS Child Theme URI: https://tusitio.com Description: Child theme profesional para crear una plataforma LMS con Divi y LearnPress Author: Tu Nombre Author URI: https://tusitio.com Template: Divi Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: divi-lms-child */
📌 ¿Qué significa cada línea?
| Línea | Para qué sirve | ¿Podés cambiarla? |
|---|---|---|
Theme Name: |
El nombre que aparece en el panel de WordPress | ✅ Sí |
Template: Divi |
MUY IMPORTANTE — le dice a WordPress que Divi es el tema padre | ❌ No — debe decir exactamente Divi |
Version: |
Para llevar un registro de cambios de tu tema | ✅ Sí |
Author: |
Tu nombre como creador | ✅ Sí — ponés tu nombre |
Description: |
Descripción breve que aparece en el panel | ✅ Sí |
Guardá con CTRL + S. VSC muestra un punto naranja en la pestaña cuando hay cambios sin guardar — si desapareció, el archivo está guardado.
⚙️ Creá el segundo archivo: functions.php
Creá el archivo
functions.php dentro de divi-lms-childIgual que antes: clic derecho sobre la carpeta divi-lms-child → «New File» → escribí el nombre → Enter:
functions.php
functions.php — con la extensión .php, todo en minúsculas, sin espacios.Pegá este contenido en
functions.phpCon el archivo abierto en VSC, pegá todo el siguiente contenido:
<?php
/**
* Divi LMS Child Theme - Functions
*
* Este archivo es el "cerebro" del child theme.
* WordPress lo ejecuta en cada página del sitio.
*/
// =============================================
// 1. CARGAR LOS ESTILOS DEL TEMA PADRE (DIVI)
// =============================================
add_action( 'wp_enqueue_scripts', 'divi_lms_child_enqueue_styles' );
function divi_lms_child_enqueue_styles() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
}
// =============================================
// 2. VERIFICAR QUE DIVI Y LEARNPRESS ESTÉN ACTIVOS
// =============================================
add_action( 'admin_notices', 'divi_lms_child_check_requirements' );
function divi_lms_child_check_requirements() {
if ( get_template() !== 'Divi' ) {
echo '<div class="notice notice-error"><p><strong>Divi LMS Child:</strong> Este child theme requiere Divi como tema padre.</p></div>';
}
if ( ! class_exists( 'LearnPress' ) ) {
echo '<div class="notice notice-warning"><p><strong>Divi LMS Child:</strong> Se recomienda instalar y activar LearnPress.</p></div>';
}
}
// =============================================
// FIN DEL ARCHIVO
// =============================================
📌 ¿Qué hace este código?
- ✅ Carga los estilos de Divi — sin esto el sitio quedaría completamente sin diseño
- ✅ Si Divi no está activo → aparece un aviso rojo en el panel de WordPress
- ✅ Si LearnPress no está instalado → aparece un aviso amarillo
No necesitás entender cada línea ahora. En la lección siguiente lo explicamos todo. Por ahora simplemente copialo y pegalo.
Guardá con CTRL + S.
🔍 Verificá que los 2 archivos están creados
Revisá el panel izquierdo de VSC
Dentro de la carpeta divi-lms-child en el panel izquierdo deberías ver exactamente esto:
Si ves esos 2 archivos, ¡perfecto! Estás listo para activar el child theme en WordPress.
✅ Activá el child theme en WordPress
Entrá al panel de WordPress → Apariencia → Temas
http://wp-learnpress.test/wp-admin/themes.php
En el menú izquierdo: Apariencia → Temas.
Buscá «Divi LMS Child» y hacé clic en «Activar»
En la pantalla de temas buscá la miniatura de «Divi LMS Child». Pasá el mouse encima → aparecen 2 botones → hacé clic en «Activar».
💡 ¿No aparece en la lista? Verificá:
- La carpeta se llame exactamente
divi-lms-child - El archivo
style.cssexista dentro de esa carpeta - El
style.csstenga la líneaTemplate: Divi
Verificá que el sitio sigue viéndose igual
http://wp-learnpress.test
El sitio debe verse exactamente igual que antes de activar el child theme. Eso es correcto — hereda todo el diseño de Divi. Si se ve normal, el child theme está funcionando perfectamente.
🎉 ¿Cómo sé que todo funcionó bien?
✅ Señales de que todo está perfecto:
- El sitio se ve igual que antes — hereda el diseño de Divi
- En Apariencia → Temas aparece «Divi LMS Child» con la etiqueta «Activo»
- El Visual Builder de Divi sigue funcionando normalmente
- No hay mensajes de error en rojo en el panel de WordPress
🚨 Problemas comunes y cómo resolverlos
| Problema | Causa probable | Solución |
|---|---|---|
| El child theme no aparece en la lista | El nombre de la carpeta está mal escrito | En VSC: clic derecho sobre la carpeta → Rename → divi-lms-child |
| Aparece «Broken» o con error | Falta style.css o le falta Template: Divi |
Abrí style.css en VSC y verificá que esa línea exista exactamente |
| Al activar, el sitio queda en blanco | Error en functions.php |
Copiá nuevamente el contenido del paso 7 y guardalo en VSC |
| Aparece aviso «requiere Divi» | El tema padre no es Divi | Instalá y activá Divi antes de activar el child theme |
| El Visual Builder dejó de funcionar | Conflicto en functions.php |
Volvé al functions.php del paso 7, copialo de nuevo y guardá |
🎯 Resumen de esta lección
- Usamos Visual Studio Code para crear y editar todos los archivos
- El child theme es una carpeta con 2 archivos:
style.cssyfunctions.php - La carpeta se crea en
wp-content/themes/divi-lms-child/ - En
style.cssla líneaTemplate: Divies obligatoria e inamovible - El
functions.phpcarga los estilos de Divi y verifica los plugins requeridos - Se activa desde WordPress → Apariencia → Temas → Activar
- Después de activarlo, el sitio se ve igual — eso es correcto y esperado
Módulo 01 · Lección 2 de 3 |
Siguiente: Lección 3 → ¿Qué hace cada archivo que creaste?
1 Comentario
si funciono correctamente