Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Cómo y por qué crear un tema “hijo”, child theme, para WordPress

Imago voragine.net
[actualizado el ]

Los temas hijos, child themes, en WordPress son aquellos que heredan las características de otro tema “padre”, parent theme, del que dependen. La utilidad de los child themes reside en poder personalizar un sitio sin tener que crear un tema desde cero, ya que lo que no se defina en el child theme, éste lo heredará del parent theme.

Para que WordPress reconozca un tema como child, lo único que debemos hacer es definirlo convenientemente en el archivo style.css, el único que tenemos que incluir en la carpeta del tema obligatoriamente. Para ello, incluimos la definición Template en la descripción comentada al principio de style.css, y le asignamos como valor el nombre de la carpeta del parent theme:

La carpeta con el nuevo child theme la subiremos a la carpeta de temas (wp-content/themes/), no a la del tema del que depende; podemos llamarla como queramos.

Luego solo nos queda seleccionar el child theme en el gestor para activarlo.

Una posible cabecera completa para el style.css de un child theme:

En este style.css podemos definir los estilos del child theme por completo. Si solo queremos redefinir unos cuantos y heredar el resto, tenemos que hacer una llamada a la hoja de estilos del parent theme para incluir sus estilos:

Hay que tener claro que merece la pena recurrir a un child theme para hacer modificaciones de estilo o añadir algún contenido específico mediante una plantilla de página que el parent theme no tenga. Cuando son necesarias modificaciones estructurales de un tema, desarrollar un child theme empieza a ser dudoso.

Un child theme puede servir para modificar a nivel de estilo un tema que nos hemos descargado y del que no queremos dejar de tener la última versión. Usando un child theme podremos actualizar el tema sin miedo a perder los cambios que hayamos realizado.

Otro caso en el que los child themes son útiles es para gestionar un WordPress Multisite y permitir que cada sitio de la red pueda modificar su plantilla sin multiplicar el mantenimiento.

Actualización: La manera de incluir la hoja de estilos del tema padre que explico arribaq no es la mejor, aunque funciona. Es mejor hacerlo mediante una función en el archivo functions.php del tema hijo:

20 comentarios

  1. Gracias por la guía. Clarificar que en el apartado “template” tenemos que poner el nombre del tema “parent” y que es “case sensitive”, esto es, que importan espacios y mayúsculas minúsculas. Para el tema “Twenty Ten” sería “Template: twentyten”.

  2. Gracias por la aclaración numeroteca, es el típico detalle que te puede volver loco.

    • Por juan fran gonzález •

    Saludos, muchas gracias por el artículo, me surge una duda

    descargué para mi website wordpress una plantilla, pero como era demasiado básica, empecé a modificarle los archivos css, php, js, etc, de tal modo que de la plantilla original ya no queda mucho, pero todas estas modificaciones fueron hechas sobre los archivos de la plantilla original porque no sabía lo del child

    la cuestión es que si los creadores de la plantilla lanzan una actualización, como hago para actualizar sin perder mis cambios?

  3. Hola juan fran,

    una de las ventajas de trabajar con un child theme es precisamente esa, que puedes actualizar el parent theme y no perder tu personalización.

    No hay manera de que no pierdas tus cambios si actualizas el theme.

    Quizás es el momento de inviertas algo de tiempo en crear un child theme con esos cambios y así te aseguras independencia del parent theme.

      • Por juan fran gonzalez •

      muchas gracias por tu respuesta, en el cpanel cambié el nombre del directorio de la plantilla

      de photoresponsive le cambié el nombre a photo

      aun as+i me borra los cambios? aun asi debo hacer el child?

      teneindo en cuennta que las modificaciones a la plantilla son casi del 90 por ciento?

      me preocupa la obsolecencia a futuro de mi plantilla y por eso me gustaría porderla actualizar

      me disculparas pero como veras , soy principienate en el asunto :)

      1. Juan fran, el nombre de la carpeta no define nada en el theme, así que cambiándolo no consigues nada, como has comprobado.

        El nombre de un theme y otras variables lo puedes encontrar en las primeras líneas del archivo style.css, las que están comentadas: allí encontrarás información sobre el autor, la versión.

        Para conservar tus cambios es imprescindible que crees el child theme, si no los perderás.

        La otra opción es que no actualices el theme. Ya que has cambiado tantas cosas, quizás no merece la pena actualizarlo.

  4. En la misma línea, pero en catalan, acabo de publicar un artículo de introducción a los child themes aquí: http://jordigran.com/temes-fill-de-wordpress/

  5. HOla! Gracias por el post. Hace rato que estaba en duda en cuanto a crear o no un child theme. Siempre creí que era conveniente hacerlo (si bien no entendia mucho como funcionaba) hasta que leí tu post y entendí que es mas bien para las modificaciones de estilo y no tanto de estructuras o funcionamiento. De nuevo, gracias!

    • Por cris •

    Hola! Mil gracias por el post.Ha sido breve y muy claro.
    Soy nueva es todo esto.
    Por favor dime, para modificar las estructurasso lo debo tocar el css o también el php?

    GRACIAS!!!!

    1. Hola cris, pues depende de los cambios… Pero generalmente los cambios en la estructura dependen también de PHP.

    • Por Omar

    “Cuando son necesarias modificaciones estructurales de un tema, desarrollar un child theme empieza a ser dudoso.”

    ¿En estos casos es mejor plantear un theme de cero?

    1. Hola Omar,

      ésta es una decisión difícil, ya que empezar un theme de cero implica un tiempo de desarrollo considerable.

      Sin embargo, cuando son necesarias modificaciones estructurales, como comento en el post, no tiene mucho sentido hacer un child theme, ya que el código no es reutilizable.

      Lo que se puede hacer como solución intermedia es copiar el theme y hacer las modificaciones estructurales necesarias. De esta manera se evita tener que empezar un desarrollo de cero, aunque se perderán las ventajas de un child theme.

    • Por Alex •

    Hola! He creado un tema hijo de Hueman y tengo un problema que no logro solucionar. Una vez lo creo y lo activo no se me carga la hoja de estilos es decir… me queda con lo justo para ser modificado, me cambia todo y no se porque ya que me sale que lo tengo todo bien y que es tema hijo de Hueman cual puede ser el problema? Me podrías ayudar? Gracias!

    1. Hola Alex,

      quizás falta que incluyas la hoja de estilos CSS del tema padre. Como explico en el post debes incluir la siguiente línea en el archivo style.css de tu child theme:

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

  6. Saludos

    Han probado el plugin ”Orbisius Child Theme Creator”? yo lo instale ayer y me creo automáticamente el tema hijo a mi plantilla parece que funciona bien, yo soy nuevo en todo esto y a lo mejor la pregunta es tonta pero ahí va, en que plantilla debo trabajar osea cual tema elijo para seguir creando mi pagina el tema padre o el tema hijo? No me queda claro ojala y me puedan dar una explicación lo mas completa posible gracias

    1. Hola DanielVP,

      los cambios los tienes que hacer en el tema hijo. Por así decirlo, las reglas del tema hijo sustituyen a las reglas equivalentes del tema padre; si no hay regla para algo en el tema hijo, se hereda la regla del padre.

    • Por martin b •

    Tengo una grann duda: el respaldo que hace el tema hijo es solo sobre los cambios que hayamos hecho en el fichero Style?

    Tengo un tema instalado en uno de mis sitios, al que le hecho varias modificaciones, no solo en el fichero Style, sino también en Funciones, Footer, y en vaaarios ficheros más.

    Y resulta que hay una nueva versión de ese tema, pero tengo miedo de actualizar. El tema hijo me conservaría absolutamente todos los cambios que haya hecho en mi sitio, sin importar en qué fichero haya sido efectuado el cambio?

    1. Hola martin b,

      sí, el tema hijo te permite conservar todos los cambios, no solo los que hayas hecho en el style.css. Puedes actualizar sin problema.

    • Por samuel •

    Hola buenas,
    Tengo un problema con el tema hijo. No consigo que me cargue un archivo .php del tema hijo, el archivo style.css es el siguiente:

    /*
    Theme Name: great-hijo
    Template: great
    */
    @import url(“../great/style.css”);

    y estoy modificando el archivo template-tags.php, lo he copiado en la misma ruta en el tema hijo pero me sigue cargando el archivo del tema padre, en cuanto modifico el archivo en el tema padre veo la modificación, si lo hago en el archivo del tema hijo no sucede nada.

    Me ocurre lo mismo con otra plantilla, no me carga un archivo .php del tema hijo y si el del tema padre. Así que algo estoy haciendo mal.

    Llevo varios días con este asunto y no consigo nada.
    ¿Podrías orientarme?

    Gracias.

    1. Hola Samuel, el procedimiento que describes es correcto. Lo que se me ocurre que puede estar pasando es que tengas aún activo el parent theme en vez del child theme…

Dejar un comentario

*
*

 

10 trackbacks