Un child theme es una extensión de un tema ya existente en WordPress. Permite realizar cambios en el diseño y funcionalidades del sitio web sin afectar la configuración original del tema padre.
De esta manera, se mantienen las actualizaciones y seguridad del tema principal mientras se personaliza el sitio a gusto del usuario. Esto se consigue con un tema hijo o child theme.
Contenidos
Qué es un Tema Hijo / Child Theme
Los Child Themes, también conocidos como Temas Hijos, representan una funcionalidad de WordPress que resulta útil cuando deseas efectuar ajustes en el tema que has seleccionado sin que estos se vean afectados por futuras actualizaciones del tema principal. Esto se logra al realizar las modificaciones en el Child Theme.
En este artículo, vamos a crear un tema hijo para el tema Hello Elementor. No obstante, los pasos a seguir son prácticamente idénticos para otros temas.
Guía paso a paso para crear un tema hijo de WordPress
Un child theme es simplemente un tema que hereda todas las características de otro tema principal, también llamado «tema padre». La ventaja de utilizar un tema hijo es que te permite personalizar y modificar el diseño de tu sitio web sin afectar el código del tema principal.
1- Archivos necesarios
Para generar un Child Theme, basta con crear una nueva carpeta en la siguiente ubicación: wp-content/themes/. Es una práctica recomendable utilizar el mismo nombre de la carpeta del tema principal y añadir la etiqueta «-child».
En nuestro ejemplo, el tema principal es Hello-Elementor, llamaremos a nuestro child theme Hello-Elementor-child.
Dentro de esta carpeta, también debes crear los archivos style.css y functions.php. Estos dos archivos son esenciales para crear el Child Theme de manera adecuada.
2- Contenido de style.css
Dentro del archivo style.css debe aparecer lo siguiente:
/* Theme Name: Nombre de tu tema hijo Theme URI: URL de tu sitio web Description: Descripción de tu tema hijo Author: Tu nombre o el de la empresa Author URI: URL del sitio web del autor Template: Nombre del tema padre Version: Versión de tu tema hijo (opcional) License: Tipo de licencia (opcional) License URI: URL de la licencia (opcional) Tags: Etiquetas relacionadas a al funcionalidad de tu theme */ En el caso del child theme de Hello Elementor se vería así:
3- Contenido de functions.php
Después de haber creado el archivo style.css, el siguiente paso consiste en importar los estilos del tema padre.
Anteriormente, se solía utilizar la declaración «@import» para realizar esta importación; no obstante, esta técnica es considerada una práctica poco recomendable.
En cambio, se aconseja utilizar el archivo functions.php para cargar el archivo style.css del tema principal y, en caso de efectuar modificaciones CSS en el tema hijo, cargar también el archivo style.css del tema hijo.
El código para cargar los estilos se asemeja a lo siguiente:
<?php
function hello_elementor_child_scripts_styles() {
wp_enqueue_style(
'hello-elementor-child-style',
get_stylesheet_directory_uri() . '/style.css',
[
'hello-elementor-theme-style',
],
HELLO_ELEMENTOR_CHILD_VERSION
);
}
add_action( 'wp_enqueue_scripts', 'hello_elementor_child_scripts_styles', 20 ); Desglosando cada parte de este código entendemos que:function hello_elementor_child_scripts_styles(): Aquí se define una función de PHP que se encarga de encolar (enqueue) los estilos CSS del Child Theme.wp_enqueue_style(): Es una función de WordPress que se utiliza para cargar hojas de estilo (CSS). En este caso, se utiliza para cargar los estilos del Child Theme.'hello-elementor-child-style': Este es el nombre que se le da a la hoja de estilos del Child Theme, creado anteriormente.[ 'hello-elementor-theme-style', ]: Aquí se define una dependencia. Significa que los estilos del Child Theme dependen de los estilos del tema principal llamado hello-elementor. Esto asegura que los estilos del tema principal se carguen antes que los del Child Theme.add_action( 'wp_enqueue_scripts', 'hello_elementor_child_scripts_styles', 20 );: Esta línea agrega la funciónhello_elementor_child_scripts_stylesa la acción de encolar (enqueue) los scripts y estilos en WordPress. La prioridad 20 determina el orden en que se cargan los estilos en relación con otros scripts y estilos en la página.
En resumen, este código se utiliza para cargar los estilos CSS de un Child Theme y establecer una dependencia en los estilos del tema principal para asegurar que se carguen de manera adecuada en un sitio de WordPress.
Descargar Child Theme Elementor
Por aquí te dejamos el enlace para descargar el Child Theme actualizado para el tema padre Hello Elementor
4- Instalar Child Theme
Para instalar tu child theme es muy sencillo, si has creado la carpeta dentro de la instalación de wordpress de tu sitio, simplemente debes:
- Ir a Apariencia > Temas y activar el child theme.
Si has descargado el child theme desde el enlace que hemos facilitado tienes que:
- Ir a Apariencia > Temas > clic en Añadir Nuevo
- Clic en Subir Tema y seleccionas el archivo comprimido que has descargado
- Una vez subido, realizas el paso que mencionamos al inicio: Apariencia > Temas y activar el child theme.
Y listo, ya tendrías instalado en tu WordPress tu child theme.
Crear Child Theme con un plugin
Si prefieres simplificar el proceso, puedes emplear un plugin como Child Theme Configurator para generar un tema hijo. Asegúrate de eliminar el plugin una vez que hayas creado el tema hijo.
Cómo personalizar un tema hijo
Una vez que hayas creado tu tema hijo, puedes personalizarlo de la manera que desees. Puedes agregar nuevas hojas de estilo CSS, agregar nuevas funciones al archivo functions.php, o incluso crear nuevas plantillas de página.
Al utilizar un child theme se evita perder los cambios realizados en caso de que el tema padre se actualice. Además, es una buena práctica para personalizar un sitio web y mantenerlo actualizado.
