Tutorial Child Theme I. Cambia el estilo de tu plantilla wordpress

Tutorial creando Child Theme

Imaginemos esta situación: entras en el código y cambias el estilo de la plantilla, al día siguiente la plantilla recibe una actualización crítica de seguridad. Ya tienes un problema, si actualizas la plantilla pierdes tus cambios en el diseño.

Este escenario seguro que nos ha pasado a más de uno. En este tutorial veremos que la solución es crear un Child Theme.

La forma correcta de cambiar el estilo de tu plantilla WordPress es crear un Child Theme

¿Qué es un Child Theme?

Un Child Theme es una plantilla que hereda el diseño y funcionalidad de otra plantilla que llamamos padre. Dentro de un Child Theme podemos sobreescribir el diseño y funcionalidad de la plantilla padre. También podemos añadir nuevas y mejores funcionalidades, como veremos en siguientes tutoriales.

Creando un ChildTheme

Ahora veamos un ejemplo real paso a paso. Para ello utilizamos Orbit como tema padre. Instalamos el tema Orbit y lo activamos.

Ahora creamos un Child Theme que se va a llamar childorbit. Basta con añadir una carpeta llamada childorbit dentro de la carpeta de plantillas de WordPress.

/path/to/blog/wp-content/themes/childorbit/

Dentro de la carpeta childorbit creamos una hoja de estilo llamada style.css con el siguiente contenido.

/*
   Theme Name: childorbit
   Theme URI: bitado.com/childorbit
   Description: Child Theme. Parent Theme Orbit
   Author: Pinto
   Author URI: bitado.com
   Template: orbit
   Version: 0.1
*/
@import url("../orbit/style.css");

Este es el contenido mínimo que debe tener un fichero style.css para que WordPress entienda que es un Child Theme. A continuación explicamos las lineas importantes.

Línea de Código
Theme Name: childorbit El nombre para el Child Theme
Template: orbit El nombre de la plantilla padre (de la que heredamos)
@import url("../orbit/style.css"); Importa la hoja de estilo de la plantilla padre

Ya podemos activar childorbit como plantilla de nuestro blog. Vemos que se muestra exactamente igual que la plantilla padre. Hasta aquí todo correcto, ahora vamos con nuestra personalización.

Antes de ponernos a picar código vamos a planear nuestros cambios. En nuestro ejemplo, queremos que los títulos dentro de las entradas del blog sean de color rojo y que el margen inferior sea mayor.

Boceto con la personalización de la web

Buscando el código a cambiar

Necesitamos encontrar el códido CSS que aporta el estilo a esos títulos. Par ello usamos el navegador Firefox u otro con el que estemos familiarizados. Seleccionamos el título dentro del post y con el botón derecho del ratón pinchamos inspeccionar elemento.

Selección en el navegador del elemento a personalizar

Tendrás algo parecido a lo siguiente.

Ventana de firefox mostrando los estilos de la página

Vemos que nuestros títulos son etiquetas h2 y el código CSS que proporciona el estilo es el siguiente.

Estilo del título

El código que nos interesa es este:

.content-entry h2 {
	margin-bottom: 12px;
}

Desde el mismo Firefox podemos cambiar ese estilo. En este caso cambiamos el margen inferior a 20px y añadimos una linea nueva con el color deseado #a60800. Quedando así:

Estilo del título cambiado

En cuanto realizamos los cambios la página se actualiza de inmediato. Es una buena forma de comprobar cómo va a quedar nuestra personalización antes de añadir ningún código.

Vista de la página con la personalizción

Jugamos con los parametros hasta que estamos conformes con los cambios y copiamos el código CSS de Firefox a nuestro fichero style.css.

/*
   Theme Name: childorbit
   Theme URI: bitado.com/childorbit
   Description: Child Theme. Parent Theme Orbit
   Author: Pinto
   Author URI: bitado.com
   Template: orbit
   Version: 0.1
*/
@import url("../orbit/style.css");
	
.content-entry h2 {
	margin-bottom: 20px;
	color: #a60800;
}	

Actualizamos el navegador para ver el resultado y ya tenemos nuestros cambios.

Usar Child themes puede parecer un poco tedioso, pero tenemos dos ventajas muy importantes:

  • Nuestro código está separado y localizado, lo cual facilita el mantenimiento
  • Podemos actualizar la plantilla padre sin perder nuestra personalización

En los siguientes tutoriales veremos otro tipo de personalizaciones que podemos hacer con los Child Themes.

Puedes descargar el código de aquí

Comentarios

  1. Si no me equivoco, en el código @import url(../orbit/style.css); faltan unas comillas, debiendo quedar así: @import url(“../orbit/style.css”);

  2. Hola Pedro, lo primero agradecer el tutorial que me ha sido de mucha ayuda y muy bien explicado. La duda es la siguiente: Me puse el tema gratuito Project AR2, y cuando cambio algo en style.css no afecta a la web, sale todo igual, he cambiado los permisos de CHMOD, he probado creando un child del tema tal y como nos explicas aquí, los cambios en el archivo se guardan, pero al ver la previsualización en el navegador sigue todo igual. ¿Sabes porque puede ocurrir esto? ¿Tendré que modificar algún otro archivo del tema a parte del style.css? Gracias por tu ayuda. Un saludo

    1. Probablemente sea un problema de cache del servidor o de tu navegador. Prueba a borrar la cache de tu navegador y en tu wordpress, si tienes activado algún plugin de cache, prueba a borrarla también.

      1. Buenos días Pedro, efectivamente era la caché, actualizando el navegador con CTRL+F5 recarga la pagina y ya salen los cambios. Muchas gracias. Un saludo

  3. Hola Pedro, me gustaría saber si en un child theme se puede cambiar la estructura del PHP. Para eso bastaría copiar, por ejemplo, header.php en el child?

    1. Exacto, lo puedes hacer con todos los ficheros usados como plantillas, header.php, footer.php, index.php … En Codex puedes ver toda la jerarquía de plantillas de WordPress para crear las páginas

  4. Hola Pedro Gracias por tu tiempo y dedicacion, soy nuevo en wordpress y como tal active una plantilla Responisve para ser exacto y modifique el style.css …. ya terminada me entere que de actualizar el theme perderé la plantilla modificada, me voy enterando que esto se evita creando un child theme … es posible hacer un child theme de una plantilla ya modificada sin que se pierdan los cambios? tengo que copiar y pegar todos los archivos del parent en el child incluyendo el style.css?
    espero sea claro con mis preguntas, Saludos.

    1. Yo actuaría de la siguiente forma:

      Primero identifico los ficheros template, como header.php, footer.php, etc… que haya modificado y los copio en el child theme.

      Si he añadido código en functions.php, lo añado en un fichero functions.php del child theme

      Si hemetido imágenes, archivos css, javascript, etc… también lo metería en el child theme, respetando la estructura de directorios

      Y por último en el archivo style.css pondría sólo las partes que haya modificado o añadido, si no lo tienes claro copia todo el fichero y si hay problemas los corriges sobre la marcha.

      Antes de hacer nada haz copia de seguridad de todo

      1. Hola Pedro,

        Realmente funciona si añadimos en el ‘child theme’ una carpeta (siguiendo la estructura de directorios) y dentro el archivo modificado? Ejemplo:

        original: theme/js/achivo.js
        hijo: child-theme/js/archivo.js

        Hay que hacer alguna indicación de algún tipo? Estoy probando y no me funciona 🙁

        Saludos y gracias de antemano!

        1. Hola Nil

          Los Child Theme no sobreescriben archivos javascript. Para hacer lo que quieres tienes que desencolar el archivo javascript del tema original y encolar el nuevo. Te pongo un ejemplo:

          Si tu tema padre encola el archivo javascript de esta forma (suele estar en functions.php):

          wp_enqueue_script( 'archivo_javascript', 'archivo.js', array( 'jquery' ) );
          

          En en archivo functions.php de tu tema hijo debes poner esto:

          function overwrite_javascript()
          {
              wp_dequeue_script( 'archivo_javascript' );
              wp_enqueue_script( 'child_theme_javascript', get_stylesheet_directory_uri() . '/js/archivo.js', array( 'jquery' ) );
          }
          add_action( 'wp_enqueue_scripts', 'overwrite_javascript' );
          

          Asegurate de que tu nuevo archivo.js está el la ruta /js/archivo.js de tu tema hijo

          Disculpa responderte tan tarde. Un saludo

  5. Una pregunta tonta que ando perdido.

    La carpeta del “childtheme” debe quedar dentro de la carpeta “themes” o dentro de la carpeta del theme padre?

  6. Hola Pedro. Quiero utilizar el Framework Genesis con un Child theme de studiopress. Si quiero hacerle modificaciones al child theme, este procedimiento aplica? Es decir, es posible hacer un child theme de un child theme? Ayudame con la duda y como proceder. Gracias

    1. Funciona exactamente igual. Ten en cuenta que se van a cargar los ficheros css del framework, del child theme y del tuyo. La carga de la web será más lenta, pero me imagino que el child theme de genesis es comprado y querrás actualizarlo en el futuro, así que es la solución más fácil.

      1. Gracias Pedro. Crees que haya otra manera de modifical el style.css y funtions.php de mi child theme sin crear otro debajo?, algo asi como importar las modificaciones a mi style.css del child theme con @import url?. gracias

        1. También puedes crearte un plugin que añade tu style.css y además puedes añadirle las funciones de functions.php. Así te evitas el segundo child theme.

  7. Muy bien explicado todo.
    Una pregunta que no tiene que ver con child theme, pero si con la modificacion del theme.
    ¿como puedo cambiar los comentarios de un theme y que siga funcionando la plantilla?.
    Es decir como puedo cambiar en style.css:
    /*
    Theme Name: Theme12

    */
    si modifico Theme12 por ejemplo MiTema, la plantilla deja de funcionar correctamente.
    ¿Hay en algún otro sitio donde debo modificarlo?
    Nota: no quiero utilizar child themes.

    Saludos. Gracias

  8. soy nuevo en el manejo de wordpress y quiero hacer una consulta, instale un servidor de prueba (xammp), instale el worpress, compre el framework genesis, y el thema foodie, y los instalo pero cuando le digo que me muestre el sitio, no me muestra la pagina como se ve en el demo, es decir, no se instalan las entradas, categorias, … que vienen de ejemplo, es acaso que eso no viene incluido en el genesis ni en los themas que compras?. Saludos.

    1. Cuando instalas un theme no te añade contenido de ejemplo. Pero en el caso de los themes de genesis si que viene un fichero de contenido. Suele estar en una carpeta llamada xml. Para instalar el contenido de ejemplo sólo tienes que ir a Herramientas > Importar luego le das a WordPress para que te instale el importador (Le das a Instalar ahora) y luego Activar plugin y Comenzar Importación y finalmente seleccionas el archivo xml de la carpeta xml de tu theme genesis.

      1. Pedro, gracias por tu respuesta, ne fue de mucha ayuda, ahora solo tengo una duda, ya instale genesis y el child tema foodie y aunque ya se ve algo de contenido no se ve como en el dema del tema foodie que instale, es necesario configurar algo mas o es que cometi algun error durante la instalacion. Saludos.

        1. Hola Cesar. Quizás si concretas que es lo que no se ve, pueda ayudarte. De todas formas el theme que tienes es de pago y tienes derecho a soporte. Ponte en contacto con el autor del theme y seguro que te ayuda.
          Un saludo

  9. Pedro Buenas tardes, quisiera saber si es posible cambiar de manera manual el tema actual por estar bloqueando mi wp-admin haciendo inaccesible mi web. podria hacerlo mediante el cpanel administrando o editando los archivos del tema que falla o esta dañado por uno anterior que si funcionaba?

    Muchas gracias

    1. Hola Fredy, antes de nada debes intentar acceder a tu panel de administración, y allí puedes ver que ha fallado y si te hace falta actualizar. Me imagino que no puedes acceder por la contraseña, si es el caso mira este post para recuperarla recuperar contraseña, si no es así te invito a acceder al foro de bitado sobre wordpress, abre un nuevo hilo y te ayudaré.

      Un saludo

  10. Buenas tardes
    Acabo de encontrar este blog y me ha encantado, Quería resolver una duda.Resulta que instalé el theme Responsive en wordpress pero no puedo modificar nada con el editor (cambio el css y cuando guardo sigue igual que antes). Además, utilizo la opción “inspeccionar elemento” para ver los códigos pero cuando lo comparo con el css no es la misma información. ¿Me podríais ayudar?
    Gracias
    Saludos y ánimo con el blog
    Macarena

    1. Hola Macarena

      Instalaste el theme en tu ordenador local o en un servidor?. Para ver los cambios en directo debes editar el archivo CSS dentro del theme que está activo y funcionando.

  11. Lo primero muchas gracias por el artículo.

    He intentado hacer un child theme de un child theme de Genesis y no me deja, en concreto me dice “El tema “AgentPress-Pro” no es un tema padre válido.”. En realidad creo que con Genesis no se puede hacer eso y la única alternativa para poder seguir actualizando child y poder hacer cambios sería con un plugin. Estoy en lo cierto?

    Gracias

    1. Hola Santos

      Si es cierto lo que dices. Mejor create un plugin tuyo donde puedas ir cambiando cosas utilizando los hooks de Genesis. Hay mucha documentación en la página de Genesis.

      Disculpa responder tan tarde… Un saludo

  12. Hola Pedro,
    Muy útil la información. Acabo de migrar de wordpress.com a hosting propio, voy a adaptar los contenidos a una nueva plantilla y he creado el childtheme, no tengo claro si debo trabajar sobre el tema padre o directamente comenzar a trabajar sobre el tema hijo, o si el tema hijo solo se utiliza una vez readapte todo para hacer los cambios de estilo.
    Muchas gracias por la respuesta

    1. No te lies. Lo más cómodo es crear el tema hijo e ir cambiando el estilo como indico en el tutorial. Si ves que no te gusta siempre puedes volver a empezar.

      Un saludo

      1. Hola!! Muy bueno tu tutorial, muchas gracias!!!
        Tengo una sola duda (soy nueva en esto jeje)…ya instale mi child theme e hice una actualización de mi theme y todo funciono bien!
        Ahora debo seguir subiendo contenidos….lo hago en el tema padre o hijo? En cual trabajo??

        Muchaaasss Gracias!!!

  13. Hola Pedro. Muchas gracias antes que nada por tu post. Viene muy bien explicado. Te comento el problema que tengo por si me puedes guiar. He comprado una plantilla de ThemeForest y no consigo sobreescribir la hoja de estilos para hacer un child-theme. El fichero style.css que trae no viene con ningún estilo. Los estilos que utiliza están dentro de una carpeta /assets/css y parece que utiliza dos hojas principalmente: css.css y customstyle.css. He replicado en el tema hijo dicha estructura, con las tres hojas de estilo: la hoja style.css configurada para que detecte el tema como hijo (esto me funciona correctamente) y las otras dos hojas de estilo las he creado también en /assets/css y he escrito el estilo que quiero modificar (en mi caso quiero ampliar el tamaño del logo de la plantilla). La cuestión es que no consigo que la plantilla hija coja los cambios que sobreescribo en las hojas css.css y customstyle.css. He probado también a importar dichas hojas en el style.css porque he visto con Firebug que no las carga. ¿Se te ocurre dónde puede estar el problema para que no aplique las hojas de estilo del tema hijo?

    Un saludo y muchas gracias,
    Javier.

    1. Las hojas de estilo css.css y customstyle.css de tu child theme no te las va a cargar (a no ser que se lo digas tu). Y colocar el estilo modificado de esas hojas en style.css debería funcionar. Fíjate como carga las hojas de estilo y en que orden.

  14. Hola Pedro. Gracias por tu buen artículo; bien explicado e ilustrado.
    A pesar de que lo escribiste hace no tanto tiempo, en entorno web parece que eso es muuucho tiempo! 😉 y como ya sabes ahora la manera de crear el child theme, se encola desde functions.php, sin vincular el css desde el style.css.
    Pero me trae por aquí otra cuestión: a la hora de hacer el child theme, hay un tema que no me queda claro y no me han aclarado en otros sitios. A ver si tu me puedes orientar. Cuando se van a hacer muchos cambios en el child y para mantener el buen orden y estructura del master style, suelo hacer lo siguiente:
    – copiar el style.css del master (ultimamente SASS, aunque es indiferente para el tema que nos atañe)
    – pegar el style.css en el child
    – comentar el style.css del child
    – descomentar las líneas que voy a cambiar en el child
    – al compilar y comprimir el SASS en CSS todas la líneas comentadas desaparecen
    Anteriormente no lo hacía así, sino que aplicaba cambios en un style.css en blanco, tratando de mantener el orden, pero cuando son muchos cambios y el style.css es complejo, se puede convertir en un caos en la que debo de invertir mucho tiempo en ordenar.
    ¿cómo lo haces tú?
    ¿te parece buena práctica?
    un saludo y muchas gracias

    1. Hola Jon
      Tienes razón, la forma correcta de vincular el css es desde functions.php.
      Con respecto al hacer el child theme, yo también uso esa práctica (tanto si hay SASS como con CSS puro), pero sólo cuando hay muchos cambios. Si son pocos uso el style.css del child theme sobreescribiendo estilos.
      Lo que si hago desde hace ya unos años es meter un control de versiones (git en mi caso) en todos mis proyectos, así queda registrados todos los cambios. Luego si tienes que hacer nuevas modificaciones (suele pasar después de un tiempo) tan sólo tienes que revisar el historico de cambios. Eso si, los commit del control de versiones los hago con modificaciones pequeñas p.ej. “Actualizado el color del h2 dentro de las entradas del blog”. Así es más fácil revisar el código que hacer muchas modificaciones y poner un commit como: “Actualizada la página de entradas, la visualización del widget de comentarios y la cabecera de la web”.

      Gracias por comentar, espero retomar el blog en un futuro…
      Un saludo

  15. Hola!
    Tengo una duda respecto a esto. Modifiqué el CSS del tema padre y no me acuerdo de los cambios que hice. ¿Cómo puedo cargar esos estilos en el tema hijo para no perder cambios cada vez que actualizo y sin que esté duplicado? Por otro lado, si son varias las hojas de estilos que se modifican y cada una tiene su nombre y su ubicación, ¿qué hay que hacer para que formen parte del tema hijo y no se pierdan los cambios en actualizaciones?

    Gracias!
    Un abrazo

    1. Tan sólo pon todos los cambios ( de todas las hojas de estilo padre ) en la hoja de estilo de tema hijo. Con esto los estilos se aplicarán siempre, porque los últimos estilos ejecutados son los del tema hijo.

      Un saludo

      1. Hola!
        Pero si realizo muchísimos cambios, más de 500, en colores y demás ¿tengo que ir cogiendo uno a uno y poniéndolos en el CSS del tema hijo?

        Gracias 🙂

        1. Lo ideal es eso…, pero te puedes arriesgar a hacer un copy/paste de todo el css al tema hijo, y después de actualizar el padre ver como funciona…

Responder a Fredy Bernal Cancelar respuesta

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