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.
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.
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.
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
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(9 votos, promedio: 4,56 de 5)
Cargando...
Muchas gracias por tu aporte!, me sirvió mucho 🙂
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, muchas gracias por tu gran aporte. Me resultó de guía y gran utilidad.
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.
Muchas gracias, me han ayudado mucho tus indicaciones, lo haces y explicas muy bien.
¡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, podrías probar sobrescribirlo con los hooks, tal como se comenta en: https://stackoverflow.com/questions/4725194/php-override-existing-function/8125517#8125517
Buenas,
Querías saber si este programa que utilizo ahora para WordPress https://themesgenerator.com/ me perimitrá hacer lo mismo. ¿El theme child tenog que realizarlo en WP o en mi editor visual?
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.
Hola,
Me ha encantado tu artículo y lo he querido probar pero no me funciona.
No me carga el tema hijo la administración de WordPress y la tengo de cero, limpita.
Me gustaría que funcionase 🙁
Hola, es posible que el nombre del theme padre no sea del todo correcto, revisa el valor de Template en el archivo style.css de tu theme hijo. Si sigues con problemas puedes contactarme por el formulario de contacto.
Me he creado un tema hijo de un tema que me he comprado. A la hora de hacer el functions.php veo que como el tema padre usa bootstrap hay muchos archivos css. ¿Qué ID cojo para la variable de la función del tema hijo? Es decir, ¿cuál hoja de estilos cargo? ¿Tengo que asignar una variable a cada uno?
Hola, tal vez tu archivo tengo otro nombre cambiado por programación, verifica si tienes un style.css en tu theme, o busca un archivo .css que tenga los comentarios en donde se especifique la metadata del theme. Si tu theme es de pago también consulta a los desarrolladores directamente o revisa la documentación que al parecer puede ser algo especial la creación de child themes para tu theme.
Hola, No he podido crear un tema hijo para Massive Dynamic utilizando esta via, no se cargar la CCS. Para este tema no se puede crear un tema hijo?
Hola. Antes que nada, muchas gracias por tus tutoriales, me han ayudado muchísimo. Tengo una pregunta, tal vez súper obvia, pero soy muy principiante en wordpress… A partir de la creación del child theme siempre se debe mantener activado este tema hijo, verdad? Aunque no tengamos activado el tema padre, se va a seguir actualizando?
Hola, si, sólo se puede tener activo un tema a la vez (al menos en versiones actuales de WordPress) el único tema activo será el tema hijo, pero no puedes eliminar el tema padre ya que es dependiente. Las actualizaciones se hacen al tema padre, es por eso que todas tus modificaciones deberías hacerlas siempre en el tema hijo.
Hola, vi tu vídeo en YouTube y me sirvió para terminar de entender la cuestión de un «Tema Hijo». Tengo una pregunta: si quiero modificar un texto en inglés que no logro ubicar la cadena con «Loco Translator», pero que sí lo pude localizar con «Sublime Text», el cual se encuentra en el archivo «functions.php». La pregunta concreta es ¿cómo modificar el texto (traducirlo al español) en el tema hijo?
Muchas gracias!
Hola
Podrías evaluar interceptando el texto que quieres cambiar y luego cambiarlo por código, revisa: https://decodecms.com/cambiar-textos-de-traduccion-en-wordpress/
Otra opción es: https://decodecms.com/generacion-de-archivos-de-traduccion-en-wordpress/
Hola Jhon, ya lo hice con el código en functions.php que compartes en tu post y funciona a la perfección. ¡Muchas gracias!
Hola Sergio, que bueno que te sirvió. Saludos.
Estoy intentando crear un child theme para twentytwenty la única función que busco es que el CSS mirificado no sea sobrescrito en cada actualización del theme.
Me podrías asesorar al respecto.
Tengo en child theme el functions.php con el contenido
Y el style.css con el contenido:
/*
Theme Name: Twenty Twenty Child
Theme URL: https://es.wordpress.org/
Description: Twenty Twenty Child Theme
Author: the WordPress team
Author URL: https://es.wordpress.org/
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/
/* Custom CSS goes after this line */
Hola, el estilo CSS que coloques en el archivo style.css del tema hijo, se encuentre minificado o no, no será sobrescrito cuando se actualice el theme padre.