Cómo crear un child theme o tema hijo en WordPress

Si no eres nuevo en WordPress, ya deberías saber lo importante que son los temas hijo o child theme en WordPress.

Esta derivación de un tema te permite personalizar el tema, manejarlo de manera más segura, y asegurarte de que los cambios no se pierdan cuando se publique nueva actualización del tema principal.

Los temas están entre los puntos más vendidos de WordPress, pero eso no significa que no vengan con sus problemas. La mayoría de los temas, incluyendo los más populares, tendrán errores que necesitan ser corregidos con el tiempo.

Después de cada actualización del tema, también existe la posibilidad de que se rompa tu sitio web.

Por lo tanto, hay que resolver los problemas a medida que surgen. Ahí es donde entran en juego los child themes o temas hijo de WordPress.

Como su nombre indica, los temas hijo derivan de un tema padre o parent theme.

Con estos temas hijo, puedes personalizar cada uno de tus temas favoritos sin correr el riesgo de causar daños significativos a tu sitio web o perder todo tu trabajo si surge la necesidad de una actualización.

Crear un tema hijo en WordPress es tan fácil como crear una carpeta y dos archivos, un archivo.css y un.php que contiene algún código que puedes copiar desde esta página.

En este artículo, repasaremos un tutorial sobre cómo crear un tema hijo de WordPress. Pero primero, necesitamos entender completamente lo que significa un tema hijo.

¿Qué es un tema hijo o child theme en WordPress?

Un tema hijo es una copia del tema principal con la diferencia de que se mantiene independiente del tema principal.

Se puede denominar simplemente como un «reflejo» que se utiliza para asegurar que cualquier cambio en el tema original o en el tema principal, no se superpone a los cambios que has hecho en el segundo tema o tema hijo.

Como los desarrolladores tienden a personalizar su sitio web, es común que creen un tema hijo. Si no haces esa creación, puede que se produzca una pérdida total de personalización cuando se libera una nueva actualización para el tema principal.

En resumen, los temas hijo ofrecen la forma correcta de modificar un tema y preservarlo, incluso cuando llegan nuevas actualizaciones.

También proporcionan a los desarrolladores o al propietario del sitio web la opción de volver al tema principal si algo sale mal.

La personalización del tema se guarda en el directorio «/themes/themename/«. Así que, si aparece una actualización, todos los cambios se pierden.

La configuración de un tema hijo se guarda en otra dirección que no se ve afectada por ninguna actualización o reinstalación.

Entonces, ¿cómo crear un tema hijo de WordPress? Vamos a empezar.

Un tema hijo se puede crear de dos maneras:

• La primera forma es un proceso manual y se recomienda en su mayor parte.
• Si no sabes como codificar o no tienes una buena base de conocimiento sobre el funcionamiento interno de WordPress, te recomendamos usar un plugin.

Nosotros cubriremos ambos aspectos, así puedes decidir cuál es el más adecuado para ti.

¿Por qué es importante crear un child theme antes de hacer cambios en tu plantilla WordPress?

Los temas hijo de WordPress son la mejor opción, y la más estable, cuando se trata de la creación de sitios web personalizados.

Ofrecen al diseñador o desarrollador de sitios web la opción de personalizar la apariencia de los sitios web de manera que resulten funcionales.

Los temas padre o de base borrarán cualquier personalización que haya realizado en ellos después de una actualización del tema.

Un tema hijo permite al usuario mantener las personalizaciones separadas del tema base (padre) e intactas después de la actualización.

También puedes deshabilitar cualquier cambio que realices en el tema hijo. Además, los child themes son muy fáciles de configurar.

Cómo crear manualmente un tema hijo en WordPress

Crear un tema hijo en WordPress no es tan difícil como lo perciben la mayoría de los principiantes.

Si sabes un poco de codificación y puedes organizar carpetas, estás listo para empezar.

El proceso manual de creación de temas hijo consta de sólo dos pasos:

• crear una carpeta
• y luego, crear un archivo.

Repasemos cada uno de los pasos a continuación.

Para asegurarte de que puedes crear un tema hijo, en primer lugar recomendamos que leas las revisiones del alojamiento web, o que te pongas en contacto directamente con el servicio de soporte, para obtener más información sobre la personalización.

Antes de empezar a crear temas hijo en WordPress, tendrás que hacer copia de seguridad del sitio web, que es lo primero que siempre debes hacer cuando actualices el sitio web. Puede hacerlo de varias maneras, pero el plugin UpdraftPlus es una opción bastante fácil.

Aquí están los pasos a seguir cuando se crea un child theme:

Paso 1: Creación de la carpeta

El primer paso es crear un tema hijo en WordPress, es crear una carpeta para él.

Puedes hacerlo yendo al backend o administrador de archivos del proveedor de alojamiento, o a través de FTP.

Recomendamos FTP, ya que proporciona un mejor control y visualización del sistema de carpetas de tu sitio web. Una vez que haya iniciado sesión en su sitio web usando FTP como FileZilla, habrás de navegar a una carpeta específica «wp-content/themes/«.

Una vez que esté allí, deberías ver la(s) carpeta(s) dentro de la carpeta themes. Estas carpetas representan los temas que están instalados en tu sitio web.

Ahora, necesitas crear una nueva carpeta. El nombre de la carpeta depende de tu elección. Sin embargo, recomendamos usar un nombre que sea fácilmente reconocible incluso por otra persona.

Recomendamos usar «nombre-tema-hijo«.

Paso 2: Creación del archivo style.css

El siguiente paso es crear un archivo del tema hijo, es decir, un archivo style.css.

Este archivo es necesario para crear un tema hijo en WordPress. El nombre del archivo debe ser «style.css» y nada más.

Como puedes haber adivinado por el nombre, es un archivo CSS donde se almacena la personalización para el tema hijo.

El .css significa Hoja de Estilo en Cascada o Cascading StyleSheet (CSS). El archivo incluye todas las reglas para el diseño de un tema y la apariencia general. Lo que es más importante, cualquier cambio que realices en la hoja de estilo del tema hijo anulará los del tema principal.

Aunque puedes usar cualquiera de tus editores favoritos aparte de Word para crear el archivo style.css, sugerimos el editor de texto básico integrado en los sistemas operativos Windows y Apple.

Ahora, abre el editor de texto, copia y pegua el código de abajo.

/*
Nombre del tema:     Twenty Seventeen Child Theme 
Theme URI:           https://thrivewp.com 
Descripción:         Autor de Twenty Seventeen Child Theme: ThriveWP 
Author URI:          https://thrivewp.com 
Plantilla:           twentyseventeen 
Versión:             1.0.0 */ 
/* Su personalización comienza aquí */

Una vez que hayas pegado el código, tendrás que cambiar algunas cosas.

La más importante es la Plantilla o Template: tiene que ser exactamente igual que el nombre de la carpeta de temas principales. Se encuentra en la carpeta «wp-content/themes«.

Puedes acceder a esto a través del administrador de archivos de tu sitio web o del programa FTP.

Los otros elementos del código anterior pueden cambiarse como lo desees, pero se aconseja mantener los nombres y descripciones de los temas para que las cosas sean sencillas.

Ahora que el código style.css se añadido y editado, necesitarás guardarlo como un archivo .css. Haga clic en Guardar como y para el nombre ponga style.css. Guárdalo en la carpeta vacía del tema hijo.

Para que el archivo sea funcional, es necesario añadir información al archivo. La información es vital y, por lo tanto, no se puede omitir.

Para añadir la información, necesitas abrir el archivo en tu editor favorito.

Como puedes ver, hemos añadido mucha información. No toda la información es vital y por lo tanto puede ser ignorada. Sin embargo, hay cosas importantes que nos debe quitar.

La variable «Template» tiene que estar allí, ya que enlaza el tema hijo con el tema padre. Esto significa que debes ajustar correctamente el valor de la variable «Template«.

Otra cosa que debes tener en cuenta es añadir el archivo style.css de los padres en el archivo CSS de su hijo. El motivo principal aquí es asegurarse de que el sitio se muestre correctamente cuando detecte por primera vez el tema hijo. Para ello, debes añadir la siguiente línea al archivo style.css de su hijo:

@import url(«../parenttheme/style.css»);

Aquí debes asegurarte de que has introducido correctamente el nombre del tema principal.

Con todo esto hecho, ya está todo listo para usar el tema de su hijo y personalizarlo según tus necesidades.

Para activar el tema hijo, debes ir a «Apariencia > Temas» y seleccionar el nuevo tema hijo.

Paso 3: Activar el tema hijo

La activación del nuevo tema hijo es tan simple como instalarlo en el panel de control de WordPress.

Primero tendrás que convertir tu nueva carpeta de tema hijo en una carpeta .zip. Si haces clic con el botón derecho del ratón en la carpeta y luego haces clic en «enviar a .zip», será inmediato.

Una vez hecho esto, ve a tu escritorio de WordPress y luego a Apariencia > Temas > Añadir Nuevo > Cargar Tema. Aquí seleccionarás y cargarás tu carpeta del tema hijo comprimida.

Una vez instalado, el nuevo tema deberá aparecer con una miniatura en blanco en Apariencia > Temas. Buscarlo y, a continuación, haz clic en Activar.

Después de eso, el tema hijo comenzará a funcionar, pero después de comprobar la interfaz, te darás cuenta de que es un desastre. La razón detrás de esto es que el style.css estará desnudo.

Puedes arreglarlo simplemente importando el estilo del padre.

Paso 4: Añadir el archivo functions.php

El style.css regirá el estilo y el diseño de tu sitio web, pero functions.php permite la adición de funcionalidades avanzadas y personalizaciones al tema.

Además, el archivo permite importar el estilo del tema principal. Sin el archivo functions.php importando el estilo, el tema hijo no funcionará.

De la misma manera que creaste tu archivo style.css, ahora necesitas crear el archivo functions.php.

Abre tu editor de texto y crea un nuevo archivo. Copia y pega el siguiente código en él.

<?php
/* Escribe las funciones de tu fabuloso tema debajo */

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'twentyseventeen-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

Es muy importante que lo hagas correctamente, de lo contrario, el tema de tu hijo no heredará el estilo correctamente o, lo que es peor, cargará el estilo dos veces, lo que repercutirá en los tiempos de carga del sitio.

La parte que nos interesa es el bit después de $parent_style = «twentyseventeen-style». «twentyseventeen-style» le dice al archivo de funciones de donde sacar el estilo padre.

Cada tema es diferente, así que la mejor manera de encontrar esta línea es ir al archivo functions.php del tema padre y buscar wp_enqueue_style.

Puede encontrar varias instancias de esta línea para reducirla y buscar más en get_stylesheet_directory_uri O get_stylesheet_uri.

Ahora, deberías haber encontrado una línea de código con ambas frases y en ella, deberías ver el estilo que necesitamos como el estilo twentyseventeen.

Copia eso y reemplázalo en el código de arriba. $parent_style =’twentyseventeen-style’; // Esto es ‘twentyfifteen-style’ para el tema Twenty Fifteen.

Aparte del archivo functions.php, cualquier otro archivo que incluya en el tema hijo sobrescribirá el archivo en el tema principal.

En la mayoría de los casos, es mejor hacer una copia de cualquier archivo de plantilla que desees cambiar del tema principal y luego modificar los archivos copiados. No cambies el archivo del tema padre.

Un ejemplo rápido: si deseas realizar ediciones en el archivo header.php del tema principal, debes empezar por copiar el archivo en la carpeta de temas secundarios y, a continuación, personalizarlo. De esta forma, las ediciones no se pierden cuando se actualiza el tema principal.

Usando functions.php

A diferencia de style.css, el archivo functions.php de los temas hijo no invalidará a la contraparte del tema padre.

Se cargará como una adición a functions.php del tema principal y,por lo tanto, proporciona un método mejor para personalizar la funcionalidad del tema principal.

Por ejemplo, para agregar una función PHP al tema, sólo necesitas abrir el archivo functions.php hijo y agregarlo allí.

Nunca copies todo el contenido de functions.php desde el tema padre al tema hijo, ya que lo cargará dos veces y causará problemas con yu sitio web.

Los archivos functions.php tienen una estructura simple: la etiqueta PHP de apertura situada en la parte superior y los bits de PHP debajo de ella.

Puedes agregar pocas o tantas funciones al archivo como desees, tal como lo hicimos anteriormente.

Otros aspectos a tener en cuenta a la hora de crear un tema hijo o child theme en WordPress

Encolado de scripts y estilos

Además de encolar el estilo como hicimos arriba, puedes añadir muchas otras funciones al archivo functions.php, por ejemplo, puedes añadir una línea para decirle a WordPress que no envíe un correo electrónico a la administración del sitio web cuando el núcleo de WordPress se actualice automáticamente.

O bien, puedes agregar una función para agregar compatibilidad con vídeo en tu tema.

Formatos de las entradas

El tema hijo heredará los formatos de publicación o post_forms tal y como los define el tema padre. Sin embargo, al crear un temas hijo, debe tener en cuenta que «add_theme_support (post-formats’)» anulará cualquier formato que defina el tema padre.

Soporte RTL

Para que el tema hijo sea compatible con los lenguajes RTL necesitarás agregar el archivo rtl.css. Si el archivo padre no tiene un archivo rtl.css, debes agregar el archivo al tema hijo.

Después de la adición, WordPress cargará el archivo rtl.css automáticamente si «is_rtl() is true».

Internacionalización

Puedes preparar los child themes para su posterior traducción a cualquier otro idioma. Para traducirlos, debes utilizar la API de internacionalización de WordPress.

Para internacionalizar el tema hijo, sólo tiene que seguir estos pasos:

• Añade el directorio de idiomas. Por ejemplo, twentynineteen-child/languages/
• Añade archivos de idioma
• Cargar un dominio de texto
• Usa las funciones GetText, como una forma de añadir el soporte para las cadenas

En esta etapa, el tema hijo listo para ser traducido. Para asegurarte de que se internacionalizan correctamente para la traducción, tendrás que incluir el texto de domino twentynineteen-child en cada cadena.

Cómo crear un child theme en WordPress usando un Plugin

No te preocupes si no sabes como codificar, ya que siempre puedes usar un plugin para hacerlo por ti.

Puedes usar cualquiera de los siguientes plugins para crear un tema hijo de WordPress. Esto es especialmente útil si estás creando un blog por primera vez.

Child Theme Configurator

Con el plugin Child Theme Configurator de WordPress, puede crear fácilmente temas hijos a partir de sus temas existentes.

Child Theme Wizard

El Child Theme Wizard es otro plugin gratuito de WordPress. Seleccionas un tema, personalizas las opciones y haces clic en Crear tema hijo. ¡Eso es todo!

Child Theme Creator by Orbisius

El plugin Child Theme Creator by Orbisius te permite crear temas hijo a partir de cualquier tema que hayas instalado en tu sitio web de WordPress.

Childify Me

Si por algún motivo, ninguna de las opciones anteriores te convence, podrías considerar usar un plugin como Childify Me, que es muy fácil de usar PERO debes saber que usa un método antiguo para llamar al estilo padre, lo que podría impactar un poco en la velocidad del sitio.

Para usarlo, una vez instalado, buscas el botón Childify Me, escriba el nombre del tema hijo deseado y pulsas crear. Todo lo que tienes que hacer es publicar y activar.

Conclusión

En este tutorial, repasamos una guía completa sobre cómo crear un tema hijo en WordPress, cubriendo las dos formas de hacerlo: una manual y otra a través de plugins.

Los child themes en WordPress agilizarán el proceso de desarrollo de tu sitio web. Reducirán el riesgo de daños en cuando juegues con el estilo y son fáciles de instalar.

Y tu, ¿qué método vas a usar? Comenta más abajo cuál ha sido tu experiencia con una u otra forma de crear temas hijo.