HOME || Wordpress || Como crear un tema HIJO en WordPress
Creado el: 14 marzo, 2019 - Actualizado el: 2 abril, 2019 - Autor: lornal
AMP Versión AMP: Como crear un tema HIJO en WordPress (Versión AMP)

Como crear un tema HIJO en WordPress

Como crear un tema HIJO en WordPress

Crear un tema HIJO en WordPress. Para qué sirve. Como se hace. Hoja de estilo CSS propia.

Indice de contenido

La necesidad de un Tema hijo

La creación de un Tema HIJO en WordPress es un procedimiento muy fácil. Todavía te estás preguntando para que sirve? pues es sencillo. Cuando instalas WordPress lo primero que harás es elegir el tema que más te gusta, lo instalarás y activarás. Como segundo paso general comenzarás a editar ese tema modificando algunas líneas en el archivo de estilo CSS y en las plantillas PHP.

Hasta ahí todo muy bien, pero en unos días o quizás semanas, meses cuando ya hayas modificado lo suficiente como para perderte en el código y estructura de tu sitio y que ya no te acuerdes cuales son las líneas de código originales de tu tema y cuales son las tuyas, de repente te cae una actualización del tema que usas en WordPress. El creador ha decidido actualizarlo para, entre otras cosas, ofrecer mayor seguridad por lo que no puedes dejar de instalar la actualización de tu tema.

Al momento en que hagas clic en Actualizar Tema estarás perdido si es que no creaste un tema HIJO, todas esas modificaciones que hiciste se borrarán. Cuando un tema se actualiza se borra por completo y se descarga e instala nuevamente, los archivos nuevos reemplazan a los viejos sin ningún tipo de pregunta.

Así que si todavía no empezaste a crear tu sitio en WordPress o estás en proceso de ello éste es el artículo que debes leer, pero léelo ya! No dejes de hacer lo que te explicaré en los próximos párrafos, por que una vez que empieces a editar tu proyecto y le hagas muchas modificaciones luego va a ser muy difícil identificarlas y separarlas del resto del código del tema que uses.

Y si ya tienes cientos de entradas, todas editadas y con un formato propio y te ha llegado una actualización de tu tema es mejor que hagas este procedimiento de crear un tema hijo en WordPress, de lo contrario perderás todo lo que hayas hecho, sí!!!, todas las modificaciones que le hayas hecho al CSS de tu tema o al código PHP, incluidas las funciones que has agregado para que tu sitio realice alguna operación o te funcione algún Plugins, se perderán, se reemplazarán por los archivos nuevos de la actualización.

Manos a la obra. Comencemos a explicar el paso a paso de este sencillo pero indispensable procedimiento.

Video Tutorial – Como crear un tema HIJO en WordPress

Crear Tema HIJO en WordPress

Todo HIJO está hecho en base a un PADRE y esta no es la excepción. Tu nuevo tema estará basado en el tema original, será una copia exacta pero con las modificaciones que le hayas hecho hasta el momento. Es por eso que la operación de crear un tema HIJO es tan fácil y no hay motivo para dejar de hacerla.

Antes de empezar y tocar algo te recomiendo realices una copia de seguridad de todo tu sitio. Aprovecha a realizar un Backup de todo, archivos y base de datos. Si no sabes hacer una copia de seguridad de tu sitio WordPress visita el enlace de abajo donde te explico el procedimiento para hacerlo.

Crear copia de seguridad de todo WordPress

Paso 1 – Crear Carpeta tema hijo

Lo primero que deberás hacer es crear una carpeta dentro de wp-content/themes/ de tu sitio WordPress.

Esa carpeta debe llamarse igual que la carpeta del tema que usas en WordPress pero le vas a agregar el sufijo _hijo.
Por ejemplo: Si tu tema se llama Gran Template de WordPress y la carpeta que contiene sus archivos está en wp-content/themes/granTemplateWP/ deberás crear una carpeta en wp-content/themes/granTemplateWP_hijo

Si ya tienes muchas modificaciones en tu tema lo que te conviene hacer es copiar y pegar toda la carpeta de tu tema, directamente con todos sus archivos dentro. Se te creará una copia exacta, te quedará por renombrar la nueva carpeta con el nombre exacto a la carpeta de tu tema y el sufijo _hijo

Paso 2 – Copiar archivos

Si lo que hiciste fue copiar la carpeta entera con todos sus archivos dentro por tener muchas modificaciones este paso ya lo tendrás resuelto.

Dentro de esta carpeta vas a colocar una copia del archivo style.css y de los archivos PHP a los cuales les hayas hecho alguna modificación. Por ejemplo si a functions.php le modificaste algo o agregaste una función completa cópialo a tu carpeta HIJO. No es necesario copiar archivos a los cuales no les hayas modificado nada.

Si es el caso que todavía no le hiciste ningún cambio a la hoja de estilo (archivo style.css) también podrás prescindir de copiarlo aunque tendrás que crear un archivo style.css en tu carpeta HIJO. Este archivo estará vacío y luego lo modificaremos para que tu tema HIJO se “acople” al tema PADRE.

El archivo style.css es el único archivo imprescindible que debe estar en tu tema HIJO. Sin este archivo el procedimiento no funcionará.

Paso 3 – Modificar CSS del tema HIJO

El próximo paso, imprescindible para que todo esto funcione, será modificar el encabezado de la hoja de estilo CSS de tu tema HIJO para que importe el contenido del tema PADRE el cual tienes activado en WordPress. Para esto abre el archivo wp-content/themes/granTemplateWP_hijo/style.css y borra todo el encabezado para reemplazarlo por el siguiente texto:

Recuerda que si no hiciste ningún cambio en la hoja de estilo del tema PADRE podrás borrar todo el contenido del archivo style.css del Tema HIJO pero es imprescindible que escribas el encabezado siguiente.

/*
Theme Name: Gran Template de WordPress HIJO
Theme URI: https://www.dontecno.com/wp-content/theme/granTemplateWP_hijo
Version: 1.0
Description: Tema hijo de Gran Template de WordPress
Author: dontecno
Author URI: https://www.dontecno.com/
Template: granTemplateWP
*/
 
@import url("../granTemplateWP/style.css");
 
/*----------------- 
 Aquí debajo comienza el código CSS de la hoja de estilo del tema hijo
-------------------------------*/

Debes concentrarte en cambiar lo siguiente (líneas 2, 8 y 11 destacadas en el código)

Theme Name: Escribe el nombre de tu tema HIJO. Puede ser cualquiera. Es el nombre que aparecerá en Apariencia –> Temas de WordPress.

Template: Nombre del directorio del tema PADRE. En nuestro ejemplo el tema estaba en la ruta wp-content/themes/granTemplateWP/ por lo que el valor de este parámetro será granTemplateWP . Debes escribir este valor sin errores, de otra manera no funcionará.

@import: Por último editamos la línea

@import url("../granTemplateWP/style.css");

En este último parámetro deberás escribir de manera relativa o absoluta el enlace URL de la hoja de estilo de tu tema PADRE.

Con esta última línea le indicamos a WordPress que debe importar la hoja de estilo del tema PADRE. Esta hoja de estilo tendrá una jerarquía más baja que la hoja de estilo HIJO. Que quiere decir esto?, que cuando se carga una página y se leen todas sus hojas de estilo para dar formato a todo su contenido hay diferentes niveles de jerarquía para aplicar los formatos. Supongamos que en la hoja de estilo le decimos al navegador que coloque el texto de todo el sitio en color negro pero luego en la etiqueta BODY de la página indicamos que sea rojo, el texto tomará el valor de la etiqueta BODY ya que tiene un nivel de jerarquía más alto que la hoja de estilo. Lo mismo pasa con nuestro tema HIJO, el mismo tendrá siempre una jerarquía mayor al Padre. En este caso las leyes de la naturaleza no obedecen, el PADRE obedece al HIJO 🙂

A partir de ahora cada vez que hagas un cambio en el formato de tu sitio utilizarás el archivo style.css de tu tema HIJO. Así cuando el Tema PADRE se actualice por alguna mejora de seguridad o contenido no perderás los cambios que hayas hecho.

Es importante que sepas que debes respetar el nivel de directorios que tiene tu tema PADRE. Si vas a modificar el archivo:

wp-content/themes/granTemplateWP/template-parts/content.php

deberás crear en el tema hijo el mismo nivel de directorio:

wp-content/themes/granTemplateWP_hijo/template-parts/content.php

Paso 4 – Modificar plantilla PHP

Un caso que seguramente llegarás a hacer en tu paso por WordPress será insertar alguna función para realizar una tarea específica, por ejemplo la de Cambiar el formato del enlace Leer más en las entradas de WordPress

Esto se hace directamente en el archivo functions.php del Tema PADRE. Pero que pasa si quieres agregar una función nueva y el tema se actualiza? Ahí es donde entra de nuevo la gran ayuda de nuestro Tema HIJO.

Para hacer cualquier modificación a un archivo de plantilla del tema deberás crear un archivo en la misma jerarquía de directorio que el tema PADRE pero en la carpeta de nuestro tema HIJO.

Por ejemplo, el archivo

wp-content/themes/granTemplateWP/functions.php

contiene las funciones necesarias para que el tema haga ciertas operaciones. Entonces creas un archivo nuevo en

wp-content/themes/granTemplateWP_hijo/functions.php

y le agregas alguna función nueva o modificada para que WordPress la cargue cuando se solicite. De la misma manera que con las hojas de estilo los archivos de plantilla (los PHP) del tema HIJO tienen mayor jerarquía que los del tema PADRE. Por lo que una función leída desde el tema hijo reemplazará a la misma función que esté en el tema padre. Así que ya sabes, a partir de ahora todo cambio en los archivos de plantilla PHP los harás desde el nuevo tema HIJO

Para crear un archivo nuevo PHP solo debes crear un simple archivo de texto (con el bloc de notas) y guardarlo con la extensión PHP (reemplazas la extensión TXT). También hace falta que este archivo tenga una etiqueta de apertura, la etiqueta PHP. Vemos un ejemplo de archivo PHP común con una función insertada:

<?PHP
/** Aquí empieza una función nuestra que agregamos y no queremos que cuando se actualice el tema PADRE se borre */
function modify_read_more_link() {
    return <img src="' . home_url() . '/IMG/leermas.png"> <a href="' . get_permalink() . '">Leer más...</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

Los archivos PHP tienen también una etiqueta de cierre ?> pero para este archivo en concreto (functions.php) no hay que escribirla.

Paso 5 – Activar tema Hijo

Una vez terminado de crear carpeta y archivos en nuestro tema HIJO solo hay que activarlo desde el editor de WordPress.

Para esto dirígete a Apariencia –> Temas y selecciona el tema que has creado. En este ejemplo debería aparecer como Gran Template de WordPress HIJO que es el nombre que le dimos en el encabezado de archivo style.css

Una vez seleccionado, Actívalo.

Listo! La creación de tu nuevo tema HIJO en WordPress ha terminado y ya está funcionando. A partir de ahora éste será el tema utilizado por WordPress y estará acoplado al tema original.

Resumen

Vimos como crear un Tema HIJO en WordPress

Vimos la importancia de crear un tema HIJO en WordPress para mantener las modificaciones que le hagamos a todo nuestro sitio aún cuando el tema original se actualice.

El proceso es bastante sencillo, solo hay que seguir los pasos tal cual los describimos, crear carpeta del tema HIJO, copiar los archivos necesarios y modificar la hoja de estilo CSS del nuevo tema para que importe el contenido del tema original.

Por último activar el nuevo tema para que quede operativo. A partir de ahora ya no deberás preocuparte más cuando haya una actualización en el sistema de Tema que utilices y tendrás siempre la última versión del mismo si es que el creador lo ha actualizado para agregarle nuevas funcionalidades o simplemente ofrecer mayor seguridad en el mismo.

Te fue útil el artículo? Califícalo

Votos: - Promedio: