Crear tema hijo en wordpress “child theme”

Todos los temas actuales de Wordpress, nos ofrecen una sección para personalizar la CSS del tema para que estas modificaciones no sean eliminadas al actualizar tema. En la mayoría de las ocasiones con esta opción será suficiente para poder tener el tema de Wordpress a nuestro gusto. Pero  puede ser que además de la CSS, necesitemos añadir, quitar o mover algún elemento HTML en los ficheros de Wordpress. Si modificamos código de los ficheros de Wordpress , al actualizar el tema, todas estas modificaciones serán ELIMINADAS¡. Para evitar esto es necesario crear un tema hijo o “child theme”. NO todos los temas de Wordpress lo permiten, pero aquí os dejo documentado como intentar hacerlo.

 

Crear la carpeta para el child theme

Lo primero que debemos hacer, para realizar un tema hijo o “child theme” es crear una carpeta, en /wp-content/themes. Podemos ponerle el nombre que queramos, pero siempre es mejor poner algo descriptivo, por ejemplo: nombretema-hijo.

 

Crear el fichero style.css

Ahora, dentro de esa carpeta, crearemos la hoja de estilos, “style.css”, que es la que une el tema padre e hijo. En este nuevo fichero copiaremos la cabecera de la hoja de estilos del tema padre, y dejaremos estas líneas:

/* Theme Name: gastefilo

Theme URI: https://raulperez.tieneblog.net

Author: Raúl Pérez

Author URI: https://raulperez.tieneblog.net

Description: tema hijo para gastefilo by Raúl Pérez

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html 

Template:spacious 

*/

@import url("../tema-padre/style.css");

/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/

 

Vamos a desglosar, que es cada línea de esta cabecera en la CSS y su importancia

Theme Name: se pone un nombre al tema hijo que estamos creando, podemos improvisar, es obligatorio.
Theme URI: se pone la URL del sitio del creador del child theme, no es obligatorio
Author: nombre del autor del child theme, no es obligatorio.
Author URI: URL del sitio web del creador del child theme, no es obligatorio.
Description: descripción del tema hijo, no es obligatorio.
License: tipo de licencia del tema, no es obligatorio.
License URI: URL del sitio de la licencia, no es obligatorio.
Template: aquí debemos poner el nombre del directorio que contiene el tema padre, obligatoriamente.
@import url(): entre los paréntesis debemos poner la URL, de la css principal, del tema padre, es totalmente obligatorio.

 

Activar el child theme

Una vez correctamente editada esta información, sólo nos queda activar este tema hijo, en la sección de Apariencia->Temas. Ahora podemos hacer modificaciones en esta hoja de estilos, sin temer que se pierdan al actualizar.

child-theme

 

Modificar el child theme

Ahora podemos modificar los estilos usando el fichero style.ccs del child theme en vez de usar la herramienta de “Personalizar CSS” que nos ofrece Wordpress. Además si aparte de realizar modificaciones en la hoja de estilos, necesitamos modificar código en cualquier fichero, utilizaremos también el tema hijo, para que las actualizaciones no nos hagan perder estos cambios.

Para ello:
Si por ejemplo, necesitaríamos modificar el footer.php, lo copiaríamos dentro de la carpeta del tema hijo, y lo modificaríamos a nuestro gusto.

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.