Blog / Child Themes en Wordpress y cómo crearlos

Child Themes en Wordpress y cómo crearlos

por SW Team

Child Themes en WordPress y cómo crearlos

Si alguna vez has querido personalizar tu sitio de WordPress sin perder tus cambios después de una actualización del tema, un child theme (tema hijo) es la solución perfecta. Un child theme te permite modificar el diseño y las funcionalidades de tu sitio web sin tocar el código del tema original. En esta guía, os mostraremos paso a paso cómo crear y configurar un child theme en WordPress.

¿Qué ventajas tiene un Child Theme?

Un child theme es un tema que hereda todas las características y funcionalidades de otro tema, conocido como el tema padre. Cuando el tema padre se actualiza, tus personalizaciones en el child theme permanecen intactas.

Pasos para Crear y Configurar un Child Theme

1. Crear la Carpeta del Child Theme

  1. Accede a tu directorio de instalación de WordPress mediante FTP o el Administrador de Archivos de tu servicio de hosting.
  2. Navega a wp-content/themes/.
  3. Crea una nueva carpeta para tu child theme. Dale un nombre representativo, por ejemplo: twentytwentyfour-child. Recuerda que debe heredar el nombre del parent theme, en este caso twentytwentyfour.

cta:hosting_wordpress

2. Crear el Archivo style.css

Dentro de la carpeta de tu child theme, crea un archivo llamado style.css y añade la siguiente cabecera:

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    http://tudominio.com/twentytwentyfour-child
 Description:  Tema hijo de Twenty Twenty-Four
 Author:       Tu Nombre
 Author URI:   http://tudominio.com
 Template:     twentytwentyfour
 Version:      1.0.0
*/

/* Aquí puedes añadir tus estilos personalizados (CSS) */
  • Theme Name: El nombre de tu child theme.
  • Template: El nombre de la carpeta del tema padre o parent theme(debe coincidir exactamente).

3. Crear el Archivo functions.php

En la misma carpeta de tu child theme, crea un archivo llamado functions.php. Este archivo se utilizará para encolar (enqueue) la hoja de estilos del tema padre y cualquier otra funcionalidad que desees añadir.

<?php
function twentytwentyfour_child_styles() {
    // Encolar la hoja de estilos del tema padre
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    // Encolar la hoja de estilos del tema hijo
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'twentytwentyfour_child_styles');
?>

4. Activar el Child Theme

  1. Ve a tu panel de administración de WordPress.
  2. Navega a Apariencia > Temas.
  3. Deberías ver tu child theme en tu listado de temas. Haz clic en "Activar".

5. Personalizar el Child Theme

Ahora que tu child theme está activo, puedes empezar a personalizarlo. A continuación te proporcionamos algunas ideas:

Añadir Estilos Personalizados

Puedes añadir tus estilos personalizados directamente en el archivo style.css de tu child theme que has creado anteriormente donde has definido los datos de la plantilla.

/* Aquí puedes añadir tus estilos personalizados (CSS) */
/* Cambiar el color de fondo del cuerpo */
body {
    background-color: #f0f0f0;
}

Sobrescribir Plantillas del Tema Padre

Si necesitas modificar una plantilla del tema padre, copia el archivo del tema padre a la carpeta de tu child theme y edítalo allí. Por ejemplo, para modificar header.php:

  1. Copia header.php del tema padre a la carpeta de tu child theme.
  2. Realiza tus modificaciones en la copia de header.php en tu child theme.

6. Probar y Depurar

Es importante probar tu child theme a fondo para asegurarte de que todo funcione correctamente. Aquí hay algunas cosas que puedes verificar:

  • Asegúrate de que todos los estilos y scripts se carguen correctamente.
  • Verifica que las plantillas personalizadas funcionen como se espera.
  • Revisa tu sitio en diferentes navegadores y dispositivos para asegurar la compatibilidad.

Conclusión

Crear y configurar un child theme en WordPress es una excelente manera de personalizar tu sitio web sin riesgo de perder tus cambios con actualizaciones del tema. Siguiendo estos pasos, puedes crear un child theme y empezar a hacer tus propias modificaciones de manera segura y efectiva. ¡Anímate a experimentar y dale un toque único a tu sitio de WordPress!

¿Tienes alguna pregunta o necesitas más ayuda con tu child theme? ¡Déjanos un comentario y estaremos encantados de leerte!

cta:domains

i