• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Crear un Child Theme en WordPress de manera correcta

Crear un Child Theme en WordPress de manera correcta

child theme en WordPress

[ 3 mayo 2017 ] [ Actualizado: 2 enero 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Estructura Child Theme en WordPress

 

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.

Sobreescribir archivos Child Theme WordPress

 

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

Nuevos archivos Child Theme WordPress

 

¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (9 votos, promedio: 4,56 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Juan

    8 febrero, 2018

    Muchas gracias por tu aporte!, me sirvió mucho 🙂

  2. anse

    22 febrero, 2018

    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

    • Jhon Marreros Guzmán

      22 febrero, 2018

      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.

      • angel

        22 febrero, 2018

        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

  3. Robert

    11 abril, 2018

    Hola, muchas gracias por tu gran aporte. Me resultó de guía y gran utilidad.

  4. Alberto

    11 abril, 2018

    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.

    • Jhon Marreros Guzmán

      13 abril, 2018

      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.

  5. Claudio

    13 abril, 2018

    Muchas gracias, me han ayudado mucho tus indicaciones, lo haces y explicas muy bien.

  6. Asun

    23 abril, 2018

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

  7. juan

    22 mayo, 2018

    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.

    • Jhon Marreros Guzmán

      23 mayo, 2018

      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.

  8. Manu

    5 junio, 2018

    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

    • Jhon Marreros Guzmán

      5 junio, 2018

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

  9. Mirna

    16 julio, 2018

    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

    • Jhon Marreros Guzmán

      16 julio, 2018

      Hola, podrías probar sobrescribirlo con los hooks, tal como se comenta en: https://stackoverflow.com/questions/4725194/php-override-existing-function/8125517#8125517

  10. Esther

    3 octubre, 2018

    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?

    • Jhon Marreros Guzmán

      3 octubre, 2018

      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.

  11. Elena

    5 diciembre, 2018

    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 🙁

    • Jhon Marreros Guzmán

      6 diciembre, 2018

      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.

  12. Mario

    14 enero, 2019

    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?

    • Jhon Marreros Guzmán

      14 enero, 2019

      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.

  13. annier

    16 abril, 2019

    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?

  14. Gina Flores

    3 octubre, 2019

    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?

    • Jhon Marreros Guzmán

      4 octubre, 2019

      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.

  15. Sergio Ortiz

    14 julio, 2020

    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!

    • Jhon Marreros Guzmán

      16 julio, 2020

      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/

      • Sergio Ortiz

        20 julio, 2020

        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!

        • Jhon Marreros Guzmán

          20 julio, 2020

          Hola Sergio, que bueno que te sirvió. Saludos.

  16. Jose

    6 septiembre, 2020

    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 */

    • Jhon Marreros Guzmán

      11 septiembre, 2020

      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.

  17. Alex

    21 diciembre, 2020

    Hola Jhon, Antes que nada por tu trabajo!, Lo he intentado hacer, seguí todos los pasos del videotutorial y tengo un multisitio, lo active en la red, y luego desde el sitio lo active. Al hacer eso mi sitio y la red desaparecieron, son inaccesibles, no puedo acceder al front ni al admin de la red, ni del sitio. Sin embargo tenia otro sitio creado con un subdominio que si esta accesible, pero no puedo modificar el Theme de los demás desde ahi. No se si reirme o llorar pero esta es mi situación! Cualquier ayuda se agradece!

    • Jhon Marreros Guzmán

      22 diciembre, 2020

      Hola, es extraño lo que comentas, elimina el tema hijo que creaste directamente a través de FTP o del Administrador de Archivos de tu Cpanel, con esto deberías tener el theme por defecto asignado y acceder a tu sitio. Por otro lado intenta crear el tema hijo con algún plugin y verifica si te sucede lo mismo, luego puedes eliminar el plugin.

  18. Shoy Pikkabbu

    14 julio, 2021

    muchas gracias

  19. Mariana Rojas

    8 julio, 2022

    Saludos. Tengo mi pagina de wordpress en localhost. Se puede crear un child theme alli? Instalé un tema que al parece ya es child theme de otro pero no me aparece la carpeta del tema en wp-content. Me pueden ayudar?

    • Jhon Marreros Guzmán

      8 julio, 2022

      Hola un tema hijo es dependiente del tema padre, por lo que deberías tener ambos temas instalados en tu sitio.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Instalar WordPress localmente con MAMP

Formulario de contacto sin plugins en WordPress

Personalizar plantilla para una categoría específica en Woocommerce

Mostrar mensaje según zona de envío en WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados