Child Themes en Wordpress

A la hora de crear una web usando WordPress, una de las primeras cosas que buscas es personalizarla y, para ello, buscas un tema (plantilla) que te guste. ¿Y qué pasa si quieres personalizar aún más dicho tema? Para ello WordPress nos ofrece los child themes («temas hijo») una forma segura de realizar cambios en las plantillas sin que éstos sean borrados por actualizaciones.

Mis primeros contactos con los temas (plantillas) de WordPress fueron a través de Build Your Own Wicked WordPress Themes, un manual de SitePoint. Gracias a esto, descubrí las bondades de los Child Themes (temas hijo), una característica de WordPress muy útil pero no siempre conocida. Veamos el origen del problema y cómo los child themes lo solucionan.

El problema: las actualizaciones

Pongamos un ejemplo sencillo. Te descargas WordPress y lo instalas, vas al menú de temas y tienes un par de temas instalados por defecto. Estos temas no te convencen mucho, así que buscas un tema en el directorio oficial de WordPress y lo instalas. Ese tema ofrece algunas opciones para cambiar colores, logos y demás, pero tú quieres cambiar un elemento que no está en la lista, así que abres el archivo correspondiente (la hoja de estilos CSS, por ejemplo), y lo cambias. ¿Correcto? No del todo.

Los temas de WordPress, como cualquier código, pueden contener errores, problemas de seguridad, etc. Dichos problemas se van corrigiendo con actualizaciones, por lo que es recomendable mantener al día la plantilla que uses. Sin embargo, al realizar una actualización, todos los cambios que hayas hecho a tu plantilla se perderán. Tendrías que guardar una copia de las modificaciones y rehacerlas cada vez que actualizaras, o no actualizar nunca. Hay una forma mejor…

La solución: child themes para tus modificaciones

WordPress ofrece, de forma nativa, una forma mucho más cómoda y fácil de hacer tus modificaciones: los temas hijo. Un child theme es un tema que hereda funcionalidad (y aspecto) de una plantilla principal, pero que tiene prioridad sobre ésta.

Cómo crear un child theme en WordPress

Para crear un child theme, lo primero que necesitamos es, obviamente, un tema padre del que heredar. Hay temas mejor preparados para usar child themes que otros pero, en general, la mayoría los soportan.

Una vez elegido el tema que queramos modificar, creamos una carpeta nueva en nuestro directorio principal de temas (por defecto /wp-content/themes) con el nombre de nuestro tema y un archivo llamado style.css en ella. Es muy importante que ese archivo se llame así, de lo contrario no funcionará.

En el principio de ese archivo style.css, debemos introducir el siguiente código:

/*
Theme Name:     Nombre de nuestro tema hijo (requerido)
Theme URI:      Dirección web del tema hijo (opcional)
Description:    Descripción del tema hijo (opcional)
Author:         Nombre del autor del tema hijo (opcional)
Author URI:     Dirección web del autor dle tema hijo (opcional)
Template:       nombre de LA CARPETA del tema padre (requerido)
Version:        número de versión (opcional)
*/
Más información en el WordPress Codex: http://codex.wordpress.org/Child_Themes

En el resto de la hoja de estilos, podemos escribir código CSS normal y corriente. Dado que los archivos del tema hijo sobreescriben los del tema padre (más información a continuación), debemos importar el código CSS del tema principal. Se puede hacer usando la regla import

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

o, mejor aún, copiado el código entero a mano. Esto mejora un poco los tiempos de carga y otros problemas asociados a import.

Sólo con ese archivo ya tenemos un tema de WordPress, accesible desde el menú de administración. A partir de ahí, podemos modificar el tema tanto como queramos: incluir una captura de pantalla para el panel de administración, modificar el html de ciertas páginas, crear plantillas nuevas…

En este punto es muy útil saber cómo funciona la jerarquía de plantillas (template hierarchy) en WordPress. El sistema usa unas plantillas u otras dependiendo del tipo de contenido que se vaya a visualizar, del nombre del archivo de plantillas y de si el archivo está en un child theme o no. Con respecto al motivo de este artículo, debemos tener claro que -a mismo nombre de archivo- se usará siempre el del tema hijo antes que el del padre. El funcionamiento completo de la jerarquía de plantillas se entiende mucho mejor viendo un gráfico que con palabras.

Gracias a los child themes podremos modificar lo que queramos en nuestro tema, sin miedo a que una actualización del tema principal borre nuestro trabajo.

30 thoughts on “Child Themes en WordPress (Temas hijo)

  1. Gracias por este tutorial, he leido parecidos en la web, pero aunque los contenidos son practicamente iguales, las formas no lo son, ahi tienes una grata diferencia a tu favor.

  2. Hola, me ha gustado mucho este tutorial ya que es lo que estaba buscando, pero tengo un par de dudas que necesito que me aclaren, ya que voy a ponerlo en practica, antes tengo que decir que necesito hacerlo ya que he actualizado la versión de wordpress y el theme actual no lo soporta así que también tengo que actualizar el theme y como tengo hecha algunas variaciones sobre el theme original no quiero perderías. Dos preguntas: dices que tenemos que crear una carpeta dentro del directorio principal de temas con el nombre de nuestro tema ¿es decir que si mi tema actual se llama DK tengo que abrir una nueva carpeta con el mismo nombre?, esto no es posible, puede aclarármelo. Y segunda pregunta en el style.css ¿tengo que incluir una linea con el nombre del nuestro tema? ¿seria algo así si el tema se llamara DK: Theme Name: DK (requerido)?, muchas gracias por el aporte.

    1. tenemos que crear una carpeta dentro del directorio principal de temas con el nombre de nuestro tema

      Lo siento, quizá no esté bien explicado. Con «el nombre de nuestro tema» quería decir el nombre que le quieras poner al tema hijo. Puede ser el que quieras, sin espacios ni caracteres raros, lógicamente.

      En cuanto a la segunda duda, en el style.css tendría que poner esto si el slug del tema hijo es dk y el slug del padre es twentyeleven:
      /*
      Theme Name: dk
      Template: twentyeleven
      */

      Espero haber aclarado tus dudas.

    1. A la hora de actualizar, tendrás que actualizar el padre. De hecho, esa es la ventaja de usar este recurso: poder actualizar el tema padre sin perder los cambios que hayas hecho tú (en el hijo).

      De todos modos, el panel de administración te notifica de que hay actualizaciones en el tema padre y no en el hijo, por lo que no tendrás dudas 🙂

  3. Un par de preguntas más:
    ¿Cual de los dos temas tengo que tener activado, el padre o el hijo?.
    ¿Para no perder los cambios que hice sobre el tema original basta con tener el archivo style.css dentro de la carpeta del child theme?
    ¿Tengo que hacer la actualización del theme original con este activado?.

    Mil gracias por tu gran ayuda.

    1. Tienes que tener activado el hijo. Sólo con eso ya activas el padre «de rebote», por así decirlo.

      Sobre la otra pregunta sí, con eso llega. Recuerda que no sólo puedes trabajar con el archivo style.css, sino que puedes modificar cualquier archivo del tema padre (functions.php, index.php, page.php … lo que sea).

      De nada 🙂

  4. Como puedo agregar un child theme por defecto? o sea que cuando instale wordpress se active primero que nada ese tema y no el tema padre? agradesco la orientacion

    1. Hola Rod,

      La verdad es que nunca he hecho algo parecido. Por defecto, WordPress siempre activa uno de los que trae (TwentyEleven, TwentyTwelve…). No sé si se puede forzar a que active otro, nunca he probado. De todos modos, activar el tema hijo requiere sólo un click 😛

      1. muchas gracias por la respuesta, pasa que a veces cuando haces un child theme es bueno q se auto active, por si lo va a usar alguien que no tiene idea de wordpress

  5. Hola qué tal.
    Un poco desesperado y con los ojos ya rojos de buscar info, acudo a ti, que seguro me puedes aportar algo de luz en este mundo nuevo para mi.
    Te expongo mi situación:
    Estoy elaborando una web en wordpress. Compré una plantilla y la instalé, todo ok.
    Mi problema me surge cuando, debido a las exigencias, por un lado del cliente, por otro de las especificaciones de la web, modifiqué la caja container haciéndola de un ancho del 100% para que ocupara toda la pantalla a lo ancho, tiene un color de fondo transparente que queda muy chulo.
    Esta etiqueta container contiene todos los elementos de cada página (excepto header y footer).
    El problema es el siguiente. Necesitaría tener en determinadas páginas, una caja similar a la de container pero que en este caso no ocupe todo el ancho sino un ancho determinado (1072px).
    Es decir, necesito una caja contenedora de todo para algunas páginas y otra diferente para otras páginas. Esto, en una página html normal y corriente lo modificaba en cada una de las correspondientes páginas y listo, pero claro, wordpress no funciona igual.
    Disculpa el rollazo que te he metido, espero me puedas orientar por que estoy atascado y la sensación está empezando a ser desesperante…
    Muchísimas gracias por tu atención, un saludo.

    1. Hola Rafa,

      En WordPress en realidad es casi más fácil que en HTML normal y corriente :P.

      La gran mayoría de temas de WP usan una función llamada body_class(), que añade a la etiqueta body de todas las páginas un montón de clases muy útiles: nombre de la plantilla, tipo de página (blog, página, categoría…), id de la página…

      En tu CSS podrías aplicar selectores individuales para cada página, cada tipo de página, sección, etc. Por ejemplo, en esta mista web:

      .multi-column-page #primary {
      float: left;
      margin-right: 2.85714%;
      width: 57.1429%;
      }

      Ese primer selector, se añade a la etiqueta body gracias a esta función.
      Si tu tema no incluye esa función (es raro, pero algunos hay por ahí), es tan simple como poner le etiqueta body tal que así en tu html (o, más bien, php):

      <body <?php body_class(); ?>>

      (ups, editado porque WP me eliminaba el código php)

      Espero que te sirva de ayuda, y gracias por comentar.

      1. Muchísimas gracias Carlos.
        Me temo que aún no terminé de abusar de tu amabilidad.
        He estado trasteando con lo que me dices y creo intuir por donde van los tiros, pero obviamente, no del todo.
        Te cuento:
        Una página, que será la galería, está basada en el archivo template-portfolio.php. Es en ésta página en la que necesito cambiar la etiqueta container.
        En mi archivo css, ya cree una nueva clase que he llamado containere (nótese que tiene una -e al final para diferenciarla) con los atributos específicos que debe llevar. Necesito cambiar en esta galeria el contenedor .container por el nuevo creado .containere.
        Entiendo que la función llama a esta nueva clase, pero … ¿Dónde coloco esta frase «<body>» para que sólo afecte a la página que yo quiero y sólo a esa?
        Lo he utilizado en header.php y funciona!!!! pero lamentablemente ahora todas las páginas tienen ese aspecto que sólo quería para la galería.
        Siento molestar y ocupar tu tiempo, estoy muy verde con esto y no sabía que hacer ya.
        Muchas gracias, te invito a una cerveza encantado!
        Saludos, Rafa.

        1. Hola otra vez,

          Si la página está basada en template-portfolio, el body de esa página ya tendrá entonces una clase page-template-template-portfolio-php. No necesitas crear una nueva clase container, simplemente puedes hacer que se aplique el css específico para esa página usando el selector de body junto al otro:

          .container {
          (estilos normales)
          }

          .page-template-template-portfolio-php .container {
          (estilos para esa template en concreto)
          }

          Espero que con esto se solucione 🙂

  6. Muchas gracias por el tutorial, voy a intentar ponerlo en práctica. Una duda, para conservar archivos como el single.php o el footer.php bastaría por ejemplo por copiarlo a la carpeta del tema hijo no? Hay que añadir algún tipo de código antes como en el caso del archivo style.css?

    1. Siento mucho la enooorme tardanza en responder. Para conservar archivos lo único que tienes que hacer es no copiarlos en tu tema hijo, así se usarán los del padre. Los copias para sobreescribirlos.

  7. Buenos días.
    Soy nuevo en wordpress y tengo una duda. Utilizo el tema Virtue free y únicamente lo he personalizado con las mínimas cosas, es decir tipografía y sus colores, las configuración de los menus, la apariencia de la portada, he puesto algún plugin etc etc, vamos que todos los cambios lo he hecho a través del panel de wordpress.

    Bien pues me preocupa que desde ayer me sale que hay disponible una actualización para ese tema, y después de leer bastante he creado un tema hijo. Mi pregunta es la siguiente, la creación del tema hijo la realicé ayer, es decir que todo el trabajo de personalización del tema hasta la fecha y en gran parte esta hecho siempre en el tema padre virtue a secas (no el virtue-hijo). Ahora tengo activado el tema hijo, a lo que íbamos… ¿si actualizo el tema padre se perderán todas mis personalizaciones?, lo de poder actualizar el tema padre teniendo activado un tema hijo sin perder nada no es para cuando has empezado a personalizar el tema desde cero siempre a través del tema hijo???

    Si es así…¿como puedo actualizar sin riesgos?

    Muchas gracias de antemano.

    1. Hola,

      Estas instrucciones son para modificar los temas editando los propios archivos, no a través del panel de administración de WordPress. Para esos cambios puedes actualizar sin problema, ni siquiera necesitas temas hijo. Por si acaso, lo único que deberías hacer es una copia de la base de datos (puesto que es ahí donde se guardan tus cambios).

      Saludos y gracias por tu comentario.

          1. Ok, denuevo te doy las gracias!!! eres el único que se ha molestado en solucionar mi problema, ya que lo he posteado en dos sitios mas sin resultados.

  8. He entrado en muchas paginas para saber que es y como crear un tema hijo… tu explicación ha sido la más sencilla y práctica que he visto hasta ahora. Gracias!

  9. Hola,

    ¿lo que sea? pues me está resultando imposible sobreescribir un /plugins/pagebuilder/blocks/et-team-block.php
    si no hago nada más que copiar la ruta en el child, ni lo ve.

    Gracias,

    Rebeca

  10. hola buenas, los tutoriales estan muy interesantes, personalmente me ayudo mucho.
    Tengo una pregunta, he comprado template de wordpress, quisiera saber por cuanto tiempo me va durar, caduca? que pasara cuando pasen unos 5 años,por ejemplo?. Otra pregunta el mismo template que tengo podria utilizar con varios dominios, ?. Y por ultimo se pueden hacer templates desde cero?. gracias

    1. Hola,

      La única pregunta que puedo responderte es la última: sí, se pueden hacer templates desde cero. La que yo uso está hecha así, por ejemplo.

      Las otras preguntas las tendrás que preguntar a quien te vendió el template, cada proveedor tiene unas condiciones diferentes.

      Saludos

  11. Hola Carlos,
    quería preguntarte si conoces alguna web que liste con demos los hooks del Core de WP, de parent themes y de child themes.
    Y… ¿hay alguna forma de saber qué hooks tiene cualquier theme de WP sin tener que probarlo?
    Gracias de antemano.

    p.d.: he intentado mandar antes un comentario con palabras similares, pero creo que se perdió (por si te sale repetido).

Deja una respuesta

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

Facebook