Cómo crear un Child Theme en WordPress desde cero (Guía completa sin plugins)

Bueno, sé que con esta guía bastará para que tengas los conocimientos básicos para poder crear un tema hijo o (child theme) y trabajes cualquier plantilla o tema sin ningún problema, como lo estamos haciendo en esta serie de artículos. Si sigues esto al pie de la letra, no tendrás ninguna dificultad.

Estaremos usando una plantilla que todo mundo tiene por defecto en su wordpress, que son las típicas plantillas que se generan automáticamente cuando hacemos una instalación por primera vez, así que me entenderás en cada paso que vayamos realizando. ¿Por qué lo hicimos con esa plantilla?, porque justamente me acado de dar cuenta que hay una actualización, y es el mejor momento para hacer un tutorial de como crear un tema hijo.

Si observas bien la plantilla se llama Twenty Twenty-Five, esta plantilla al darle click en Actualizar ahora, si hiciste cambios de diseño internamente, agregaste algunos detalles extras, se perderán. Pero si lo hacemos desde el child-theme o tema hijo, esto no será así, no pasará absolutamente nada y guardarás tus cambios.

¿Qué es un Child Theme en WordPress y por qué deberías usarlos?

No haremos tan extensa la guía, simplemente te daré la información que necesitas saber y comenzar a utilizar tu propio child theme.

Un Child Theme o "tema hijo" en WordPress es una forma de modificar y extender las funcionalidades y estilos de un tema principal (padre) sin tocar su código directamente. Esto es fundamental por estas razones:

• Permite personalizar sin perder los cambios al actualizar el tema padre.
• Organiza mejor el código si trabajas con funciones, estilos o templates.
• Ideal para desarrollos escalables, personalizados o de tipo experiemental.

Requisitos antes de comenzar

Aunque sé que si estás aquí, es porque tienes minimos conocimientos del funcionamiento de WordPress, o sino, no te preocupes pero debemos de hacer las cosas bien y para ello debes asegurarte de tener lo siguiente:

• Tener instalado WordPress y activo el tema Twenty Twenty-Five (como es mi caso).
• Acceso al FTP o administrador de archivos (puede ser desde tu hosting o local).
• Editor de código (Visual Studio Code, Sublime Text o algo de tu agrado).
• Conocimientos básicos de HTML, CSS y PHP (preferentemente).

Paso 1: Crear la carpeta del child theme

Ubica el directorio de temas de WordPress, en mi caso uso Cpanel así que iré a mi proyecto web, si observas te darás cuenta que estoy trabajando en un subdominio que inicia con "lab" seguido de mi dominio principal, que esta web:

https://lab.carlosjulian.mx

Dentro de la raíz de mi subdominio, me encuentro con todos los archivos necesarios de WordPress, lo que voy a requerir, es que en la sección de themes pueda yo crear mi child-theme o "tema hijo".

Creamos la carpeta y la nombraremos de la siguiente forma:

Una vez creada la carpeta, se verá así, como si fuera un tema normal, eso debe quedarte claro. No es una carpeta diferente, sino una carpeta similar a la de una plantilla original, pero con la terminación -child que sabemos que será su tema hijo.

Paso 2: Crear los archivos base del child theme

Dentro de la carpeta twentytwentyfive-child , necesitamos al menos dos archivos obligatorios:

Creando el style.css

Este archivo define los metadatos del tema hijo:

/*
Theme Name:     Twenty Twenty-Five Child
Theme URI:      https://lab.carlosjulian.mx/
Description:    Tema hijo de Twenty Twenty-Five para personalizaciones avanzadas
Author:         Carlos Julián
Author URI:     https://carlosjulian.mx
Template:       twentytwentyfive
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Tags:           child theme, personalizado
Text Domain:    twentytwentyfive-child
*/

Creando el functions.php

Este archivo se usa para encolar los estilos del tema padre y cualquier funcionalidad nueva. Para este ejemplo haremos lo siguiente:

<?php
function twentytwentyfive_child_enqueue_styles() {
    wp_enqueue_style(
        'twentytwentyfive-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'twentytwentyfive-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('twentytwentyfive-style')
    );
}
add_action('wp_enqueue_scripts', 'twentytwentyfive_child_enqueue_styles');
?>

Al final tendremos estos archivos creados en nuestra carpeta del tema hijo:

Paso 3: Activar el tema hijo en WordPress

El último paso será activar el tema hijo. ¿Cómo lo hacemos?

• Ve al Escritorio -> Apariencia -> Temas
• Deberías ver tu nuevo tema hijo "Twenty Twenty-Five Child".
• Haz click en "Activar".

Si logras activar la plantilla, verás que no hay absolutamente ningún cambio como cuando usabas el tema padre, mirarás todo normal y si eso ocurre. ¡Excelente!, lo hiciste bien. ¿Entonces qué sigue?

Verificación y recomendaciones

• Asegúrate de que tu sitio sigue funcionando con el tema hijo.
• Si agregas estilos en el style.css , verificalos en el navegador.
• Puedes empezar a sobrescribir plantillas del tema padre copiando archivos como header.php, single.php, etc., dentro del tema hijo.

Prueba final del Child Theme o Tema Hijo

Si, ya verificaste que la plantilla sigue funcionando sin ningún problema, aún cuando activaste el child theme entonces vamos a probarlo realmente. Vamos a dirigirnos al post de Hello World o cualquier otra artículo que tengas y con el inspeccionador de elementos de tu navegador, vamos a ver que clase de css tiene el H1

Observa que para el título del post, es decir, para el H1 se utiliza la clase wp-block-post-title

Ahora vamos a irnos a nuestro archivo style.css del tema hijo, y colocaremos lo siguiente:

h1.wp-block-post-title {
    font-size: 45px;
    text-align: center;
    background-color: red;
}

Guardamos los cambios, nuestro archivo se verá así:

Si nos dirigimos a nuestro post de Hello World! y actualizamos apretando la tecla Shift + F5, veremos lo siguiente:

Si hasta este punto lograste ver los estilos agregados al H1 , ¡felicidades! , lo hiciste muy bien 🥳

Ahora, podemos actualizar la plantilla padre, sin ningún problema. Nuestros cambios no se van a revertir, porque ya tenemos nuestro child theme funcionando correctamente.

Conclusión

Un child theme en WordPress es el primer paso para una personalización profesional y escalable hacia cosas más interesantes en este CMS, ya sea para agregar estilos (como hicimos esta guía), o ya sea para agregar funciones o desarrollar nuevos tipos de contenido, este enfoque te permite experimentar con seguridad y orden.

Aunque esto fue una guía sencilla para la creación de un child theme o "tema hijo" existen las buenas prácticas y que es un caso más avanzado, como la modularización del código y usar carpetas como /inc/, o aprender a utilizar get_template_part() para reutilizar fragmentos, incluir funciones de seguirdad en cada archivo PHP, en fin, muchas cosas importantes de ésta índole.

Espero que te haya servido, un gusto y un abrazo. 🤓🚀