¿Qué es un Child Theme en WordPress?

Un Child Theme (Tema Hijo) es una copia modificable de un Parent Theme (Tema Padre). Sirve para personalizar un tema sin modificar directamente sus archivos, lo que permite mantener las actualizaciones del tema padre sin perder cambios.

---

📌 Paso 1: Crear la Carpeta del Child Theme

1️⃣ Ve a la carpeta wp-content/themes/ en tu instalación de WordPress.
2️⃣ Crea una nueva carpeta con el nombre del tema padre + -child. Ejemplo:

hestia-child

📌 Paso 2: Crear el archivo style.css del Tema Hijo

1️⃣ Dentro de la carpeta del Child Theme (hestia-child), crea un archivo llamado style.css.
2️⃣ Agrega este código dentro de style.css:

/*
Theme Name: Hestia Child
Theme URI: https://tudominio.com
Description: Tema hijo de Hestia
Author: Tu Nombre
Author URI: https://tudominio.com
Template: hestia
Version: 1.0.0
*/

⚠️ IMPORTANTE:

• Template: hestia debe ser exactamente el nombre de la carpeta del tema padre (sin errores).
• Si el tema padre se llama oceanwp, pon Template: oceanwp.

📌 Paso 3: Crear el archivo functions.php

1️⃣ En la misma carpeta del Child Theme (hestia-child), crea un archivo llamado functions.php.
2️⃣ Abre functions.php y agrega este código para cargar los estilos correctamente:

<?php
function child_theme_styles() {
    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'));
}
add_action('wp_enqueue_scripts', 'child_theme_styles');

💡 Esto soluciona el problema de que los estilos no se aplican correctamente.

---

📌 Paso 4: Activar el Tema Hijo en WordPress

1️⃣ Ve al Escritorio de WordPress → Apariencia → Temas.
2️⃣ Debería aparecer el nuevo tema hijo (Hestia Child).
3️⃣ Actívalo y revisa que el sitio funcione correctamente.

📌 Paso 5: Personalizar el Tema Hijo

✅ Puedes modificar archivos de plantilla, por ejemplo:

• Para modificar el header.php, cópialo desde hestia a hestia-child y edítalo.
• Puedes añadir código CSS en el style.css del Child Theme.

Ejemplo:

body {
    background-color: #f4f4f4;
}

🔥 Solución si los Estilos No Funcionan

Si después de activar el tema hijo, el sitio no carga los estilos, prueba lo siguiente:

1️⃣ Verifica que Template: en style.css sea correcto (debe coincidir con la carpeta del tema padre).
2️⃣ Borra la caché del navegador y del plugin de caché si usas uno.
3️⃣ Asegúrate de que el archivo functions.php del Child Theme tenga el código correcto para cargar estilos.
4️⃣ Revisar la Consola de Errores en el navegador (F12 → Consola) para ver si hay errores en la carga de CSS.