X
Jhon Marreros Guzmán

Crear un Child Theme en WordPress de manera correcta

Tienes un bonito theme para tu sitio, pero te gustaría hacer algunas modificaciones, ya sea cambios CSS o de estructura, ¿Cómo realizar estas modificaciones sin que se pierdan al actualizar el theme?, la respuesta es creando un Child Theme.

 

1- Generalidades

Los Child Themes o Temas Hijo son una característica de WordPress que puedes usar cuando quieres hacer retoques al theme que estas usando y no perder los cambios cuando actualices el theme, ya que las modificaciones las harás en el theme hijo.

En este artículo nos vamos a basar en el theme Twenty Seventeen, sin embargo los pasos son similares para otros themes.

Si no quieres complicarte puedes usar un plugin como: Child Theme Generator para crear un tema hijo, no olvides desinstalar el plugin una vez que hayas creado el childtheme.

 

2- Creando la estructura del Child Theme

Para crear un Child Theme simplemente crea una nueva carpeta en la siguiente ruta:
wp-content/themes/, es buena práctica dar el mismo nombre que tiene la carpeta del tema padre y agregar el texto «-child».

Dentro de esta carpeta, crea además los archivos : style.css y functions.php, que son los archivos mínimos necesarios para crear correctamente el tema hijo.

 

3- Contenido del archivo style.css

Dentro del archivo style.css coloca la siguiente metadata:

/*
Theme Name:   Twenty Seventeen Child
Theme URI:    http://misitio.com/twenty-seventeen-child/
Description:  Child theme para modificaciones varias
Author:       Mi nombre
Author URI:   http://misitio.com
Template:     twentyseventeen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-seventeen-child
*/

En el código anterior:

  • Theme Name: nombre del tema hijo
  • Theme URI: opcional, la url de la documentación y demo del tema hijo.
  • Descripción, Author, Author URI: son opcionales pero se recomienda colocarlas.
  • Template: este parámetro te indica el nombre de la carpeta del tema padre.
  • Version: versión del tema hijo, importante para el control de cambios.
  • License, License URI: si se quieres hacer alguna variación a la licencia.
  • Tags: si harás variaciones en la funcionalidad del theme, puedes agregar otro tag.
  • Text-Domain: si tus cambios implican agregar texto traducible.

 

Ten en cuenta que lo que tenga este archivo sobreescribe lo que esta en el archivo style.css del tema padre.

 

4- Contenido del archivo functions.php

Una vez que has creado el archivo style.css, necesitas ahora importar los estilos del tema padre, anteriormente se usaba @import para importar los estilos, sin embargo esto es una mala práctica, lo que se recomienda es usar el archivo functions.php y a través de código cargar el archivo style.css del theme padre y, en caso se hagas modificaciones CSS en el tema hijo, cargar también el style.css del theme hijo.

El código para cargar los estilos es similar a:

<?php
function enqueue_styles_child_theme() {

	$parent_style = 'twentyseventeen-style';
	$child_style  = 'twentyseventeen-child-style';

	wp_enqueue_style( $parent_style,
				get_template_directory_uri() . '/style.css' );

	wp_enqueue_style( $child_style,
				get_stylesheet_directory_uri() . '/style.css',
				array( $parent_style ),
				wp_get_theme()->get('Version')
				);
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_child_theme' );

En el código anterior:

  • La función: enqueue_styles_child_theme, es llamada en la acción: wp_enqueue_scripts
  • Definimos dos variables, que serán los IDs de los estilos a cargar.
    • El ID del padre ya existe por lo que tenemos que buscarlo en el archivo functions.php del theme padre.
    • El ID del theme hijo puede ser cualquier texto, aunque se recomienda igualmente que tenga un nombre similar al theme padre.
  • Colocamos en cola el estilo del tema padre a través de la función wp_enqueue_style.
  • Colocamos en cola el estilo del tema hijo, igualmente usando la función wp_enqueue_style.
  • En la carga del style.css del tema hijo usamos el tercer parámetro para indicar dependencia.
  • También usamos el cuarto parámetro para usar la versión que se ha definido en el archivo style.css del tema hijo.

 

Al usar el parámetro de versión en la carga del archivo CSS nos permitirá refrescar los estilos CSS almacenados en el navegador del usuario.
Ten en cuenta que a diferencia del comportamiento de style.css, lo que coloques en este archivo se añade al functions.php del tema padre

 

5- Sobreescribiendo archivos

En el tema hijo puedes sobreescribir cualquier otro archivo del tema padre, siempre que mantengan el mismo nombre y se encuentren en la misma ruta. En la siguiente imagen de ejemplo hemos sobreescrito el archivo footer.php y el archivo /template-parts/header/site-branding.php.

 

6- Creando nuevos archivos

Siguiendo la jerarquía de archivos en un theme, es posible crear nuevos archivos que no están incluidos en el tema padre. En la imagen adjunta se ha creado el archivo: category-noticias.php

 

Artículos Relacionados

Categorías: Themes
Etiquetas: mejoras

Ver comentarios (35)

  • Hola gracias por el tutor, estoy usando theme lavander, segui tus consejos colocando el style.css, el functions.php para jalar el style, pero al darle vista previa a la plantilla hijo antes de ponerlo como activado me sale:
    Fatal error: Cannot redeclare lavander_theme_setup() (previously declared in /home/incasexp/public_html/blog/wp-content/themes/lavander-churi/functions.php:5) in /home/incasexp/public_html/blog/wp-content/themes/lavander/functions.php on line 216

    Le puse lavander-churi al hijo.

    Gracias

    • Hola, es como si el functions.php del theme hijo tuviese código del archivo functions.php padre. En el theme hijo, empieza con un functions.php vacío y sólo agrega el código que indico en este artículo.

      • Ok Jhon muchas gracias, me di cuenta que era el plugin de cache,le di una limpiada a toda la cache y funciono. Otra consulta vi que no jalo las fuentes que usa el template padre, usa 2 fuentes, tampoco veo las fuentes en el functions.php del padre. Como las heredo al hijo de nuevo?

        Muchas gracias nuevamente

  • Hola, gracias por el aporte. Me gusta mucho tu web y tu manera de explicar las cosas. Tengo una duda respecto al tema hijo y me gustaria aclarar las cosas. ¿El tema hijo influye sobre la velocidad de carga de la web? Te pregunto eso porque me parece como si la web tuviese dos temas activos. ¿Si es así, que alternativa me recomiendas? Excluido lo de editar directamente el tema porque no quiero perder los cambios despues de actualizar.

    • Hola. Un child theme es como indicarle a WordPress que sobreescriba algunos archivos desde una carpeta (Tema hijo), pero que el resto de archivos los siga tomando de la ubicación original (Tema padre) , por lo que no tienes dos themes, tienes uno solo, y este proceso de sobreescritura no influye en la carga de tu sitio. Saludos.

  • ¡Sin duda estos artículos y videotutoriales están a otro nivel! Un trabajo excelente, muchas gracias.

  • Hola muchas gracias por el aporte, pero tengo un problema al momento de hacer todo lo que dices la web se visualiza bien pero excepto algunos detalles pequeños, pero el que no se como arreglar es el tema del responsive ya que no esta funcionando como lo puedo solucionar, o tendría que copiar los estilos del padre y pegarlos en el hijo, si me puedes ayudar gracias.

    • Hola, el código del punto 4 de este artículo, ya agrega el style.css del theme padre y debería ser suficiente, salvo tenga tu theme algo especial para el responsive.

  • Hola que tal!

    Muy buena guía!

    Me surge una duda con el archivo functions.php.

    Estoy intentando crear el códiigo para adaptar formularios a la nueva ley de protección de datos, pero según una guía que he leído en otro sitio, lo interesante es meter ese código en el functions.php del tema hijo. Bien, yo en mi tema hijo solo tengo los archivos style y header, por lo que esta claro que necesito un fuctions.php, verdad?

    Cómo lo creo? Siiiii!! soy muy muy novato! jajajajaja
    He intentado copiar el del tema padre y la web se ha caído, así que intento fallido.

    Debo crear un archivo en blanco desde cpanel al cual llame fuctions.php y allí meter lo que necesite?

    Y si es así, el archivo debe llevar una cabecera de código, como debe llevar style, para que funcione??

    A ver si lo consigo que el 25 de mayo paso ya hace algún que otro día!! jajajaja

    Un abrazo!
    Manu

    • Hola, te sugiero revisar con cuidado el video que allí explico cómo crear el archivo functions.php y qué código debe tener.

  • Hola buen día, consulta como puedo hacer para redefinir una función declarada en el tema padre sin tener un error similar a:
    Fatal error: Cannot redeclare lavander_theme_setup() (previously declared in /home/incasexp/public_html/blog/wp-content/themes/ascend/functions.php:12) in /home/incasexp/public_html/blog/wp-content/themes/ascend/functions.php on line 220

    espero que me puedas ayudar :)
    Saludos

    • Hola, según veo themesgenerator te genera un theme padre, si quieres hacer modificaciones sin perder tus cambios tendrías que crear un child-theme, sin embargo en este caso no sería necesario porque desde themegenerator puedes hacer las modificaciones y simplemente actualizar el theme padre. Sólo ten en cuenta que este theme te genera dependencia, si quieres cambiar de theme posiblemente pierdas todos los bloques diseñados.

Deja un comentario