Crear child theme en WordPress con DirectAdmin: tutorial

¿Quieres darle un toque único a tu sitio web sin perder las actualizaciones del tema principal? Crear un child theme WordPress es la solución perfecta. Un tema hijo te permite personalizar tu web de forma segura, manteniendo todas las mejoras y parches de seguridad del tema padre. En esta guía paso a paso, te mostraré cómo hacerlo directamente desde DirectAdmin, el panel de control de tu hosting. No necesitas ser un experto técnico, solo seguir estas instrucciones claras.

¿Qué es un child theme y por qué usarlo?

Un child theme (tema hijo) es un tema que hereda todas las funciones y estilos de otro tema, llamado tema padre. La principal ventaja es que puedes modificar archivos (como CSS, PHP o plantillas) sin tocar el tema original. Así, cuando el tema padre se actualice, tus cambios no se perderán. Es como tener un cuaderno de apuntes donde escribes tus ideas, mientras el libro original se mantiene intacto.

Beneficios clave:

Seguridad: Las actualizaciones del tema padre no borran tus personalizaciones.
Flexibilidad: Puedes modificar cualquier aspecto visual o funcional.
Rendimiento: El child theme es ligero, ya que solo contiene los cambios.
Compatibilidad: Funciona con cualquier tema de WordPress de calidad.

Si estás usando DirectAdmin, el proceso es muy sencillo. Solo necesitas acceso a tu panel de hosting y un editor de texto básico.

Requisitos previos

Antes de empezar, asegúrate de tener:

Acceso a DirectAdmin con credenciales de usuario.
Un tema padre instalado y activo en tu WordPress (por ejemplo, Twenty Twenty-Four o Astra).
Conocimientos básicos de navegación por archivos (no te preocupes, lo guío paso a paso).
Opcional: un cliente FTP como FileZilla (aunque usaremos el administrador de archivos de DirectAdmin).

Paso 1: Accede a DirectAdmin y localiza tu sitio

Inicia sesión en DirectAdmin usando tu nombre de usuario y contraseña. Si no sabes cómo acceder, consulta el correo de bienvenida de tu hosting. Una vez dentro, busca la sección "Administrador de archivos" (File Manager). Haz clic en ella.

Nota importante: Si tu panel es Syspanel (antes conocido como HestiaCP), el acceso se realiza por el puerto 2106. Por ejemplo: https://tudominio.com:2106. Una vez dentro, el proceso es similar.

Dentro del administrador de archivos, navega hasta la carpeta de tu sitio web. Generalmente está en:
/home/tuusuario/domains/tudominio.com/public_html/

Si tu WordPress está en una subcarpeta (como /blog), ajusta la ruta. Busca la carpeta wp-content/themes. Ahí es donde viven todos tus temas.

Paso 2: Crea la carpeta del child theme

Dentro de wp-content/themes, crea una nueva carpeta. El nombre debe ser único y descriptivo. Por ejemplo, si tu tema padre se llama "Astra", puedes llamar a tu child theme "astra-child". Usa solo minúsculas, números y guiones.

Cómo hacerlo en DirectAdmin:

En la barra de herramientas del administrador de archivos, haz clic en "Crear carpeta".
Escribe el nombre (ejemplo: astra-child).
Haz clic en "Crear".

Ya tienes la carpeta de tu child theme. Ahora necesitas dos archivos esenciales: style.css y functions.php.

Paso 3: Crea el archivo style.css

El archivo style.css es el corazón de tu child theme. Aquí declaras la relación con el tema padre y añades tus propios estilos.

Pasos:

Dentro de la carpeta recién creada (ejemplo: astra-child), haz clic en "Crear archivo".
Nombra el archivo exactamente como style.css (sin espacios, todo en minúsculas).
Se abrirá un editor de texto. Pega el siguiente código:

/*
 Theme Name:   Astra Child
 Theme URI:    https://tudominio.com
 Description:  Tema hijo de Astra para personalizaciones
 Author:       Tu Nombre
 Author URI:   https://tudominio.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, two-columns, right-sidebar, flexible-header
 Text Domain:  astra-child
*/

/* Aquí van tus estilos personalizados */

Explicación de las líneas clave:

Theme Name: El nombre que verás en el panel de WordPress.
Template: IMPORTANTE – Debe coincidir exactamente con el nombre de la carpeta del tema padre. Por ejemplo, si el tema padre es "Astra", su carpeta se llama astra. Revisa en wp-content/themes para confirmar.
Version: Empieza con 1.0.0 y ve actualizándola.

Guarda el archivo haciendo clic en "Guardar cambios".

[TIP] Si no estás seguro del nombre exacto de la carpeta del tema padre, ve a wp-content/themes y busca la carpeta del tema que tienes activo. Copia ese nombre exacto en la línea Template.

Paso 4: Crea el archivo functions.php

El archivo functions.php del child theme se encarga de cargar los estilos del tema padre. Sin este archivo, tu child theme no funcionará correctamente.

Pasos:

En la misma carpeta astra-child, haz clic en "Crear archivo".
Nómbralo functions.php.
Pega el siguiente código:

<?php
/**
 * Funciones del tema hijo Astra Child
 */

function astra_child_enqueue_styles() {
    // Cargar el style.css del tema padre
    wp_enqueue_style( 'astra-parent-style', get_template_directory_uri() . '/style.css' );
    
    // Cargar el style.css del tema hijo (después del padre)
    wp_enqueue_style( 'astra-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'astra-parent-style' ), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'astra_child_enqueue_styles' );

Explicación:

get_template_directory_uri() obtiene la URL del tema padre.
get_stylesheet_directory_uri() obtiene la URL del child theme.
El tercer parámetro array( 'astra-parent-style' ) asegura que el CSS del hijo se cargue después del padre, para que tus estilos tengan prioridad.

Guarda el archivo. ¡Ya tienes la estructura básica!

Paso 5: Activa el child theme desde WordPress

Ahora ve al panel de administración de WordPress (generalmente tudominio.com/wp-admin).

En el menú lateral, ve a Apariencia > Temas.
Busca el nombre de tu child theme (por ejemplo, "Astra Child").
Haz clic en "Activar".

Si todo está correcto, tu sitio se verá exactamente igual que antes, pero ahora estás usando el child theme. Puedes verificarlo en la parte superior derecha del panel de temas.

[WARNING] Si al activar el child theme ves un error o la página se rompe, revisa que el nombre en la línea Template del style.css coincida exactamente con la carpeta del tema padre. También verifica que los archivos estén en la ubicación correcta.

Paso 6: Personaliza tu child theme

Ahora viene la parte divertida: añadir tus propios estilos y funciones.

Añadir CSS personalizado

Abre el archivo style.css de tu child theme y escribe tus reglas CSS debajo del comentario. Por ejemplo, para cambiar el color de los encabezados:

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

Guarda y recarga tu sitio para ver los cambios.

Añadir funciones PHP

Si necesitas modificar el comportamiento de WordPress (como añadir nuevos menús o cambiar el extracto), edita el archivo functions.php. Por ejemplo, para añadir soporte para logotipo personalizado:

function astra_child_custom_logo_setup() {
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'astra_child_custom_logo_setup' );

[INFO] Siempre que añadas funciones, usa el prefijo de tu tema (por ejemplo, astra_child_) para evitar conflictos con otros plugins o temas.

Preguntas frecuentes (FAQ)

¿Puedo crear un child theme para cualquier tema de WordPress?

Sí, siempre que el tema padre tenga una carpeta en wp-content/themes. Los temas de WordPress.org y la mayoría de temas premium lo permiten.

¿Qué pasa si el tema padre se actualiza?

Tus personalizaciones en el child theme se mantienen intactas. El tema padre se actualiza sin afectar tus cambios.

¿Necesito conocimientos de programación?

No para lo básico. Con solo crear los archivos style.css y functions.php ya tienes un child theme funcional. Para personalizaciones avanzadas, sí necesitarás algo de CSS/PHP.

¿Cómo desactivo el child theme?

Simplemente activa otro tema desde el panel de WordPress. Tus archivos del child theme no se borrarán.

¿Puedo usar DirectAdmin para otros tipos de personalización?

Sí. DirectAdmin te permite editar cualquier archivo de tu sitio, como el wp-config.php o archivos de plugins. Siempre ten cuidado y haz copias de seguridad.

Consejos finales

Copia de seguridad: Antes de hacer cambios importantes, descarga una copia de tu sitio o al menos de la carpeta themes.
Nombres claros: Usa nombres descriptivos para tu child theme, como mi-tema-child.
Prueba en local: Si tienes un entorno de pruebas, haz los cambios allí primero.
Actualiza el tema padre: No tengas miedo de actualizar el tema padre. El child theme protege tus modificaciones.

Crear un child theme WordPress desde DirectAdmin es un proceso rápido y seguro. Con solo dos archivos, puedes personalizar tu web sin riesgos. Ahora que sabes cómo hacerlo, ¡anímate a darle tu estilo único a tu sitio! Si tienes dudas, recuerda que siempre puedes consultar la documentación de WordPress o pedir ayuda a tu equipo de soporte técnico.