Cómo Crear un Tema Hijo de WordPress (Guía para Principiantes)

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:

1. 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.
2. 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.
3. 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.
4. 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.

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.

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:

• OceanWP
• Ultra
• Nozama
• Eclipse

Cómo personalizar tu tema hijo clásico

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.

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.