Como crear un child theme en WordPress con PHP en WordPress

Introducción

Un child theme en WordPress es un tema que hereda la funcionalidad y el estilo de otro tema (llamado parent theme) y permite realizar modificaciones sin tocar los archivos del tema padre. Esto asegura que las actualizaciones del tema padre no borren tus cambios. A continuación se detalla, con todo lujo de detalles, cómo crear un child theme con PHP y buenas prácticas para mantener orden y compatibilidad.

Requisitos previos

• Tener un sitio WordPress instalado y acceso al sistema de archivos (FTP, SFTP o administrador de archivos del hosting).
• Conocer el nombre de la carpeta del tema padre (por ejemplo: twentytwentyone, astra, etc.).
• Editor de texto (VSCode, Sublime, Notepad …).

Pasos básicos para crear un child theme

1. Crear la carpeta del tema hijo

   En wp-content/themes crea una carpeta con el nombre de tu tema hijo, por ejemplo: mi-tema-hijo.

2. Crear el archivo style.css del child theme

   Este archivo debe contener la cabecera del tema y, como mínimo, los campos Theme Name y Template (el nombre de la carpeta del tema padre). Ejemplo:

   /
   Theme Name: Mi Tema Hijo
   Theme URI: https://example.com/mi-tema-hijo
   Description: Child theme basado en TemaPadre
   Author: Tu Nombre
   Author URI: https://example.com
   Template: tema-padre-folder-name
   Version: 1.0.0
   Text Domain: mi-tema-hijo
   /

   Importante: la línea Template debe coincidir exactamente con el nombre de la carpeta del tema padre en wp-content/themes.

3. Crear functions.php en el child theme

   En lugar de usar @import (obsoleto y menos eficiente), la práctica recomendada es encolar el stylesheet del tema padre desde el functions.php del tema hijo. A continuación un ejemplo robusto y compatible:

   parent()->get(Version) )
   
       // Encolar estilo del child theme, estableciendo el padre como dependencia
       wp_enqueue_style( mi-tema-hijo-style, get_stylesheet_directory_uri() . /style.css, array( parenthandle ), theme->get(Version) )
   }

   Explicación breve:

   • get_template_directory_uri() apunta al directorio del tema padre.
   • get_stylesheet_directory_uri() apunta al directorio del tema activo (en este caso el child).
   • wp_get_theme() se usa para obtener versiones y evitar problemas de caché.
4. Activar el child theme

   Ve a Apariencia → Temas en el panel de WordPress y activa tu tema hijo. Si todo está correcto, el child theme cargará el CSS del padre y el propio.

Detalles técnicos y buenas prácticas

• Orden de carga de functions.php: WordPress carga primero el functions.php del tema padre y luego el del child. Esto permite que el child theme pueda registrar acciones y filtros que se ejecuten después de las del padre, o eliminar (remove_action) acciones agregadas por el padre.
• No intentes sobrescribir funciones PHP definidas en el padre que no están envueltas en function_exists: si el tema padre define una función sin comprobación, no podrás redeclararla en el child. Solución: usar hooks (add_action / add_filter) o solicitar al autor del tema padre que use function_exists o filters.
• Sobrescritura de plantillas: Para sobrescribir un archivo de plantilla (por ejemplo header.php, single.php, archive.php), copia el archivo desde la carpeta del tema padre a la carpeta del child y modifícalo ahí. WordPress usará el archivo del child en lugar del del padre.
• Recursos estáticos (imágenes, JS, CSS adicionales): Colócalos en la carpeta del child y encola con get_stylesheet_directory_uri(). Ejemplo:

  wp_enqueue_script( mi-script, get_stylesheet_directory_uri() . /js/mi-script.js, array(jquery), 1.0.0, true )

• Internacionalización: Si traduces cadenas en el child theme, pon los archivos .pot/.po/.mo en la carpeta languages del child y carga el dominio de texto con load_child_theme_textdomain(). Ejemplo:

  add_action( after_setup_theme, mi_tema_hijo_setup )
  function mi_tema_hijo_setup() {
      load_child_theme_textdomain( mi-tema-hijo, get_stylesheet_directory() . /languages )
  }

• Capturas y metadatos: Puedes añadir screenshot.png (1200×900 recomendado) en la raíz de la carpeta del child para que aparezca la vista previa en Apariencia → Temas.

Ejemplos prácticos

1) style.css mínimo

/
Theme Name: Mi Tema Hijo
Template: tema-padre-folder-name
/

2) functions.php completo de ejemplo

parent()->get(Version) )

    wp_enqueue_style( mi-tema-hijo-style, get_stylesheet_directory_uri() . /style.css, array( parenthandle ), theme->get(Version) )
}

// Ejemplo: añadir una función que modifique el título del pie de página
add_filter( wp_footer, mi_tema_hijo_footer_text )
function mi_tema_hijo_footer_text( content ) {
    // Evitar sobrescribir si el padre ya imprime algo complejo: mejor usar hooks específicos
    echo 
Tema hijo activo
}

3) Sobrescribir header.php

Copia wp-content/themes/tema-padre/header.php a wp-content/themes/mi-tema-hijo/header.php y edítalo. WordPress usará el header.php del child en lugar del del padre.

Errores comunes y cómo solucionarlos

• El child no carga el CSS del padre: Comprueba que la línea Template en style.css coincide exactamente con el nombre de la carpeta del tema padre y que el functions.php encola correctamente el estilo del padre.
• Funciones duplicadas (PHP fatal error): Ocurre si intentas redeclarar una función ya declarada en el padre. Usa hooks o verifica function_exists en el padre (o evita redeclararla).
• Assets (imágenes/JS) no se encuentran: Asegúrate de usar get_stylesheet_directory_uri() para archivos del child y get_template_directory_uri() para archivos del padre.
• El tema hijo aparece vacío o roto: Revisa errores de sintaxis en PHP (functions.php) y en el CSS (style.css). Activa WP_DEBUG en entorno de desarrollo para ver errores.

Buenas prácticas adicionales

• Usa prefijos únicos para funciones y handles de scripts/estilos para evitar colisiones.
• Documenta los cambios realizados en el child (README.txt, comentarios en los archivos).
• Mantén el child lo más pequeño posible: si necesitas muchos cambios, valora convertirlo en un tema personalizado propio si difiere mucho del padre.
• Si el tema padre utiliza un framework o builder, revisa su documentación para saber cómo encolar y sobrescribir estilos correctamente (a veces el padre usa un handle distinto o carga CSS desde compilados).

Resumen rápido

1. Crear carpeta del child en wp-content/themes.
2. Añadir style.css con cabecera y Template apuntando al tema padre.
3. Crear functions.php para encolar estilos del padre y del child.
4. Copiar y modificar plantillas del padre en la carpeta del child cuando sea necesario.
5. Activar el tema hijo desde Apariencia → Temas.

Enlaces útiles

• Documentación oficial de WordPress sobre child themes

Conclusión

Crear un child theme correctamente te permite personalizar un tema sin perder actualizaciones y con buenas prácticas. Usa el encolado de estilos desde functions.php en lugar de @import, respeta el orden de carga de funciones, y sobrescribe sólo las plantillas o funciones necesarias. Aplicando las recomendaciones y ejemplos anteriores tendrás un child theme robusto, fácil de mantener y compatible con futuros cambios del tema padre.

	Acepto donaciones de BAT's mediante el navegador Brave 🙂