WEBGAE
Contacto

Cómo Crear un Child Theme en WordPress desde Cero (y Por Qué Es Fundamental)

Cómo Crear un Child Theme en WordPress desde Cero (y Por Qué Es Fundamental)

Si alguna vez has personalizado un theme de WordPress directamente y luego has perdido todos tus cambios al actualizarlo, este artículo es para ti. Hoy vamos a ver cómo crear un child theme desde cero y entender por qué es una práctica esencial en el desarrollo con WordPress.

¿Qué es un Child Theme y por qué lo necesitas?

Un child theme (tema hijo) es un tema que hereda toda la funcionalidad y estilos de otro tema, llamado parent theme (tema padre). La gran ventaja es que puedes hacer todas las modificaciones que quieras en el child theme sin tocar ni una línea del tema padre.

¿Por qué es tan importante?

Imagina que has pasado horas personalizando el CSS de tu theme, modificando plantillas y ajustando funciones. Llega una actualización del theme con mejoras de seguridad o nuevas características, la instalas y… boom. Todas tus personalizaciones desaparecen. Esto pasa porque la actualización sobrescribe los archivos que modificaste.

Con un child theme, tus personalizaciones están seguras en archivos separados. El theme padre se actualiza sin problemas y tus cambios permanecen intactos.

Requisitos previos

Antes de empezar, necesitas:

  • Acceso a los archivos de tu WordPress (vía FTP, cPanel o administrador de archivos)
  • Un theme padre instalado (usaremos Twenty Twenty-Four como ejemplo)
  • Conocimientos básicos de CSS y PHP (aunque no te preocupes, lo explicaré paso a paso)

Paso 1: Crear la estructura de carpetas

Lo primero es crear una carpeta para tu child theme. Conecta a tu servidor y navega hasta:

/wp-content/themes/

Crea una nueva carpeta. El nombre debe ser descriptivo y sin espacios. Por ejemplo, si tu theme padre es «twentytwentyfour», puedes llamarlo:

twentytwentyfour-child

Paso 2: Crear el archivo style.css

Dentro de la carpeta de tu child theme, crea un archivo llamado style.css. Este es el único archivo obligatorio para que WordPress reconozca tu child theme.

Añade el siguiente código al inicio del archivo:

/*
Theme Name:   Twenty Twenty-Four Child
Theme URI:    https://tusitio.com/
Description:  Child theme de Twenty Twenty-Four
Author:       Tu Nombre
Author URI:   https://tusitio.com
Template:     twentytwentyfour
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentytwentyfour-child
*/

Importante: La línea Template: debe coincidir exactamente con el nombre de la carpeta del theme padre. Este es el campo más crítico, ya que le dice a WordPress de qué theme heredar.

Paso 3: Crear el archivo functions.php

Ahora crea un archivo functions.php en la misma carpeta. Este archivo es crucial porque aquí le diremos a WordPress que cargue los estilos del theme padre correctamente.

Añade este código:

<?php
function child_theme_enqueue_styles() {
    // Carga el style.css del theme padre
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    
    // Carga el style.css del child theme
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');
?>

Este código hace dos cosas importantes: primero carga los estilos del theme padre y luego los del child theme, asegurando que tus personalizaciones tengan prioridad.

Paso 4: Activar tu Child Theme

Ve al panel de administración de WordPress, navega a Apariencia > Temas y deberías ver tu nuevo child theme listado. Haz clic en «Activar».

¡Felicidades! Ya tienes un child theme funcionando.

Personalizando tu Child Theme

Ahora viene lo divertido. Aquí es donde puedes empezar a personalizar sin miedo.

Añadir estilos personalizados

En tu style.css, debajo de la cabecera de comentarios, puedes añadir cualquier CSS personalizado:

/* Estilos personalizados */
body {
    font-family: 'Montserrat', sans-serif;
}

.site-header {
    background-color: #1a1a1a;
    padding: 20px 0;
}

h1, h2, h3 {
    color: #2c5282;
}

Estos estilos sobrescribirán los del theme padre gracias al orden de carga que establecimos en functions.php.

Modificar plantillas

Si necesitas cambiar cómo se muestra algo estructuralmente, puedes copiar archivos de plantilla del theme padre a tu child theme.

Por ejemplo, para modificar el header:

  1. Copia el archivo header.php de la carpeta del theme padre
  2. Pégalo en la carpeta de tu child theme
  3. Modifícalo como necesites

WordPress usará automáticamente tu versión en lugar de la del padre.

Importante: Solo copia los archivos que realmente necesitas modificar. Cuantos menos archivos copies, más fácil será mantener tu sitio actualizado.

Añadir funciones personalizadas

El archivo functions.php de tu child theme es perfecto para añadir funcionalidad adicional. Por ejemplo:

// Añadir tamaños de imagen personalizados
add_image_size('custom-size', 800, 600, true);

// Registrar un área de widgets
function child_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'Sidebar Personalizado',
        'id'            => 'custom-sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));
}
add_action('widgets_init', 'child_theme_widgets_init');

// Cambiar el largo del excerpt
function custom_excerpt_length($length) {
    return 30;
}
add_filter('excerpt_length', 'custom_excerpt_length');

Buenas prácticas y consejos

1. Nombra tus funciones de forma única

Añade un prefijo a todas tus funciones para evitar conflictos:

function michildtheme_custom_function() {
    // tu código
}

2. Documenta tu código

Añade comentarios explicando qué hace cada sección. Tu yo del futuro te lo agradecerá:

// Desactiva el editor de bloques para posts
add_filter('use_block_editor_for_post', '__return_false');

3. No sobrescribas todo

Antes de copiar un archivo de plantilla, pregúntate si puedes lograr lo mismo con hooks y filters. Es más mantenible a largo plazo.

4. Mantén un registro de cambios

Crea un archivo CHANGELOG.md en tu child theme documentando las modificaciones que haces. Será invaluable cuando necesites recordar por qué hiciste algo hace seis meses.

5. Usa control de versiones

Si trabajas en proyectos serios, considera usar Git para tu child theme. Te permitirá revertir cambios si algo sale mal.

Estructura de archivos recomendada

Con el tiempo, tu child theme puede crecer. Una estructura organizada te ahorrará dolores de cabeza:

twentytwentyfour-child/
├── style.css
├── functions.php
├── screenshot.png (opcional, para mostrar una imagen del theme)
├── assets/
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   │   └── custom.js
│   └── images/
├── template-parts/
│   └── content-custom.php
└── inc/
    ├── custom-functions.php
    └── custom-hooks.php

Si sigues esta estructura, puedes cargar archivos adicionales desde functions.php:

// Cargar archivos CSS y JS adicionales
function child_theme_scripts() {
    wp_enqueue_style('custom-css', 
        get_stylesheet_directory_uri() . '/assets/css/custom.css', 
        array('child-style')
    );
    
    wp_enqueue_script('custom-js', 
        get_stylesheet_directory_uri() . '/assets/js/custom.js', 
        array('jquery'), 
        '1.0.0', 
        true
    );
}
add_action('wp_enqueue_scripts', 'child_theme_scripts');

// Incluir archivos de funciones adicionales
require_once get_stylesheet_directory() . '/inc/custom-functions.php';
require_once get_stylesheet_directory() . '/inc/custom-hooks.php';

Resolución de problemas comunes

Problema: El child theme no aparece en la lista de temas

Verifica que el campo Template: en style.css coincida exactamente con el nombre de la carpeta del theme padre.

Problema: Los estilos del padre no se cargan

Revisa que functions.php esté cargando correctamente el CSS del padre con wp_enqueue_style.

Problema: Aparece una pantalla blanca al activar el child theme

Probablemente hay un error de sintaxis en tu functions.php. Revisa que todas las etiquetas PHP estén correctamente abiertas y cerradas.

Problema: Los cambios no se reflejan en el sitio

Limpia la caché de WordPress, la caché del navegador y cualquier plugin de caché que tengas instalado.

Conclusión

Crear un child theme es una de las primeras cosas que deberías aprender al trabajar con WordPress. Te protege de perder trabajo, te da libertad total para personalizar y te mantiene alineado con las mejores prácticas de desarrollo.

Sí, requiere unos minutos de configuración inicial, pero ese tiempo se compensa con creces la primera vez que actualizas tu theme padre y todo sigue funcionando perfectamente.

La próxima vez que vayas a modificar un theme de WordPress, tómate esos cinco minutos para crear un child theme primero. Tu futuro yo te lo agradecerá.

¿Tienes alguna pregunta sobre child themes o has tenido alguna experiencia (buena o mala) trabajando con ellos? Me encantaría leerlo en los comentarios.

Recursos adicionales:

← Volver al Blog