Cómo Crear un Tema Hijo (Child) de WordPress

Para los dueños de sitios web usando un tema WordPress, puede que no siempre puedan alcanzar el diseño que desean mientras que mantienen la funcionalidad de su sitio. Personalizar un tema toma tiempo y esfuerzo. Puede parecer casi perfecto hasta que el creador del tema lanza una actualización que borra todo aquello por lo que trabajaste tan duro. 

Hay una mejor solución. Puedes implementar un tema hijo o child que hereda las mismas funcionalidades que el tema principal o padre, pero te permite personalizar y proteger tus estilos de las actualizaciones. Incluso si actualizas tu tema principal, tu tema hijo permanecerá intacto con tus cambios. 

En esta publicación, hablaremos sobre los temas hijos de WordPress, por qué necesitas uno y cómo crearlo en un par de pasos sencillos. ¡Manos a la obra! 

Una Vista General Sobre los Temas Hijos

Un tema hijo toma su funcionalidad y contenido del tema principal. Sin embargo, personalizar un tema hijo no afecta el principal. Por lo tanto, puedes tomar la configuración base de un tema y ajustarla a tus necesidades.

Los temas hijos son almacenados por separado de los temas principales. Entonces, si el tema principal se actualiza automáticamente, no perderás los cambios que hayas realizado a tu tema hijo. Además, puedes ajustar o eliminar el tema hijo sin afectar el principal. 

Usar un tema hijo hace que sea fácil mantener y actualizar tu sitio. También te ayudará a evitar el riesgo de editar el tema principal directamente, el cual puede ser anulado o se puede perder. 

Diferencias Entre los Temas Principales e Hijos

Hay varias diferencias entre un tema principal y un tema hijo Por ejemplo, un tema principal típicamente incluye: 

• Un archivo style.css que determina apariencia de tu sitio web
• Un archivo functions.php que te permite añadir funciones o modificar el comportamiento por defecto de WordPress
• Varios archivos de plantillas que definen qué tan diferentes se muestran las páginas de tu sitio

En contraste, un tema hijo solo necesita 2 archivos: style.css y functions.php. Añadirás estos archivos al directorio /wp-content/themes/.

Puedes emplear un tema hijo para hacer cambios de estilo en tu sitio web, tales como colores, fuentes tipográficas y diseños. 

Por ejemplo, digamos que deseas cambiar el esquema de colores de tu sitio. Puedes hacer esto al crear un nuevo archivo style.css en el directorio del tema hijo y añadiendo el siguiente código: 

body {
background-color:#fff;
}
h1 {
color: #000
}

Hemos cambiado el color de fondo y el color de H1 en el código anterior. Estas ediciones anularán el estilo del tema principal y actualizarán los colores en tu sitio. Puedes hacer tantos cambios como sea necesario en el archivo style.css del tema hijo. 

Un tema hijo hereda todo del tema principal. Esto incluye todos los archivos de plantillas, funciones y activos tales como imágenes y archivos JavaScript. Si deseas hacer cambios a estos elementos, necesitas copiarlos en el directorio del tema hijo desde el tema principal. Entonces puedes editar los archivos. 

Ventajas De Usar Un Tema Hijo

Hay muchas ventajas al usar un tema hijo en tu sitio WordPress, incluyendo:

• Proteger los cambios del tema contra actualizaciones automáticas
• Ajustar elementos visuales de tu tema
• Aprender cómo editar temas, lo cual es útil cuando estás desarrollando tu propio tema

Utilizar un tema hijo además requiere experiencia mínima de codificación. En la mayoría de los casos, solo necesitas añadir algunas pocas líneas de código al archivo style.css. Esto hace fácil comenzar con un tema hijo, si no eres un desarrollador.

Sin embargo, también hay suficientes herramientas para ayudarte a aprender a codificar si prefieres ahondar en el tema. 

Cómo Crear un Tema Hijo de WordPress Utilizando Un Plugin

Usar un plugin es una de las maneras más fáciles de crear un tema hijo de WordPress. El plugin puede guiarte a través del proceso completo, lo que quiere decir que no necesitarás tocar código.  

En este tutorial, estaremos trabajando con el plugin ‘Child Theme Configurator’. Esta herramienta amigable con los usuarios puede ayudarte a analizar tu tema para encontrar problemas en él, crear un tema hijo e incluso editarlo para que se ajuste al diseño de tu sitio web y especificaciones de estilo. 

Relacionado: Tendencias de Diseño Web en WordPress Para Inspirarte

Paso 1: Descarga e Instala el Plugin ‘Child Theme Configurator’

Para comenzar, tendrás que descargar e instalar el ‘Child Theme Configurator’. Puedes hacer esto navegando a la página del plugin y haciendo clic en el botón ‘Descargar’:

Tu computador descargará los archivos del tema en una carpeta .zip. Luego, navega a tu panel de WordPress y ve a ‘Plugins > Añadir Nuevo’ para subir los archivos. 

Haz clic en  ‘Subir Plugin> Elegir Archivo’, y selecciona la carpeta que descargaste anteriormente. 

Una vez que el plugin ha sido instalado, tendrás que activarlo. Ten en cuenta que también necesitarás elegir un tema WordPress a partir del cual harás tu tema hijo. 

Paso 2: Analiza el tema principal

A continuación, navega a ‘Herramientas > Temas Hijo’

El plugin te guiará a través de los pasos para crear un tema hijo. Simplemente, selecciona la opción ‘CREATE a new Child Theme’ para comenzar.

Serás llevado a seleccionar tu tema principal del menú desplegable. Si tienes múltiples temas en tu sitio WordPress, asegúrate de elegir el que deseas personalizar. 

Ahora haz clic en ‘Analyze’ para revisar el tema principal en búsqueda de problemas potenciales con el código.

Si el plugin encuentra problemas de compatibilidad o con el código, te los mostrará aquí. De lo contrario, verás un mensaje de éxito en color verde, indicándote que es correcto proceder para crear el tema hijo. 

Una vez que has determinado que tu tema principal será apropiado para un tema hijo, puedes continuar al siguiente paso. También puedes mostrar un análisis de datos sin procesar o enviar solicitudes de soporte al creador del plugin desde esta página. 

Relacionado: 20 Plugins Esenciales de WordPress

Paso 3: Dale Un Nombre al Directorio de Tu Tema Hijo

A continuación, serás llevado a darle un nombre al directorio para tu tema hijo. Será el nombre de la carpeta en los archivos de tu sitio web. 

Puedes darle cualquier nombre, siempre y cuando sea único en tu sitio y contenga caracteres aceptables. Para mantener este ejercicio simple, nosotros utilizamos “twentytwentytwo-child”.

Ten en cuenta que nombrar el directorio del tema no es lo mismo que darle nombre a tu tema hijo, o añadir una descripción de tema. Estos pasos vendrán más adelante. 

Paso 4: Selecciona Las Hojas de Estilo del tema principal y el Tema Hijo

A continuación, tendrás que elegir la nueva hoja de estilo para tu tema hijo. Si seleccionas la hoja de estilo primaria (style.css), tus estilos personalizados anularán el contenido existente del tema. Esta es la opción por defecto y recomendamos elegirla si eres nuevo creando temas hijos. 

Ahora tendrás que elegir el método de administración de la hoja de estilo de tu tema principal. Hay varias opciones, pero recomendamos quedarte con la opción ‘Use the WordPress style queue’ para la mayoría de casos. 

Como principiante, es mejor usar la opción por defecto hasta que estés más familiarizado con la manera en la que el tema principal administra las hojas de estilo. Las otras opciones no siempre son compatibles con todos los temas. 

Paso 5: Nombra Tu Tema Hijo

El siguiente paso es nombrar tu tema hijo y escribir una descripción para él. 

El Child Theme Configurator obtendrá la información por defecto de tu tema principal y la mostrará aquí. Si simplemente estás creando un tema hijo para tu uso personal, puedes dejar esta información tal como está.

Sin embargo, si tu tema principal servirá como la base para un tema nuevo que estés creando, puede que desees añadir una breve descripción y nombre único. 

Paso 6: Copia Las Configuraciones Principales al Tema Hijo

Ahora el plugin te pedirá confirmar que puede copiar las configuraciones del tema principal al tema hijo.

Este paso, asegurará que tu tema hijo obtenga todas sus funcionalidades y apariencia del tema principal. Sin embargo, si estás trabajando con un tema prémium o restringido como tema principal, puede que no logres completar este paso. 

Paso 7: Crea Tu Nuevo Tema Hijo y Previsualizalo

El paso final es crear tu tema hijo. Haz clic en el botón ‘Create New Child Theme’ y espera a que el plugin haga su trabajo. 

Deberías recibir una notificación de que tu tema hijo ha sido creado exitosamente.
Siempre deberías previsualizar tu tema hijo antes de activarlo en tu sitio web. Este paso te ayudará a verificar que todo esté funcionando correctamente. Luego, haz clic en ‘Activate & Publish’ para comenzar a trabajar con tu tema hijo.

Cómo Crear un Tema Hijo de WordPress Manualmente

Si prefieres no usar un plugin para crear tu tema hijo, puedes abordar esto manualmente. Puede que prefieras este método si ya estás utilizando demasiados plugins en tu sitio web.

Adicionalmente, crear un tema hijo de WordPress manualmente te permite realizar los cambios que deseas en un nivel granular. Sin embargo, ten en cuenta que necesitarás tener conocimiento intermedio de CSS. 

Paso 1: Desarrolla Un Plan Para Tus Cambios

Primero, encuentra un tema principal que te guste y haz una lista de los cambios que deseas ejecutar. Puedes ver las herramientas de desarrolladores y ver visualizar el código del tema para efectuar los cambios correctos. 

Para ver las herramientas de desarrollador, haz clic derecho en cualquier parte de tu sitio mientras estás usando el tema, luego selecciona la opción ‘Inspeccionar’. Entonces verás una página de información que se ve algo parecido a esto:

Aquí, puedes buscar los colores de fondo de pantalla, información de tipografía, tamaño del margen y más. Luego, puedes hacer una lista de funciones que te gustaría ajustar en tu tema hijo. 

Paso 2: Realiza Una Copia de Seguridad de Tu Sitio

Es esencial realizar una copia de seguridad de tu sitio actual antes de realizar cualquier cambio para que no pierdas tus configuraciones importantes. Siempre puedes revertir a esta copia de seguridad si es necesario. También puedes considerar utilizar un sitio staging en caso de que cometas algún error crítico. 

Hay un par de maneras diferentes para hacer una copia de tu sitio. Puedes hacerlo manualmente empleando un plugin de backups o copia de seguridad, que probablemente es el método más fácil para la mayoría de las personas.

Relacionado: Cómo Crear Un Backup De Tu Sitio WordPress

Alternativamente, puedes asociarte con un proveedor de alojamiento de WordPress que se encargue de las copias de seguridad de tu sitio web. Nuestros planes DreamPress de alojamiento Administrado incluyen copias de seguridad ondemand y automáticas para salvaguardar la información de tu sitio. 

Paso 3: Crea Una Carpeta Para Tu Tema Hijo

Tendrás que crear una carpeta para almacenar los archivos de tu tema hijo. Accede tus archivos a través de un cliente Secure File Transfer Protocol (SFTP) tal como Filezilla y navega a la carpeta ‘Themes’.

Aquí generarás un nuevo directorio para tu tema hijo. Crea una carpeta que tenga el nombre del tema principal y añade “-hijo” o “-child” al final. 

Por ejemplo, si tu tema principal es Twenty Twenty-Two, el nombre de tu directorio de tema hijo sería “twentytwenty-two-child”. 

Paso 4: Crea Una Hoja de Estilo Para Tu Tema Hijo

Ahora tendrás que generar un nuevo archivo de texto y llamarlo “style.css”. Este archivo formará la base de tu tema hijo. Necesitará algo de información básica del encabezado, incluyendo su nombre, URL, descripción y más.

Ahora guarda y añade el archivo ‘style.css’ a la carpeta del directorio que acabas de crear. 

Paso 5: Alinea Las Hojas de Estilo

A continuación, necesitarás alinear las hojas de estilo del tema principal y el tema hijo. Este método asegura que tu tema hijo tomará su información del tema principal. También te permite editar el tema hijo sin afectar su tema principal. 

Genera un nuevo archivo para el directorio de tu tema hijo y nómbralo “functions.php”. Entonces puedes decirle a tu tema hijo que debe referenciar el tema principal al añadir el siguiente código: 

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Guarda el archivo de texto y navega a tu panel de WordPress para activar el tema. 

Paso 6: Activa el Tema Hijo

Finalmente, necesitas activar tu tema hijo. Puedes subirlo manualmente al dirigirte a ‘Apariencia > Temas > Subir’. Luego, elige la versión .zip del directorio de tu tema hijo.

Activa tu tema hijo. ¡Ahora debería estar en vivo! 

Cómo Personalizar Tu Tema Hijo

Una vez que has activado tu tema hijo, es momento de jugar un poco con su CSS. Este paso te permite realizar cambios de diseño sin perder las funciones principales de tu tema. 

La mejor manera de encontrar el CSS que deseas modificar es utilizando las ‘Herramientas de Inspección’ de tu navegador. Puedes ver el CSS y el HMTL detrás de cualquier página al hacer clic derecho en ella y seleccionar la opción ‘Inspeccionar’. 

En la parte inferior o la parte derecha de tu pantalla, se abrirá un panel y verás en código de la página. Desplaza tu mouse sobre el código y resalta el HTML en secciones.
A medida que desplazas el mouse, también mostrará las reglas CSS. Puedes editar el CSS directamente con las herramientas de desarrollador y ver cómo se ve. 

En este ejemplo, cambiamos el color de fondo de pantalla de “#9888fd” a “#9888fe” para ver como se vería. El color de fondo de pantalla cambiará instantáneamente, pero no es un cambio permanente.  

Ahora necesitas copiar la regla CSS y añadirlo al archivo style.css de tu tema hijo de la siguiente manera:

body {

Background-color: #9888fe;

}

Guarda estos cambios, es el archivo style.css y regresa a tu panel de WordPress para ver el tema. Este proceso puede requerir algo de prueba y error, entonces tomate tu tiempo hasta que el estilo sea perfecto. 

Protege Las Personalizaciones y Actualizaciones De Tu Tema

Emplear un tema hijo te ayuda a evitar las complicaciones de editar un tema principal directamente. Un tema hijo es fácil de ajustar, permitiéndote realizar cambios radicales de diseño a un sitio web existente. Además, no son afectados por actualizaciones automáticas de tema. 

Aquí hay un resumen rápido de cómo crear un tema hijo manualmente:

1. Haz un plan.
2. Realiza un backup de tu sitio actual.
3. Crea una carpeta para tu tema hijo utilizando un cliente SFTP.
4. Haz una hoja de estilo y súbela a tu sitio.
5. Alinea las hojas de estilo del tema hijo y el tema principal. 
6. Activa y previsualiza tu tema hijo.
7. Ejecuta cambios usando CSS. 

Tener un hermoso tema es solo una parte de administrar un sitio web exitoso. También necesitas un proveedor de alojamiento que se ajuste a tus necesidades. ¡Echa un vistazo a los paquetes de alojamiento Shared de DreamHost, para planes asequibles que priorizan el rendimiento de tu sitio web!