Aniversario Divi, aprovecha el 20% de descuento
Ver Descuento

admin@victoraqui.com

Cómo crear un tema hijo (Child Theme) en WordPress para Divi o cualquier otro tema

por | Feb 27, 2023 | Wordpress | 0 Comentarios

En nuestro anterior tutorial: «Cómo y dónde agregar código PHP personalizado a WordPress y Divi», vimos que una de las formas más utilizadas de agregar código PHP personalizado es hacerlo en el archivo functions.php de un tema hijo. Hoy vamos a profundizar un poco más en el tema de los Child Themes o Temas Hijos en WordPress.

Cómo y dónde agregar código PHP personalizado a WordPress y Divi

¿Qué más se puede decir de WordPress?. La gran plataforma que todos amamos de gestión de contenidos, que es usada…

¿Qué es un tema hijo o Child Theme en WordPress?

Un tema hijo o «Child Theme» en WordPress es un tema que hereda todas las funcionalidades y características de otro tema principal o «Parent Theme». Sin embargo, permite al usuario modificar o personalizar ciertos aspectos del tema original sin afectar a los archivos del tema principal.

¿Por qué crear un tema hijo?

Al modificar el código principal del tema, corremos el riesgo de perder nuestros cambios cuando actualizamos el tema en el futuro. También existe la posibilidad de que la modificación del código del tema cause conflictos con otros plugins o temas instalados en nuestro sitio web.

Para evitar estos problemas, un tema hijo funciona como una extensión del tema principal que se utiliza para realizar cambios sin modificar el tema principal. Esto permite que los cambios se realicen sin riesgo de perderlos cuando se actualiza el tema principal.

Además, se vienen tutoriales donde vamos a hacer cosas geniales en WordPress y Woocommerce con fragmentos de PHP. Así que ten listo tu Child Theme y suscríbete a mi lista de correo…

Cómo crear un tema hijo para Divi

En realidad, los procedimientos son los mismos tanto si queremos crear un tema hijo para Divi, como si queremos crearlo para cualquier tema. Así que vamos a detallar las formas generales de hacerlo a continuación.

Cómo crear un tema hijo o Child Theme en WordPress

Vamos a ver dos formas de hacerlo. Ambas son igual de válidas, depende ya del gusto de cada uno. Primero veremos cómo hacerlo al modo Victor, creando los archivos y carpetas con nuestras propias manos. Luego, veremos cómo hacerlo con la ayuda de un plugin.

¡Vuélvete un miembro Premium!

Si te gusta el contenido y deseas apoyar el proyecto, puedes volverte un miembro Premium y acceder a tutoriales exclusivos, como los que se muestran a continuación, y más beneficios.

Creando un tema hijo en WordPress desde cero

Bien, crear un tema hijo no es nada del otro mundo. Simplemente implica crear una carpeta y un par de archivos. Prefiero que aprendan a hacerlo de éste modo porque así se familiarizan con manejar los archivos y les parecerá más sencillo cuando más adelante necesiten agregar código PHP personalizado al archivo functions.php de su tema hijo.

Paso 1: Crear una carpeta para su tema hijo

Deben entrar a los archivos de la instalación de su WordPress. Personalmente se me hace más fácil hacerlo desde el File Manager que viene en el panel de control del hosting. En mi caso, Rapihosting (Excelente opción para hospedar tu web por cierto) utiliza cpanel y su file manager se ve de ésta manera:

Dentro, simplemente debes entrar a la carpeta que contiene a tu web. Mayormente, el contenido de tu web se encontrará en la carpeta public_html, esto pasa cuando tu web es el dominio principal de la cuenta de hosting. Si es un dominio adicional, se encontrará en una carpeta con el nombre del dominio.

Una vez ingreses a la carpeta de tu web, verás la organización de archivos clásica de WordPress, sigue la siguiente ruta para llegar a los temas: wp-content -> themes

Organización de archivos clásica de WordPress

Ahora que estás dentro de la carpeta «themes», deberás crear allí una carpeta para tu tema hijo. La carpeta que crees debe tener un nombre único y descriptivo que identifique el tema hijo. Por ejemplo, si desea crear un tema hijo del tema «Divi», podríamos nombrar a la carpeta «Divi-child».

En cPanel hay una opción superior para añadir carpetas o archivos.

Opción de agregar Carpeta en cPanel

Pssst si te está gustando el artículo, éstos otros te van a encantar

Paso 2: Crear un archivo style.css para su tema hijo

El siguiente paso es crear un archivo que se llame style.css en la carpeta que acabamos de crear. Para ello, así como había una opción de +Folder para agregar carpetas, hay una de +File para agregar archivos.

Opción de agregar Carpeta en cPanel

Ahora deberás editar éste archivo style.css para agregarle una referencia que conecte nuestro tema hijo (Child Theme) con el tema principal (Parent Theme).

Para editar un archivo, se debe hacer click derecho y elegir la opción de editar.

Opción de agregar Carpeta en cPanel

Una vez dentro, simplemente copia y pega el siguiente código. Al final, no te olvides de guardar cambios.


/*
Theme Name: Divi Child (Nombre de nuestro tema hijo)
Theme URI: https://yourdomain.com/twenty-twenty-one-child/ (URL del tema- Opcional)
Description: Child theme para Divi (Descripción del tema hijo)
Author: Victor Aquino (Nombre del autor)
Author URI: https://yourdomain.com/ (URL del autor- Opcional)
Template: Divi (IMPORTANTE nombre del tema padre o principal)
Version: 1.0 (Versión)
*/

Paso 3: Agregar una referencia al archivo style.css

Así como creamos el archivo style.css anteriormente, vamos a crear otro archivo, pero ahora deberá llamarse functions.php (Sí, es el famoso functions.php donde vamos a poder pegar nuestro PHP personalizado ).

Dentro de éste archivo, vamos a pegar lo siguiente: (No olvides guardar cambios)


add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    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')
    );
}

Lo que hace éste código es que se carguen los estilos del tema padre y luego del tema hijo sin problemas.

Más adelante, debajo de éste código puedes agregar todo el PHP que quieras

Paso 4: Activar nuestro nuevo tema hijo

Ahora, vamos a volver al panel de WordPress. Nos dirigimos a Apariencia-> Temas. Dónde se encuentra nuestro tema activo, y vamos a ver que ahora nuestro tema hijo creado aparecerá ahí. Y lo vamos a activar.

¡Ya tenemos un tema hijo!, ¡ Y hecho con nuestras propias manos!

Cómo crear un tema hijo (Child Theme) en WordPress para Divi o cualquier otro tema

Crear un tema hijo con plugins

Vamos a ver cómo podemos crear un tema hijo fácilmente con un plugin gratuito del repositorio de WordPress. El plugin en cuestión es : «Child Theme Configurator«.

Child Theme Configurator

Child Theme Configurator es uno de los plugins de tema hijo más populares en WordPress. Vamos a ver cómo crear un tema hijo con él, paso a paso.

Paso 1: Instalar y activar el plugin

Lo primero que debes hacer es instalar y activar el plugin Child Theme Configurator en tu sitio web de WordPress. Puedes hacerlo yendo a «Plugins» en tu panel de administración de WordPress y buscando «Child Theme Configurator». Una vez que lo encuentres, haz clic en «Instalar ahora» y luego en «Activar».

Paso 2: Crear un nuevo tema hijo

Una vez que hayas instalado y activado Child Theme Configurator, ve a «Herramientas» en tu panel de administración de WordPress y selecciona «Child Themes».

En la siguiente pantalla, elige el tema padre que deseas utilizar como base para tu tema hijo. Puedes seleccionar cualquier tema que esté instalado en tu sitio web. En mi caso aparece por defecto el tema Divi porque es el que tengo activo, pero puedes generar un Child Theme de cualquier tema.

También verificar que esté marcada la opción de «CREAR un nuevo tema hijo».

Luego, debes hacer clic en «Analizar».

Si te está gustando el artículo, éstos otros te van a encantar:

Paso 3: Personalizar tu tema hijo

Después de analizar el tema padre, verás una lista de opciones de personalización disponibles. Es recomendable dejar la mayoría en su opción por defecto. Quizá observar que la sección 4 se refiere al nombre que tendrá la carpeta del tema hijo, puedes usar cualquier nombre. Y en la sección 6 marcar «Utilizar cola de stilos de WordPress».

Si haces click en la sección 7, donde dice «Click para editar los atributos del tema hijo», se abrirán unas opciones para configurar el nombre de Child theme, así como su descripción, entre otros datos.

Paso 4: Guardar y activar tu tema hijo

Y finalmente hacer click al botón: «Create new Child Theme»

Y cuando cargue la página, ya estará creado tu Child Theme con todos los archivos necesarios.

Recuerda que a pesar que tu Tema hijo ya está creado, aún no está activo. Así que debes ir a Apariencia -> Temas para activar, como se hace con cualquier tema.

Ya tienes un tema hijo, así que ya puedes empezar a agregarle código personalizado!

Conclusión

Crear un tema hijo en WordPress es una forma segura y efectiva de personalizar la apariencia de su sitio web sin perder sus cambios cuando actualiza el tema principal.

Espero que hayas disfrutado éste artículo tanto como yo disfruté hacerlo 😉

Si te gustó el contenido

Apóyanos compartiendo en tus redes, nos ayudarías muchísimo. Y haz click en la quinta estrella de abajo, para saber que éste tema te interesa y hacer artículos similares.

5/5 - (2 votos)

No olvides que subo trucos nuevos cada semana suscríbete a mi canal y dale a la campanita para que te enteres cuando suba uno nuevo.

Hasta la próxima!!

Artículos Relacionados

Victor Aquino

Experto en WordPress y Divi, entusiasta del SEO, Copywriting, Marketing Digital y Negocios Online en general. Amante de la vida y tu webmaster de confianza.

Contactar

¿Quieres invitarme un cafécito?

Así podré estar más despierto para crear más contenido gratuito como éste 😛

Click Aquí

¿Tienes dudas?

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Hosting WordPress

El mejor Hosting Premium optimizado para WordPress y Divi, al mejor precio.

Licencias 1 Sitio

Divi Theme/ Builder

Ver Más

Divi Machine

Ver Más

Divi Bodycommerce

Ver Más

Divi Flash

Ver Más

Últimos Artículos