Una característica poco explotada por muchos desarrolladores que conozco son los Temas hijos en WordPress (Child Themes). En este post daré una explicación de lo que son los Temas hijos en WordPress y cómo utilizarlos.

Uno de los problemas más comunes que me toca escuchar con mis amigos que hacen desarrollo web (y también me ha pasado a mi) es el siguiente:

“Actualicé el tema y perdí todos los cambios que había hecho”

Por lo que decidí hacer este post donde explicaré la funcionalidad de Temas hijos en WordPress, o Child Themes en inglés, espero le pueda salvar muchas horas de trabajo a más de uno.

Temas hijos en WordPress

Los Temas hijos en WordPress son temas que heredan las funciones y estilos de otros temas conocidos como “Temas padre”. El uso de estos temas asegura que se puedan hacer los cambios necesarios sobre el tema y a la vez conservar los archivos originales del Tema padre, también es necesario mencionar que los Temas hijos en WordPress son muy útiles debido a que permiten conservar los archivos modificados incluso cuando el Tema padre se actualiza.

Requerimientos

  • Tener una instalación de WordPress
  • Haber seleccionado e instalado un tema
  • Tener acceso al panel de WordPress y a la carpeta de instalación
  • Opcional: Tener un editor de código para facilitar las pruebas que se harán sobre el CSS

A trabajar

Una vez teniendo la instalación de WordPress (en mi caso utilicé mi servidor local MAMP), así se verá al comienzo nuestra categoría “Apariencia”, mostrando los temas predeterminados de la instalación (Versión 4.3).

Temas WordPress

Ahora nos dirigimos a la carpeta de instalación de WordPress y posteriormente a wp-content/themes. En este caso haremos un Tema hijo (Child theme) del tema “Twenty Fifteen”, para hacer el tema es necesario crear una carpeta con el mismo nombre que el tema a modificar y agregar al final “-hijo” o “-child”, esto es por mera conveniencia y no tiene impacto real sobre la funcionalidad.

Temas hijos en wordpress
Temas hijos en wordpress

Dentro de la nueva carpeta del Tema hijo, solo es necesario tener un archivo llamado style.css para que el Tema hijo comience a trabajar en WordPress.

Child theme wordpress

Una vez creado el archivo style.css, WordPress sugiere poner las siguientes líneas al comienzo del archivo (es un ejemplo del tema Twenty Fourteen).

/*
 Theme Name: Twenty Fourteen Child
 Theme URI: http://example.com/twenty-fourteen-child/
 Description: Twenty Fourteen Child Theme
 Author: John Doe
 Author URI: http://example.com
 Template: twentyfourteen
 Version: 1.0.0
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: twenty-fourteen-child
*/
@import url("../twentyfourteen/style.css");

/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

Sin embargo, el único código necesario es el que se encuentra en la línea 12, ya que es la que contiene los estilos del tema padre, que serán modificados por las líneas CSS que agreguemos en las líneas posteriores.

Mi archivo style.css lucirá en un comienzo así:

@import (url("../twentyfifteen/style.css"))

En este momento si volvemos a la sección apariencia de nuestro WordPress ya podremos ver nuestro nuevo tema hijo.

Temas hijos en wordpress

A partir de este momento podremos activar el tema hijo y con menear a modificar el código CSS sin temor a perder los cambios con futuras actualizaciones del mismo.

Documentación oficial de WordPress

En español: https://codex.wordpress.org/es:Temas_hijos

En inglés: https://codex.wordpress.org/Child_Themes