Los temas hijos son uno de esos términos de WordPress que se usan mucho y confunden a los principiantes. Es posible que incluso hayas oído hablar de ellos y hayas decidido omitir su creación debido a lo complicados que parecen.
Lo entendemos. Pero en nuestra experiencia, los temas hijos pueden ahorrarte muchos dolores de cabeza en el futuro. Protegen tus valiosas personalizaciones, te permiten experimentar sin romper tu sitio y hacen que actualizar tu tema sea muy fácil.
Si estás interesado, hemos desglosado cómo funciona un tema hijo, cómo personalizarlo y cómo hacerle cambios en esta guía para principiantes.
¿Cómo funciona un tema hijo y por qué lo necesitas?
Un tema hijo hereda todas las características, funciones y estilos de otro tema de WordPress. Cuando creas un tema hijo, el tema original se llama tema padre.
La herencia incluye el archivo style.css del tema padre, que define el estilo principal del tema. El tema hijo puede anular o extender sus propiedades heredadas agregando sus propios archivos o modificando los existentes.
Si bien es posible personalizar tu tema de WordPress sin instalar un tema hijo, hay varias razones por las que podrías necesitar uno de todos modos:
- Los temas hijos protegen tus personalizaciones durante las actualizaciones del tema, manteniéndolas a salvo de ser sobrescritas. Si modificas el tema padre directamente, esos ajustes podrían desaparecer cuando actualices.
- Los temas hijos te permiten probar de forma segura nuevos diseños o funciones sin estropear el tema original del sitio, similar a un entorno de staging.
- Si sabes cómo codificar, los temas hijos pueden hacer que el proceso de desarrollo sea más eficiente. Los archivos de un tema hijo son mucho más simples que los de un tema padre. Puedes concentrarte en modificar solo las partes del tema padre que deseas cambiar o ampliar.
Qué hacer antes de crear un tema hijo de WordPress
Hemos visto a muchos usuarios de WordPress emocionados por sumergirse en lo técnico, solo para desanimarse cuando aparecen errores. Lo entendemos. Por eso es importante saber en qué te estás metiendo antes de crear un tema hijo.
Aquí hay algunas cosas que recomendamos que hagas primero antes de continuar con esta guía paso a paso:
- Ten en cuenta que trabajarás con código. Como mínimo, necesitarás una comprensión básica de HTML, CSS, PHP y, opcionalmente, JavaScript para entender qué cambios necesitas hacer. Puedes leer más sobre esto en el manual de temas de WordPress.
- Elige un tema padre que tenga el diseño y las características de sitio web que deseas. Si es posible, encuentra uno en el que solo necesites hacer unos pocos cambios. Puedes seguir nuestra lista de verificación de cosas que hacer antes de cambiar temas de WordPress si es necesario.
- Usa un sitio local o un sitio de staging para el desarrollo del tema. No querrás crear errores no intencionales en tu sitio en vivo.
- Haz una copia de seguridad de tu sitio web primero. Recomendamos usar un plugin de copias de seguridad como Duplicator si es tu primera vez.
Hay varias formas de crear un tema hijo a partir de tu tema existente. Una es con código manual, mientras que otras requieren un plugin, lo cual es mucho más amigable para principiantes.
El primer método puede parecer intimidante si careces de experiencia técnica. Dicho esto, incluso si eliges uno de los métodos con plugin, te recomendamos leer el método manual para familiarizarte con el proceso y los archivos involucrados.
Consejo profesional: ¿Quieres personalizar tu tema sin crear un tema hijo? Usa WPCode para habilitar de forma segura nuevas funciones con fragmentos de código personalizados sin romper tu sitio web.
Con todo esto en mente, veamos cómo crear un tema hijo en WordPress. Puedes saltar al método que prefieras usando los enlaces a continuación:
- Método 1: Crear un tema hijo de WordPress manualmente
- Método 2: Crear un tema clásico hijo con un plugin
- Método 3: Crear un tema de bloques hijo con un plugin
- Consejo adicional: Averigua si tu tema tiene un generador de temas hijos
- Cómo personalizar tu tema hijo clásico
- Cómo personalizar tu tema hijo de bloques
- Cómo editar los archivos de plantilla de un tema hijo
- Cómo agregar nueva funcionalidad a tu tema hijo
- Cómo solucionar problemas de tu tema hijo de WordPress
Método 1: Crear un tema hijo de WordPress manualmente
Primero, necesitas abrir `/wp-content/themes/` en la carpeta de tu instalación de WordPress.
Puedes hacer esto usando el administrador de archivos de tu hosting de WordPress o un cliente FTP. Creemos que la primera opción es mucho más fácil, así que usaremos esa.
Si eres cliente de Bluehost, puedes iniciar sesión en el panel de control de tu cuenta de hosting y navegar a la pestaña ‘Websites’. Después de eso, haz clic en ‘Settings’.
En la pestaña Overview, desplázate hacia abajo hasta la sección ‘Quick Links’.
Luego, selecciona ‘File Manager’.
En esta etapa, necesitas ir a la carpeta public_html de tu sitio web y abrir la ruta /wp-content/themes/.
Aquí, simplemente haz clic en el botón ‘+ Folder’ en la esquina superior izquierda para crear una nueva carpeta para tu tema hijo.
Puedes nombrar la carpeta como quieras.
Para este tutorial, usaremos el nombre de carpeta twentytwentyone-child ya que usaremos Twenty Twenty-One como nuestro tema padre. Una vez hecho, simplemente haz clic en ‘Create New Folder’.
A continuación, debes abrir la carpeta que acabas de crear y hacer clic en ‘+ File’ para crear el primer archivo para tu tema hijo.
Si usas un cliente FTP, puedes usar un editor de texto como Bloc de notas y subir el archivo más tarde.
Continúa y nombra este archivo ‘style.css’, ya que es la hoja de estilos principal de tu tema hijo y contendrá información sobre el tema hijo.
Luego, haz clic en ‘Create New File’.
Ahora, simplemente haz clic derecho en el archivo style.css.
Después de eso, haz clic en ‘Edit’ para abrir una nueva pestaña como en la captura de pantalla a continuación.
En esta nueva pestaña, puedes pegar el siguiente texto y ajustarlo según tus necesidades:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
Una vez hecho, simplemente haz clic en ‘Save Changes.’
Lo siguiente que necesitas hacer es crear un segundo archivo y nombrarlo functions.php. Este archivo importará o encolará las hojas de estilo de los archivos del tema padre.
Una vez que hayas creado el documento, agrega el siguiente código wp_enqueue:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
Una vez hecho esto, simplemente guarda el archivo como en el paso anterior.
Nota: Para este método, recomendamos leer la documentación oficial de Temas Hijo y Incluir Recursos para asegurarte de que las hojas de estilo de tu tema hijo se carguen correctamente.
Ahora has creado un tema hijo muy básico. Cuando vayas a Apariencia » Temas en tu panel de administración de WordPress, deberías ver la opción Twenty Twenty-One Child.
Haz clic en el botón ‘Activar’ para empezar a usar el tema hijo en tu sitio.
Método 2: Crear un tema clásico hijo con un plugin
Este siguiente método utiliza el plugin Child Theme Configurator. Este plugin de WordPress fácil de usar te permite crear y personalizar temas hijo de WordPress rápidamente sin usar código, pero solo funciona bien con un tema clásico (no de bloques).
Lo primero que necesitas hacer es instalar y activar el plugin de WordPress. Al activarlo, necesitas navegar a Herramientas » Temas Hijo en tu panel de WordPress.
En la pestaña Padre/Hijo, se te pedirá que elijas una acción. Simplemente selecciona ‘CREAR un nuevo Tema Hijo’ para empezar.
Luego, selecciona un tema padre de un menú desplegable. Seleccionaremos el tema Hestia.
Después de eso, simplemente haz clic en el botón ‘Analizar’ para asegurarte de que el tema sea adecuado para usarlo como tema padre.
A continuación, se te pedirá que nombres la carpeta donde se guardará el tema hijo. Puedes usar el nombre de carpeta que desees.
Debajo de eso, necesitas seleccionar dónde guardar los nuevos estilos: en la hoja de estilos principal o en una separada.
La hoja de estilos principal es la hoja de estilos predeterminada que viene con tu tema hijo. Cuando guardas nuevos estilos personalizados en este archivo, estás modificando directamente los estilos principales de tu tema hijo. Cada modificación sobrescribirá el estilo del tema original.
La opción separada te permite guardar un nuevo estilo personalizado en un archivo de hoja de estilos separado. Esto es útil si deseas conservar el estilo del tema original y no sobrescribirlo.
Para fines de demostración, elegiremos la primera opción. Pero a medida que te vuelvas más creativo con las personalizaciones de tu tema hijo, siempre puedes repetir este proceso y seleccionar la segunda opción.
Bajando, tienes que elegir cómo se accederá a la hoja de estilos del tema padre.
Simplemente usaremos la opción predeterminada ‘Usar la cola de estilos de WordPress’, ya que permitirá al plugin determinar las acciones apropiadas automáticamente.
Cuando llegues al paso 7, deberás hacer clic en el botón etiquetado como ‘Haz clic para editar los atributos del tema hijo’.
Luego puedes completar los detalles de tu tema hijo.
Cuando creas un tema hijo manualmente, perderás los menús y widgets del tema padre. Child Theme Configurator puede copiarlos del tema padre al tema hijo. Marca la casilla en el paso 8 si deseas hacer esto.
Finalmente, haz clic en el botón ‘Crear nuevo tema hijo’ para crear tu nuevo tema hijo.
El plugin creará una carpeta para tu tema hijo y agregará los archivos style.css y functions.php que usarás para personalizar el tema más adelante.
Antes de activar el tema, debes hacer clic en el enlace cerca de la parte superior de la pantalla para previsualizarlo y asegurarte de que se vea bien y no rompa tu sitio.
Si todo parece estar funcionando, haz clic en el botón ‘Activar y publicar’.
Ahora, tu tema hijo se publicará.
En esta etapa, el tema hijo se verá y se comportará exactamente igual que el tema padre.
Método 3: Crear un tema de bloques hijo con un plugin
Si usas un tema de bloques, entonces WordPress ofrece una forma fácil de crear un tema hijo con el plugin Create Block Theme.
Primero, necesitarás instalar y activar el plugin de WordPress. Después de eso, ve a Apariencia » Crear tema de bloques.
Aquí, simplemente selecciona ‘Crear un hijo de [nombre del tema actual].’
A continuación, completa la información de tu tema hijo. Estamos usando Twenty Twenty-Four en este ejemplo, así que lo llamaremos Twenty Twenty-Four Child.
También le dimos una descripción y autor al tema hijo. Una vez hecho, haz clic en el botón ‘Crear tema hijo’.
El plugin ahora creará e instalará el archivo zip del tema de WordPress en tu área de administrador.
Una vez hecho, tu sitio web activará automáticamente este tema hijo recién creado. Puedes confirmarlo yendo a Apariencia » Temas.
Consejo adicional: Averigua si tu tema tiene un generador de temas hijos
Si tienes suerte, tu tema de WordPress puede que ya tenga una función existente para crear un tema hijo.
Por ejemplo, si usas Astra, puedes ir al sitio web del Generador de temas hijos de Astra. Después de eso, solo completa el nombre de tu tema hijo y haz clic en el botón ‘Generar’.
Tu navegador descargará automáticamente tu tema hijo a tu computadora, el cual podrás instalar tú mismo en WordPress.
También encontramos otros temas populares de WordPress que tienen un generador de temas hijos:
Cómo personalizar tu tema hijo clásico
Nota: Esta sección es para usuarios de temas clásicos de WordPress. Si usas un tema de bloques, simplemente salta a la siguiente sección.
Técnicamente, puedes personalizar tu tema hijo sin código usando el Personalizador de Temas. Los cambios que hagas allí no afectarán a tu tema padre. Si aún no te sientes cómodo con la codificación, no dudes en usar el Personalizador.
Dicho esto, también recomendamos personalizar el tema hijo con código.
Además de aprender más sobre el desarrollo de temas de WordPress, la personalización con código permite que los cambios se documenten dentro de los archivos del tema hijo, lo que facilita su seguimiento.
Ahora, la forma más básica de personalizar un tema hijo es agregando CSS personalizado al archivo style.css. Para hacer eso, necesitas saber qué código necesitas personalizar.
Puedes simplificar el proceso copiando y modificando el código existente del tema padre. Puedes encontrar ese código usando la herramienta de inspección de Chrome o Firefox o copiándolo directamente del archivo CSS del tema padre.
Método 1: Copiar código del Inspector de Chrome o Firefox
La forma más fácil de descubrir el código CSS que necesitas modificar es usando las herramientas de inspección que vienen con Google Chrome y Firefox. Estas herramientas te permiten ver el HTML y CSS detrás de cualquier elemento de una página web.
Puedes leer más sobre la herramienta de inspección en nuestra guía sobre las bases de inspeccionar elemento: personalización de WordPress para usuarios de bricolaje.
Cuando haces clic derecho en tu página web y usas la inspección de elementos, verás el HTML y CSS de la página.
A medida que mueves el ratón sobre diferentes líneas de HTML, el inspector las resaltará en la ventana superior. También te mostrará las reglas CSS relacionadas con el elemento resaltado, así:
Puedes intentar editar el CSS allí mismo para ver cómo se vería. Por ejemplo, intentemos cambiar el color de fondo del cuerpo del tema a #fdf8ef. Busca la línea de código que dice body { y dentro de ella, el código que dice color: .
Simplemente haz clic en el icono del selector de color junto a color: y pega el código HEX en el campo apropiado, así:
Ahora, ya sabes cómo cambiar el color de fondo usando CSS. Para que los cambios sean permanentes, puedes abrir tu archivo style.css en el directorio del tema hijo (usando el administrador de archivos o FTP).
Luego, pega el siguiente código debajo de la información del tema hijo, así:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
body {
background-color: #fdf8ef
}
Así es como se verá si vas al administrador de WordPress y abres Apariencia » Editor de archivos de temas:
Si eres principiante y quieres hacer otros cambios, te recomendamos familiarizarte con HTML y CSS para que sepas exactamente a qué elemento se refiere cada código. Hay muchas hojas de trucos de HTML y CSS en línea a las que puedes recurrir.
Aquí está la hoja de estilos completa que hemos creado para el tema hijo. Siéntete libre de experimentar y modificarla:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}
Método 2: Copiar código del archivo style.css del tema padre
Tal vez haya muchas cosas en tu tema hijo que quieras personalizar. En ese caso, puede ser más rápido copiar algo de código directamente del archivo style.css del tema padre, pegarlo en el archivo CSS de tu tema hijo y luego modificarlo.
La parte complicada es que el archivo de la hoja de estilos de un tema puede parecer muy largo y abrumador para los principiantes. Sin embargo, una vez que entiendes lo básico, en realidad no es tan difícil.
Usemos un ejemplo real de la hoja de estilos del tema padre Twenty Twenty-One. Necesitas navegar a /wp-content/themes/twentytwentyone en la carpeta de tu instalación de WordPress y luego abrir el archivo style.css en tu administrador de archivos, FTP o Editor de archivos de temas.
Verás las siguientes líneas de código:
:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}
Las líneas 3 a 15 controlan el tipo de colores (como amarillo, verde, morado) que todo el tema usará en sus códigos HEX específicos. Y luego, para líneas como ‘global-color-primary’ o ‘global-color-secondary,’ eso significa que esos son los colores primarios y secundarios de ese tema.
Puedes copiar estas líneas de código a la hoja de estilos de tu tema hijo y luego cambiar los códigos HEX para crear tu esquema de color perfecto.
Al desplazarte hacia abajo en la hoja de estilos del tema padre, notarás que otras variables también pueden tener estas variables de color, como aquí:
/* Buttons */
--button--color-text: var(--global--color-background);
Esto básicamente significa que todos los textos de los botones usarán el mismo color que se declara en --global--color-background:, que es verde menta (--global--color-green: #d1e4dd). Si cambias el HEX en --global--color-green:, entonces el texto del botón también se verá diferente.
Nota: Si usas el tema hijo Twenty Twenty-One y no ves ningún cambio, es posible que necesites actualizar la parte de 'Versión' de la información del archivo del tema (por ejemplo, de 1.0 a 2.0) cada vez que actualices el archivo style.css.
También puedes seguir estos tutoriales para experimentar con las personalizaciones de tu tema hijo:
- Cómo cambiar el color del texto en WordPress
- Cómo cambiar el tamaño de tu logo de WordPress (funciona con cualquier tema)
- Cómo personalizar el estilo de las citas en bloque en temas de WordPress
- WordPress Body Class 101: Consejos y trucos para diseñadores de temas
- Cómo agregar un efecto parallax a cualquier tema de WordPress
Cómo personalizar tu tema hijo de bloques
Si usas un tema hijo de bloques, la mayoría de tus personalizaciones se harán en tu archivo theme.json, no en style.css.
Sin embargo, durante nuestras pruebas, encontramos que el proceso era complicado. A diferencia de los temas hijos clásicos, hay una brecha de conocimiento mayor que necesitas cubrir (especialmente sobre JSON y cómo se maneja el CSS allí) si eres nuevo en el desarrollo de temas de WordPress.
Dicho esto, encontramos una alternativa mucho más fácil usando el plugin Create Block Theme. Esta herramienta puede registrar cualquier cambio realizado en el Editor de Sitio Completo de WordPress en el archivo child theme.json de tu tema hijo. Así, no tendrás que tocar ningún código, ya que el plugin se encargará de ello por ti.
Te mostraremos un ejemplo. Primero, abre el Editor de Sitio Completo de WordPress yendo a Apariencia » Editor.
Verás varios menús para elegir.
Aquí, simplemente selecciona 'Estilos'.
En la siguiente página, verás varias combinaciones de estilos integradas para elegir.
Para nuestro propósito, puedes simplemente omitir todo eso y hacer clic en el ícono del lápiz.
Ahora, intentemos cambiar algunas partes de tu tema hijo, como las fuentes.
Para este ejemplo, haz clic en ‘Tipografía’ en la barra lateral derecha.
A continuación, verás algunas opciones para cambiar las fuentes globales del tema para texto, enlaces, encabezados, pies de foto y botones.
Hagamos clic en ‘Encabezados’ para fines de demostración.
En el menú desplegable de Fuente, cambia la selección original a cualquier fuente disponible.
Siéntete libre de cambiar la apariencia, la altura de línea, el espaciado entre letras y las mayúsculas/minúsculas si es necesario.
Una vez que hayas terminado, simplemente haz clic en ‘Guardar’. Después de eso, puedes hacer clic en el botón Crear tema de bloque (el ícono de la llave inglesa) junto a ‘Guardar’.
Luego, haz clic en ‘Guardar cambios en el tema’.
A continuación, selecciona qué cambios guardar en el tema hijo.
Los ejemplos incluyen fuentes, estilos personalizados, cambios de plantilla y más.
Una vez hecho, simplemente desplázate hasta el final de la barra lateral.
Luego, haz clic en ‘Guardar cambios’.
Ahora, veamos tu archivo theme.json para que puedas ver los cambios reflejados en el código.
Para hacer esto, haz clic nuevamente en el botón Crear tema de bloque y selecciona ‘Ver theme.json’.
Después de hacer clic en él, verás que el archivo incluye algunas nuevas adiciones de código.
En nuestro caso, el archivo incluye código que indica que las etiquetas de encabezado usarán la fuente Inter con apariencia semi-negrita, altura de línea de 1.2, espaciado de línea de 1 píxel y en minúsculas.
Por lo tanto, cada vez que edites tu tema hijo de bloque, asegúrate de hacer clic en el ícono de la llave inglesa y guardar tus cambios para que estén bien documentados.
Cómo editar los archivos de plantilla de un tema hijo
La mayoría de los temas de WordPress tienen plantillas, que son archivos de tema que controlan el diseño y la estructura de un área específica dentro de un tema. Por ejemplo, la sección del pie de página generalmente es manejada por el archivo footer.php, y la cabecera es manejada por el archivo header.php.
Cada tema de WordPress también tiene un diseño diferente. Por ejemplo, el tema Twenty Twenty-One tiene una cabecera, un bucle de contenido, un área de widgets en el pie de página y un pie de página.
Si deseas modificar una plantilla, entonces tienes que encontrar el archivo en la carpeta del tema padre y copiarlo a la carpeta del tema hijo. Después de eso, deberías abrir el archivo y hacer las modificaciones que desees.
Por ejemplo, si usas Bluehost y tu tema padre es Twenty Twenty-One, entonces puedes ir a /wp-content/themes/twentytwentyone en tu administrador de archivos. Luego, haz clic derecho en un archivo de plantilla como footer.php y selecciona 'Copiar'.
Después de eso, ingresa la ruta del archivo de tu tema hijo.
Una vez que hayas terminado, simplemente haz clic en 'Copiar Archivos'.
Luego serás redirigido a la ruta del archivo.
Para editar el archivo footer.php, simplemente haz clic derecho sobre él y selecciona 'Editar'.
Como ejemplo, vamos a eliminar el enlace 'Orgullosamente impulsado por WordPress' del área del pie de página y agregar un aviso de derechos de autor allí.
Para hacer eso, deberías eliminar todo lo que está entre las etiquetas <div class= "powered-by">:
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->
Luego necesitas pegar el código que encuentras debajo de esas etiquetas en el ejemplo a continuación:
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->
Esto es lo que deberías tener ahora en el editor de texto:
Continúa y guarda el archivo para hacer oficiales los cambios.
Después de eso, visita tu sitio web para ver el nuevo aviso de copyright.
Cómo agregar nueva funcionalidad a tu tema hijo
El archivo functions.php en un tema utiliza código PHP para agregar o modificar las características predeterminadas de un sitio de WordPress. Actúa como un plugin para tu sitio de WordPress que se activa automáticamente con tu tema actual.
Encontrarás muchos tutoriales de WordPress que te piden que copies y pegues fragmentos de código en functions.php. Pero si agregas tus modificaciones al tema principal, estas se sobrescribirán cada vez que instales una nueva actualización del tema.
Es por eso que recomendamos usar un tema hijo al agregar fragmentos de código personalizados. En este tutorial, agregaremos una nueva área de widgets a nuestro tema.
Podemos hacer eso agregando este fragmento de código al archivo functions.php de nuestro tema hijo. Para hacer el proceso aún más seguro, recomendamos usar el plugin WPCode para que no edites el archivo functions.php directamente, reduciendo el riesgo de errores.
Puedes leer nuestra guía sobre cómo agregar fragmentos de código personalizados para más información.
Aquí está el código que necesitas agregar a tu archivo functions.php:
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
Una vez que guardes el archivo, puedes visitar la página Apariencia » Widgets de tu panel de WordPress.
Aquí, verá su nueva área de widgets personalizada a la que puede agregar widgets.
Hay muchas otras funciones que puede agregar a su tema utilizando fragmentos de código personalizados. Consulte estos trucos extremadamente útiles para el archivo functions.php de WordPress y fragmentos de código útiles de WordPress para principiantes.
Cómo solucionar problemas de tu tema hijo de WordPress
Si nunca antes ha creado un tema hijo, es muy probable que cometa algunos errores, y eso es normal. Es por eso que recomendamos usar un plugin de respaldo, crear un sitio local o un entorno de prueba, y usar contenido ficticio para su sitio de demostración.
Dicho todo esto, no se rinda demasiado rápido. La comunidad de WordPress es muy ingeniosa, por lo que sea cual sea el problema que tenga, probablemente ya exista una solución.
Para empezar, puede consultar nuestros errores más comunes de WordPress para encontrar una solución.
Los errores más comunes que probablemente verá son errores de sintaxis causados por algo que omitió en el código. Encontrará ayuda para resolver estos problemas en nuestra guía rápida sobre cómo encontrar y solucionar el error de sintaxis en WordPress.
Adicionalmente, siempre puedes empezar de nuevo si algo sale muy mal. Por ejemplo, si accidentalmente eliminaste algo que tu tema padre requería, entonces puedes simplemente eliminar el archivo de tu tema hijo y empezar de nuevo.
Esperamos que este artículo te haya ayudado a aprender cómo crear un tema hijo de WordPress. También te puede interesar nuestra guía definitiva sobre cómo probar tu tema de WordPress contra los últimos estándares y nuestro artículo comparativo sobre temas de WordPress gratuitos vs. premium.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
Este artículo es increíblemente perspicaz, especialmente para aquellos de nosotros que apenas estamos comenzando nuestro viaje en WordPress. Recuerdo cuando empecé, subestimé la importancia de usar un tema hijo y terminé perdiendo todas mis personalizaciones después de una actualización del tema. Aprender de la manera difícil me hizo apreciar el valor de un tema hijo para preservar los cambios. ¡Gracias por resaltar qué hacer antes de crear uno, esta guía seguramente ahorrará a muchos principiantes frustraciones similares!
Oyatogun Oluwaseun Samuel
Me encanta la flexibilidad que ofrece el tema hijo, de modo que cuando hay una actualización del tema padre, los cambios realizados en el tema hijo se mantienen. También me encanta crear manualmente un tema hijo, ya que creo que hacerlo de esa manera puede exponerme a errores que, a su vez, aumentarán mi comprensión y experiencia. Aprendemos cuando cometemos errores.
Mrteesurez
¡Estoy completamente de acuerdo contigo! La flexibilidad que brindan los temas hijos cambia las reglas del juego, especialmente cuando se trata de mantener las personalizaciones a través de las actualizaciones del tema padre. También he disfrutado creando temas hijos manualmente por la misma razón. Si bien al principio puede ser un poco desalentador, he descubierto que sumergirse en el código no solo mejora mi comprensión, sino que también aumenta mi confianza como desarrollador.
Recuerdo cuando empecé a trabajar con temas hijos, cometí algunos errores en el camino, como olvidar incluir correctamente los estilos o estropear el archivo functions.php. Cada error fue una valiosa oportunidad de aprendizaje, que me ayudó a comprender mejor cómo funcionan los temas de WordPress. Además, saber que mis personalizaciones están seguras durante las actualizaciones me da tranquilidad. ¡Definitivamente es una habilidad que vale la pena desarrollar! Gracias por compartir tus pensamientos; es genial conectar con otras personas que valoran el aprendizaje práctico.
Chris
Nunca le di mucha importancia a los temas hijos, pensando que no eran necesarios. Antes de leer este artículo, no me di cuenta de que las funciones personalizadas se eliminan del archivo functions.php cuando se actualiza el tema. Para mí, un tema hijo es imprescindible si uso un tema del repositorio de temas de WordPress. ¡Gracias por este artículo informativo!
Dayo Olobayo
Gran punto sobre los temas hijos. Sin embargo, hay otra opción a considerar… Algunos temas premium ofrecen paneles de personalización que evitan la necesidad de editar código por completo. Sin embargo, los temas hijos brindan más flexibilidad a largo plazo, especialmente si te sientes cómodo con un poco de código.
Mrteesurez
Me pasó lo mismo cuando empecé, no le di ninguna consideración al tema hijo antes, luego descubrí lo útil que es, especialmente al agregar más personalización al tema gratuito que tiene actualizaciones frecuentes. El archivo del tema hijo se carga primero antes que el tema padre, lo que permite conservar la personalización agregada.
Hajjalah
Gracias por esta guía completa. Me gustaría crear un tema hijo usando el método del plugin, pero todavía tengo algunas dudas sobre algunos problemas.
¿Los códigos en el plugin WPCode tendrán efecto en el tema hijo? Si el tema padre se actualiza pero el tema hijo no, ¿no pueden entrar en conflicto y causar un error?
Soporte de WPBeginner
Sí, el código en WPCode aparecerá en tu tema hijo y si actualizas el tema padre existe la posibilidad de conflicto, pero no es una garantía.
Administrador
Mrteesurez
Buena pregunta, Sr. Hajjalah.
Tuve las mismas preocupaciones cuando empecé a crear temas hijos. Usando el plugin WPCode, el código debería aplicarse tanto al tema padre como al hijo, siempre y cuando esté colocado correctamente. Sin embargo, si el tema padre se actualiza y el tema hijo no, puede haber un conflicto. Una vez tuve un problema de diseño debido a esto, pero actualizar y probar las actualizaciones en un sitio de staging me ayudó a evitar errores.
Jiří Vaněk
Un tema hijo es siempre lo primero que creo en un sitio recién instalado. Aunque intento usar WP Code mucho y evitar problemas, el tema hijo es algo absolutamente brillante al actualizar una plantilla y puede ahorrar muchos problemas con código perdido que desaparece de la plantilla principal después de una actualización.
Asad
Señor, ¿qué debo escribir en function.php para llamar al tema padre?
Soporte de WPBeginner
You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */
Administrador
Yogesh Sambare
Hola, equipo wpbeginner,
Gracias por esta guía increíble, ahora creo que puedo crear mi tema hijo, y es realmente útil para mí.
Soporte de WPBeginner
Glad you found our guide helpful!
Administrador
Ricardo
La línea:
“wp_get_theme()->get(‘Version’) )”
Debería ser:
“wp_get_theme()->get(‘Version’) )”
¡saludos!
Soporte de WPBeginner
While our comments automatically changed that in your message, we see the issue, thank you for letting us know
Administrador
Rubb
¿Puedo eliminar el plugin después de crear el tema hijo?
Soporte de WPBeginner
Currently, you can do that with the plugin
Administrador
Eitan
Necesitas agregar comillas a Y = (“Y”) en el echo date, o obtendrás un error. – echo date("Y")
Soporte de WPBeginner
Thank you for pointing out the typo
Administrador
Bomo
Ahora que hemos creado un tema hijo, ¿cómo actualizamos el tema padre cuando el tema hijo está activado?
Soporte de WPBeginner
Actualizarías el tema padre como lo harías normalmente. Por seguridad, es posible que desees crear una copia de seguridad antes de actualizar el tema padre en caso de que haya algún conflicto.
Administrador
RYAD
¿Pero tenemos que activar el tema padre antes de actualizar y luego desactivarlo y reactivar el tema hijo?
Soporte de WPBeginner
No, puedes actualizar el tema sin que esté activo
Mahesh Yadav
Una cosa que quiero saber, si creamos un tema hijo, entonces tenemos 2 archivos CSS para cargar: uno del tema padre y el segundo del tema hijo. ¿No aumentaría esto el tiempo de carga del sitio y añadiría un CSS más para cargar?
Soporte de WPBeginner
Si bien el tiempo de carga técnicamente aumentaría, no debería ser en una cantidad notable.
Administrador
Nadia Shaheen
¡Gran trabajo!
Mantente bendecido y sigue compartiendo contenido increíble.
Soporte de WPBeginner
Thank you, glad you liked our content
Administrador
Fahad
Great Work !
This site is super helpful
Keep it up !!
Soporte de WPBeginner
Thank you, glad our article was helpful
Administrador
Daniel Waduka
Estoy empezando a usar temas hijos, y este artículo me ha sido de gran ayuda.
Muchas gracias.
Soporte de WPBeginner
Glad our guide could be helpful
Administrador
Marcos Flores
¡Hola! He estado leyendo este artículo y funciona. Pero también leí la documentación de WordPress sobre esto y dicen esto
“Tenga en cuenta que el método anterior era importar la hoja de estilos del tema padre usando @import: esto ya no es una buena práctica, ya que aumenta el tiempo que tardan en cargarse las hojas de estilo. El método correcto para poner en cola la hoja de estilos del tema padre es agregar una acción wp_enqueue_scripts y usar wp_enqueue_style() en el functions.php de su tema hijo”.
¿Debo usar ambos métodos? O si uso el function.php, ¿no necesito escribir la función de importación dentro de style.css (ubicado en la carpeta de mi tema hijo)?
Khema
A tus instrucciones les falta un paso con la creación de functions.php. Debería mencionar que necesita envolver todo el archivo. En este caso, no quise agregar el ejemplo que usaste y otro fragmento de código del artículo que enlazaste. Naturalmente, esos códigos no incluían la etiqueta php.
Gracias por el artículo. Es muy, muy útil.
rReons
Entonces, una pregunta. Estaba usando mi tema de WordPress sin ningún tema hijo y estaba haciendo todos los cambios en él. He creado un tema hijo gracias a tu guía y ahora lo estoy usando como tema del sitio web.
Mi pregunta es, ambos temas tienen las mismas modificaciones. Si actualizo el tema principal a partir de ahora, ¿los cambios afectarán también al tema hijo?
balu
¡Hola! wpbeginner. El sitio oficial de WordPress dice esto. Necesitas actualizar la publicación. ¡Gracias!
Tenga en cuenta que el método anterior era importar la hoja de estilos del tema padre usando @import: esto ya no es una buena práctica, ya que aumenta el tiempo de carga de las hojas de estilo. El método correcto para poner en cola la hoja de estilos del tema padre es agregar una acción wp_enqueue_scripts y usar wp_enqueue_style() en el functions.php de su tema hijo. Por lo tanto, deberá crear un archivo functions.php en el directorio de su tema hijo. La primera línea del archivo functions.php de su tema hijo será una etiqueta PHP de apertura (<?php), después de la cual podrá poner en cola las hojas de estilo de su tema padre e hijo. La siguiente función de ejemplo solo funcionará si su Tema Padre utiliza un solo archivo style.css principal para contener todo el CSS. Si su tema hijo tiene más de un archivo .css (por ejemplo, ie.css, style.css, main.css), deberá asegurarse de mantener todas las dependencias del Tema Padre.
Pat
¡Gran información... llegó a mi lista de guardados! ¡Gracias!
Alfonso de Garay
Tengo un tema hijo con la última versión del tema instalada en mi sitio. Versión de WP 4.7.5. Recibí un aviso que dice que la versión de WP está disponible, por favor actualiza ahora.
1. ¿Tengo que hacer una copia de seguridad de mi sitio nuevamente antes de actualizar?
2. ¿Tengo que crear otro tema hijo usando la versión 1 del tema hijo?
2. ¿Cómo puedo cambiar el nombre, correo electrónico y URL a la versión 1 de Chile
Soporte de WPBeginner
Hola Alfonso,
Las actualizaciones de WordPress normalmente no afectan a sus temas, por lo que no necesita crear otro tema hijo. Siempre debe hacer una copia de seguridad de su sitio web antes de actualizar WordPress.
Administrador
Lisa Bruce
Hola, veo que este video/publicación tiene algunos años, así que llego un poco tarde a la fiesta, pero tengo una pregunta con la que espero me puedas ayudar.
Soy relativamente nuevo en WP y acabo de darme cuenta de la importancia de los temas hijos. He estado trabajando en el desarrollo de un sitio para un amigo y he hecho varios cambios en el tema que estoy usando. Encontré un error en el tema y contacté al desarrollador del tema y me dijeron que el error se había corregido en una actualización reciente.
Si instalo la actualización, creo que perderé todas mis personalizaciones. ¿Es demasiado tarde para crear un tema hijo? ¿Es posible hacerlo ahora y luego instalar la actualización? Prefiero no tener que empezar de cero.
Soporte de WPBeginner
Hola Lisa,
Si sabes qué cambios hiciste y a qué archivos, entonces primero descarga una copia de seguridad de tu tema existente a tu computadora. Después de eso, instala la versión actualizada. Ahora puedes crear un tema hijo y luego copiar y pegar el código de tu versión personalizada en el tema hijo.
Administrador
Nell Yang
Gracias por esta útil publicación. Siempre he estado buscando un video que me muestre exactamente cómo usar un tema hijo. Consume mucho tiempo que cada vez que actualizo mi tema, todos mis estilos desaparecen. Es frustrante tener que hacerlo todo de nuevo. Intenté leer la documentación de WordPress, pero todavía no sé cómo proceder después de activar el tema hijo. ¡Sigue con el buen trabajo! ¡Gracias de nuevo!
Tony Agee
Buen video instructivo. La mayoría de los tutoriales que he visto te dicen que pegues el código en el archivo, pero no te dicen en qué medio pegar el código. Iba a usar Notepad++, pero supongo que puedes usar el bloc de notas normal.
JP
Hola, solo quiero decir que eres un muy buen escritor, muy claro y simple. Pasé mucho tiempo en tu artículo para aprender WP.
¡Gracias!
Rob Brooks
Hola. Gracias por ser un gran recurso de WP. Soy nuevo en WP y realmente aprecio tu guía. He seguido el artículo al pie de la letra, pero cuando voy a habilitar la plantilla hija en el sitio, obtengo el error “Falta el tema padre. Por favor, instala el tema padre “Real Estate Lite”. Como ves, estoy usando una plantilla gratuita llamada Real Estate light. está ubicada en el directorio ../real-estate-lite/ de wp-content/themes. Mi código está abajo… ¿hice algo mal?
Theme Name: Real Estate Lite Child Theme Theme URI: http://www.example.com/ Description: Real Estate Lite child theme Author: me Author URI: http://www.example.com Template: Real Estate Lite Version: 1.0.0 */ @import url("../real-estate-lite/style.css");1-click Use in WordPress
Además, mencionaré que el tema era gratuito y se está ejecutando en la versión 4.7.2 de WP (ejecutándose en Plesk). Creé el archivo style.css directamente en el servidor, así que no hay problemas de FTP.
Ya he realizado cambios significativos en el archivo style.css principal, así como en functions.php… No estoy seguro de si esto podría afectar esto, pero voy a probar en un dominio de prueba sin editar para ver si obtengo los mismos resultados.
Cualquier guía/asistencia que pueda proporcionar sería muy apreciada.
Soporte de WPBeginner
Hola Rob,
Necesitarás que el tema padre esté instalado en tu sitio y que el valor de Template coincida con el nombre real del tema padre, que puedes ver en su archivo style.css.
Administrador
Carrie
¡Hola! ¡Gran artículo! Finalmente estoy empezando a entender cómo editar CSS para obtener el resultado que quiero, gracias a este artículo.
¡Muchas gracias por la explicación simplificada!
Nalin
Creé un tema hijo y estoy usando @import para el "style.css" en un tema hijo. Ahora quiero cambiar en otro archivo CSS de la carpeta del tema padre... /font_awesome/css/fontawesome.css
Ahora, quiero saber dónde pondré mi nuevo fontawesome.css en el tema hijo y cómo usar el comando @import.
o cualquier otro proceso para usar más archivos CSS en el tema hijo.
Rebecca
Así que no tengo la carpeta wp-content en mi computadora. ¿Qué debo hacer?
¿Debería haberla descargado en algún momento?
Soporte de WPBeginner
Hola Rebecca,
El archivo wp-content está alojado en tu cuenta de hosting, no en tu computadora. Necesitarás un cliente FTP para conectarte a tu servidor.
Administrador
Brad
Usar @import ya no es una buena práctica
SAppa
Entonces, ¿cuál es la mejor práctica ahora? Deberías poder respaldar tu comentario.
Jual beli rumah
Gracias
Jean-philippe
He aprendido mucho en las últimas horas en su sitio web. Cada vez que busco algo en Google relacionado con "cómo" en WordPress, encuentro que la mejor información está aquí en WPbeginner. Siempre está bien explicado y es fácil de entender. Siempre volveré por información aquí sin duda.
Soporte de WPBeginner
Hola Jean-philippe,
Thanks for the kind words, we are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Administrador
Smart Rashed
Este es el artículo que estaba buscando, gracias.
Kevin
Sé que esta será una pregunta tonta. Soy muy nuevo en esto y no tengo ninguna habilidad. Si estoy creando un archivo, una hoja de estilo, etc. en el archivo de instalación de mi wp en mi PC local, ¿cómo llega eso a mi sitio web? Supongo que me falta eso. Trabajo en mi sitio web usando como 3 PC diferentes y esos archivos locales no están en todas ellas. De nuevo, estoy seguro de que me falta algo realmente tonto. No veo la conexión.
Soporte de WPBeginner
Los archivos que editas en tu computadora deben transferirse a tu sitio web usando un cliente FTP. Consulta nuestra guía sobre cómo subir archivos de WordPress usando FTP.
Administrador
Kevin
Ok, entendí eso e hice un tema hijo, pero cuando lo activo, el formato del sitio está completamente desordenado con respecto al tema padre. ¿Qué hice mal?
Francesco
Hola,
Estoy siguiendo tu tutorial pero WordPress (4.5.3) no reconoce la nueva carpeta en mi servidor en línea. ¿Cómo puedo solucionar esto?
Gracias,
F.
Muhammad Moosa
Artículo útil, lo seguí y creé un tema hijo. Gracias.
Carolina
Hola, gracias por el tutorial, muy útil. Pero tengo una pregunta. ¿Puedo crear un tema hijo de un sitio web ya establecido? Tengo un cliente que diseñó su propio sitio web pero no creó un tema hijo. ¿Cómo proceder?
Soporte de WPBeginner
Si su tema actual sigue los estándares de codificación y las mejores prácticas de WordPress, no debería tener problemas para crear un tema hijo.
Administrador
Mike
Muchas gracias por el artículo y el video. Aparentemente, desde que se crearon, WordPress tiene nuevas mejores prácticas enumeradas en su codex, lo que me confunde.
“El paso final es poner en cola las hojas de estilo del tema padre y del tema hijo. Tenga en cuenta que el método anterior era importar la hoja de estilo del tema padre usando @import: esto ya no es una mejor práctica.”
¿Me apego a los pasos que describiste aquí detalladamente, u omito la función de importación y creo el archivo PHP, o implemento ambos?
El archivo style.css de mi tema solo contiene una cabecera, por lo que importar ese archivo parece irrelevante, y hay varios archivos CSS como main.css ubicados en otra parte de la estructura de archivos del padre. Sin saber nada mejor como principiante, ya he realizado cambios en main.css para lograr algunos de mis objetivos y solo ahora me doy cuenta de que el tema hijo es necesario.
Cualquier consejo es muy apreciado.
Saludos cordiales,
Mike
Soporte de WPBeginner
Necesitarás importar al menos tu archivo style.css, el cual debería estar en el directorio principal de tu tema padre. Debería importar automáticamente otros archivos CSS.
Administrador
Mike
¿Incluso si el style.css no tiene nada más que la cabecera?
Jack
Si tu archivo style.css no tiene importaciones a otros estilos CSS, puedes importarlos directamente, al igual que style.css.
Olamide
Buenos días. Al hacer una vista previa en vivo del tema hijo, noté que no tenía el CSS del tema padre. ¿Quizás esto sea el resultado de un error en la forma en que inserté el código?
Este es el código que inserté:
/*
Theme Name: sparkling child
Theme URI: https://www.wpbeginner.com/
Description: sparkling child theme
Author: djetlawyer
Author URI: http://www.example.com
Template: sparkling
Version: 1.0.0
*/
@import url(“../sparkling/style.css”);
El tema padre es "sparkling". Si hay algún error, por favor corríjame.
Gracias.
Soporte de WPBeginner
El código es correcto.
Administrador
lucia
Hola,
Estoy intentando configurar un tema hijo para activar mi pie de página en twenty twelve, pero no sé qué código usar para configurarlo.
Intenté con esta página web
con varias sugerencias, y he intentado cambiar tu sugerencia como se da en twenty thirteen, pero no tengo éxito.
¿Podrías darme el código correcto y funcional para configurar un tema hijo para twelve twelve.
Leigh
Esto fue increíblemente útil, especialmente tu HTML para que lo copiáramos. Nunca antes me había emocionado tanto ver cambiar los colores en un sitio web. ¡Esta es fácilmente la mejor guía para este tema!
Bhautik Andhariya
Hola, he intentado el mismo ejemplo que mostraste. Pero mi tema hijo está reemplazando todo el estilo de su tema padre.
No tiene ningún estilo de su padre. ¿Cuál es la solución? ¿Puedes ayudarme? Soy nuevo en WordPress y lo estoy aprendiendo.
Angelo
¡Hola!
Acabo de instalar la plantilla Bose y también creé un tema hijo para ella. Sin embargo, el siguiente mensaje de error aparece en el centro de mi sitio web:
Advertencia: implode(): Se pasaron argumentos no válidos en /home/hello582/public_html/teste/wp-content/themes/bose/featured.php en la línea 12
Soy muy principiante en la creación de sitios web, así que no tengo ni idea de cuál es el problema. ¿Alguien podría ayudarme?
¡Muchas gracias!
Soporte de WPBeginner
Por favor, contacta al desarrollador del tema para obtener soporte.
Administrador
Djamila
Hola,
¡Gracias por el artículo! No podía hacer que mi tema hijo apareciera en la sección de plantillas y resultó que, efectivamente, escribí mal el nombre de la plantilla original. Vaya diferencia hace una mayúscula, ¿eh?
Sin embargo, ahora que tengo mi tema hijo, pude actualizar el tema padre y, cuando lo hice, de repente tuve un problema con un plugin súper importante (estoy construyendo un blog de reseñas en una base de datos local, por ahora, y es el plugin de resumen/calificación que pertenece a los diseñadores de la plantilla).
En la plantilla padre, 'actualizaron' este plugin. Personalmente prefiero el antiguo, pero bueno... de todos modos... debajo de mi reseña ahora veo *ambos*, el resumen antiguo con las calificaciones y el nuevo, que también se ve desajustado. Lo he desactivado y reactivado, pero se queda así. Súper molesto y no sé dónde buscar para conservar el antiguo (más bonito) o solo el nuevo y que se vea como debería.
¿Por dónde empiezo? Gracias por cualquier ayuda que me puedan dar.
Soporte de WPBeginner
Contacta al soporte del plugin.
Administrador
Amanda
¡Gracias por un gran artículo!
Si uso un tema hijo, ¿todavía podré personalizarlo usando las opciones de Apariencia > Opciones del tema que vienen con mi tema en el panel de administración, como el tamaño de fuente, los colores de fondo, etc., o tengo que ir por la ruta del código?
Si he activado el tema hijo y uso la pestaña Apariencia para actualizar el estilo en lugar de usar código, ¿se está actualizando esencialmente el tema padre porque los archivos relacionados no están en la carpeta del tema hijo?
Soporte de WPBeginner
Sí, tu tema hijo heredará todas estas opciones.
Administrador
Amanda
Gracias por tu respuesta.
Entonces, si activo el Tema Hijo y uso la configuración en la pestaña Apariencia de mi panel de administración para cambiar el estilo (en lugar de escribir código CSS), ¿mis cambios no se sobrescribirán cuando haga una actualización del tema o de WordPress en el tema padre?
¿Todavía necesitaría copiar la hoja de estilos, los archivos de encabezado, pie de página, etc. a la carpeta del tema hijo para que el escenario anterior funcione?
Laura
He seguido estos (y otros) pasos para crear un tema hijo basado en twentytwelve. El problema que tengo es que WordPress parece ignorar solo parte del CSS que he cambiado del tema original y me está volviendo loco. Por ejemplo, he cambiado con éxito el color de fondo del menú, pero simplemente no me deja cambiar los colores del texto de nada. He usado tu enfoque de editarlo en la herramienta de inspección de código de Chrome (que funcionó muy bien, el color se cambió, lo que sugiere que mi código era correcto) y pegar el código modificado en el style.css del tema hijo, pero no parece ser reconocido en absoluto. No sé qué hacer al respecto, ¡cualquier idea sería muy bienvenida!
Boyet
Muchas gracias por este tutorial. No tengo problemas para editar la hoja de estilos, el encabezado y los archivos del pie de página de mi tema hijo.
Mi pregunta es, ¿qué hago si quiero cambiar algo en un archivo ubicado en la carpeta de mi tema principal, como: public_html/wp-content/themes/shopera/woocommerce?
¿Necesito crear la misma ruta en mi tema hijo?
Gracias de antemano...
Soporte de WPBeginner
Sí.
Administrador
Tony Arnold
Muy útil y en gran medida entendido y ejecutado.
Estoy tratando de hacer que la imagen de mi encabezado ocupe todo el ancho. Mi tema no 'permite' esto de forma estándar, ¿así que debo cambiar el archivo?
Gracias
Sohail Farooq
Me encanta este artículo. Lo intenté y funcionó de inmediato.
Xander
¡Hola!
Parece que me he atascado un poco. Ya he hecho algunos cambios en algunos archivos .php (por ejemplo, header.php, footer.php, etc.) de mi tema padre sin tener instalado un tema hijo.
Ahora quiero crear un tema hijo porque han estado llegando actualizaciones del tema padre. ¿Qué debo hacer con todos esos archivos ya modificados? ¿Debo copiarlos en el directorio del tema hijo? ¿Qué carpetas necesito tener? ¿Debo crear las mismas carpetas que tiene el tema padre para el tema hijo?
Gracias,
Soporte de WPBeginner
No necesitas todas las carpetas de tu tema principal. Solo necesitas recrear los archivos donde hayas hecho cambios. Tenemos un tutorial sobre cómo actualizar temas sin perder cambios. Tiene una sección donde puedes averiguar qué archivos has modificado en tu tema y qué cambios has hecho en ellos.
Descarga una copia nueva de tu tema principal en tu computadora. Descarga el tema antiguo a tu computadora y luego sube la copia nueva. Después de eso, crea un nuevo tema hijo. Copia los archivos donde hayas hecho cambios del tema nuevo a tu tema hijo. Copia los cambios que hayas hecho en los archivos del tema antiguo en los archivos de tu nuevo tema hijo.
Llevará algo de solución de problemas antes de que lo hagas bien. Por lo tanto, te recomendamos encarecidamente que hagas una copia de seguridad de tu sitio primero. Si es posible, prueba tus cambios en una instalación local de WordPress primero.
Administrador
Xander
Gracias. ¿Podrías darme un enlace al tutorial mencionado?
Hay otro obstáculo: he cambiado el archivo functions.php, ¿cómo puedo reconciliar ambos en los temas padre e hijo?