Crear tema hijo en WordPress

Tabla de contenidos

¿Por qué es recomendable crear tema  hijo en WordPress? Cuando instalamos un tema, normalmente se tiende a modificar los estilos, cambiar imágenes, cambiar estructuras o implementar código con el fin de ajustar el tema a nuestro gusto. Esto conlleva un problema, si en el futuro hay alguna actulización para nuestro tema y la activamos, podremos perder parte o todas las modificaciones realizadas, y en el caso que decidamos no actualizar el tema, no nos beneficiaremos de las mejoras que nos pueda ofrecer la actualización del tema tanto en optimización como en seguridad.

¿Qué es un tema hijo?

Los temas hijos o child themes son temas que creamos nosotros, están vinculados al tema padre de forma que podamos beneficiarnos de toda su base y sólo modificar los archivos que vayamos incluyendo dentro de nuestra carpeta de nuestro tema hijo, pudiendo realizar todas las modificaciones que queramos sin afectar las posibles actualizaciones del tema padre.

Cómo crear un tema hijo en WordPress

En primer lugar debemos de crear una carpeta con el nombre de nuestro tema hijo (el nombre que queramos) y subirla al mismo directorio donde se encuentran todos los temas de wordpress ( wp-content/themes/ ).

Seguidamente creamos un archivo «style.css» con la siguiente configuración:

/*
Theme Name: EL NOMBRE DE NUESTRO TEMA
Description: DESCRIPCIÓN DE NUESTRO TEMA
Author: EL AUTOR
Author URI: WEB / BLOG DEL AUTOR
Version: LA VERSIÓN DE NUESTRO TEMA
Tags: ETIQUETAS DE NUESTRO TEMA
Template: EL NOMBRE DE NUESTRO TEMA PADRE
*/

@import url('../NUESTRO TEMA PADRE/style.css');
/* A partir de aquí podemos insertar nuestras
modificaciones css */

Imaginemos que nuestro tema padre se llama «Responsive» y nuestro tema hijo lo vamos a llamar «Mitema«, la configuración de nuestro style.css del tema hijo sería la siguiente:

/*
Theme Name: mitema
Description: Theme Responsive Hijo
Author: Minombre
Version: Responsive hijo 1.0
Tags: responsive, movil, etc
Template: responsive
*/

@import url('../responsive/style.css');
/* A partir de aquí podemos insertar nuestras
modificaciones css */

Una vez tengamos nuestro style.css creado, lo subimos a la carpeta del tema hijo, en este caso «mitema».

crear tema hijo en wordpress

También podemos crear nuestra imagen en miniatura de nuestro tema hijo copiando la imagen que aparece en nuestro tema padre llamada screenshot.png y modificandola a nuestro gusto, una vez modificada la subimos junto a nuestro archivo style.css dentro de la carpeta del tema hijo.

Y con esto ya tenemos preparado nuestro tema hijo para ser modificado sin perjudicar las futuras actualizaciones del tema padre, sólo nos queda activar nuestro tema hijo desde el panel de control de nuestra web y configurarlo como un tema normal desde el panel de WordPress (logos, cabecera, etc).

wordpress tema hijo responsive

 

¿Cómo hacer las modificaciones en el tema hijo?

Antes de ponernos a modificar e importar archivos del tema padre al tema hijo tenemos que tener claro estos tres puntos:

  • STYLES.CSS – Los estilos se sobreescriben, es decir que si añadimos un fondo diferente al body, predomina el estilo creado en el tema hijo.
  • FUNTCTIONS.PHP – Los archivos functions se ejecutan tanto el del padre como el del hijo,  no podemos utilizar la misma función que exista en el tema padre a no ser que se compruebe primero si existe esa función antes de declararla.
  • Y el resto de ficheros se sobreescriben, por ejemplo si en el tema hijo tenemos un header.php, éste será el que se ejecute, ignorando el fichero header.php del tema padre.

 

tema hijo con header

 

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

2 respuestas

  1. Hola

    He creado dos temas hijo para los temas «Iconic One» y «Basically». Pero al activarlos la página pierde todos los widgets, la cabecera…..etc. Parece que estuviera medio «rota»

    Sabes que puede ser?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Relacionados: