Cómo crear un tema hijo de WordPress: Guía paso a paso

¿Quieres jugar con el diseño y la funcionalidad de tu tema de WordPress, pero tienes miedo de que pueda alterar tu tema original?

No te preocupes.

Utilizar un tema hijo es una forma estupenda de modificar, alterar y probar tu tema sin preocuparte de los riesgos que conlleva. Como estarías modificando el tema hijo y no el padre, no perderás ninguna personalización al actualizar el tema padre.

Si tienes algún problema después de hacer los cambios, siempre puedes volver al tema original borrando el tema hijo que has creado.

En este tutorial, te mostraré cómo crear un tema hijo de WordPress y sus personalizaciones.

Así que ¡comencemos!

¿Qué es un tema hijo de WordPress?

Los temas hijo -como su nombre indica- son temas que derivan funcionalidades de un tema padre. Editar tu tema de WordPress puede ser arriesgado porque cualquier personalización puede alterar el tema principal. Por lo tanto, los temas hijo pueden ser una alternativa sin riesgos para realizar cambios en tu tema de WordPress.

Los temas hijo de WordPress existen en una carpeta diferente a la del tema padre, y el tema hijo depende de las funcionalidades del tema padre a menos que se modifique. Al instalar un tema hijo en el panel de control de WordPress, verás que está conectado al tema padre.

Si utilizas un tema hijo en tu sitio web, el núcleo de WordPress comprobará primero los archivos del tema hijo. Si no se modifican, WordPress ejecutará los archivos del tema padre.

Es importante recordar que un tema hijo no puede funcionar de forma independiente. Debe instalarse junto al tema principal.

¿Cuál es la diferencia entre los temas de WordPress padre e hijo?

Un tema padre es un tema WordPress completo que incluye archivos de plantilla, hojas de estilo, CSS, archivos JavaScript y otros activos necesarios para hacer funcionar un sitio web WordPress. Por otro lado, el tema hijo hereda su funcionalidad del tema padre.

Aquí tienes una tabla que te ayudará a entender las diferencias entre ambos.

¿Cuándo utilizar un tema hijo en WordPress?

Puedes utilizar un tema hijo cuando

• Quieres personalizar las plantillas o estilos de tu tema sin alterar el código del tema padre.
• Quieres probar nuevas funciones o personalizaciones sin riesgo.
• Estás desarrollando un nuevo tema y quieres utilizar un tema existente como punto de partida.
• Quieres crear un tema personalizado para un cliente o proyecto específico y utilizar un tema existente como punto de partida

Requisitos previos antes de crear un tema padre de WordPress

Lo primero y más importante que debes hacer antes de crear un tema hijo es crear una copia de seguridad de tu sitio. En caso de cualquier contratiempo, debes tener una copia de seguridad para restaurar tu sitio en un punto de ejecución. Hay varias formas de crear una copia de seguridad. Puedes utilizar plugins como Updraft, o también puedes crear una copia de seguridad desde tu plataforma de alojamiento.

Si nunca has hecho una copia de seguridad de un sitio web WordPress, puedes seguir nuestra sencilla guía sobre cómo hacer copias de seguridad de sitios web WordPress.

El segundo método sugerido consiste en crear un entorno de ensayo, realizar cambios en el entorno de ensayo y, a continuación, introducir los cambios en el entorno activo una vez que hayas terminado con los cambios. Crear un sitio web de ensayo de WordPress te permite probar los cambios sin afectar a tu sitio web activo.

Cómo crear un tema hijo manualmente

Crear un tema hijo en WordPress sólo requiere unos pocos pasos. Para comprender completamente el concepto de temas hijo en WordPress, crearemos un tema hijo del tema predeterminado de WordPress Twenty Fifteen y realizaremos ciertas modificaciones para comprender la idea que hay detrás de los temas hijo.

Para crear un tema hijo de WordPress, seguiremos estos 5 sencillos pasos:

1. Crear una carpeta de tema hijo
2. Crea una hoja de estilos para tu tema hijo
3. Pon en cola las hojas de estilo de los temas padre e hijo
4. Edita el archivo style.css del tema hijo
5. Editar un archivo de plantilla de single.php

Hablemos de cada uno de los pasos en detalle.

Paso 1: Crear una carpeta de tema hijo

En primer lugar, crea una carpeta independiente para colocar todos los archivos esenciales de tu tema hijo en tu sistema local.

¿Por qué en el sistema local?

Bien, una vez que hayas completado todos los archivos, puedes subir la carpeta a tu sitio web utilizando la tecnología FTP (Protocolo de Transferencia de Archivos).

En segundo lugar, asigna a esta carpeta recién creada un nombre parecido al de tu tema principal y añade la palabra «hijo» después del nombre. Por ejemplo, estoy utilizando un tema Twenty Twenty-Two en mi sitio web de WordPress.

Si quiero crear un tema hijo para Twenty-Twenty-Two, llamaría a la carpeta Twenty-Twenty-Two-child. Indica que esta carpeta es una carpeta de tema hijo del tema Veintidós.

Paso 2: Crea una hoja de estilos para tu tema hijo

A continuación, tendrás que crear el archivo ‘style.cs ‘ dentro de la carpeta de tu tema hijo. El archivo CSS contendrá todas las reglas y declaraciones de estilo de tu tema hijo.

Para crear el archivo CSS, puedes utilizar un editor de texto como el Bloc de notas o cualquier editor de código como Sublime Text.

Para que tu hoja de estilos funcione correctamente, debes añadir los comentarios de cabecera en la parte superior de tu archivo CSS. Los comentarios de cabecera contienen información básica sobre el tema hijo, incluido que es un tema hijo de un tema padre concreto.

Los dos elementos más importantes en los comentarios serían el Nombre del Tema y el directorio de Plantillas. Los temas suelen estar en la carpeta wp-content/theme.

Abre el Bloc de notas, copia y pega el siguiente código en tu archivo y guarda este archivo con extensión .css.

/*
Theme Name: Twenty Twenty Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentytwo
Description: Child Theme of Twenty Twenty-Two
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentytwentytwo-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Ahora, si navegamos a nuestro panel de administración de WordPress → Apariencia → Tema, veremos que ha aparecido Twenty Fifteen Child. Ahora podemos aplicar ese tema en nuestro sitio.

Como style.css está presente en el directorio del tema hijo de WordPress, WordPress cargará ese style.css y no el style.css del tema padre. Todos los demás archivos, como index.php, page.php y functions.php se cargarán desde el tema principal.

Como no tenemos ningún estilo definido en el style.css del tema hijo , tendremos que importar los estilos. La mejor práctica recomendada en el codex de WordPress es poner en cola las hojas de estilo mediante el archivo functions.php.

Paso 3: Pon en cola las hojas de estilo de los temas padre e hijo

A diferencia de otros archivos, la teoría que subyace al archivo functions.php en los temas hijo de WordPress es la siguiente: WordPress carga primero el archivo functions.php del tema hijo e inicializa las funciones que contiene. Después, ejecutará el archivo functions.php del tema principal.

Como ya he mencionado, importar hojas de estilo es la mejor forma de ponerlas en cola a través del archivo functions.php.

Crea el archivo functions.php en el directorio de tu tema hijo y añade el siguiente código.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Esto llamará a la hoja de estilo ‘style.css ‘ del archivo del tema padre. Si quieres editar algo en las hojas de estilo, puedes añadir esas reglas en el style.css del tema hijo.

Paso 4: Edita el archivo style.css del tema hijo

En los temas hijo de WordPress, puedes editar fácilmente las hojas de estilo definiendo reglas en el style.css de la carpeta del tema hijo. Por ejemplo, si queremos cambiar el color del ancla, todo lo que tenemos que hacer es añadir el siguiente código en el style.css de nuestro tema hijo

a {
color: #D54E21;
text-decoration: none;
}

Lo que ocurre aquí es que la regla style.css del tema hijo para ‘a’, anula el style.css del tema padre, el resto permanece intacto.

Paso 5: Editar un archivo de plantilla de single.php

Podemos editar fácilmente archivos de plantilla individuales en los temas hijos. Por ejemplo, si queremos editar single.php, debemos copiar ese archivo de la carpeta del tema padre y pegarlo en la carpeta del tema hijo de WordPress.

Supongamos que queremos eliminar la sección de comentarios de las páginas de una sola entrada. Tras copiar el archivo en la carpeta de nuestro tema hijo, podemos editarlo y eliminar la siguiente sección de comentarios.

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

Lo que ocurre aquí es que WordPress busca single.php en la carpeta del tema hijo. Si existe en el directorio, lo cargará desde allí. Si no, volverá a la carpeta del tema principal.

Así de fácil, podemos editar cualquier archivo de plantilla individual de nuestros temas. Este enfoque suele ser bueno porque mantiene intacto nuestro tema padre y lo actualiza sin perder nuestra personalización.

Cómo crear un tema hijo con un plugin

Si no eres desarrollador y no tienes conocimientos técnicos o no quieres utilizar el método manual, entonces puedes crear un tema hijo utilizando un plugin. Hay varios plugins disponibles en el repositorio de WordPress para la creación de temas hijo.

Aquí tienes 3 de los plugins de temas hijo gratuitos más populares:

1. Asistente para temas infantiles
2. Generador de temas WPS para niños
3. Generador de temas infantiles WP

Para este tutorial, utilizaré el plugin Child theme Wizard para generar el Tema Hijo.

Para empezar:

• Ve al panel de WordPress > Plugin > Añadir nuevo.
• Busca el plugin Child Theme Wizard en la barra de búsqueda de la derecha.
• Pulsa el botón Instalar.
• Una vez instalado, haz clic en el botón Activar para activar el plugin.

• Una vez que el plugin se haya activado correctamente, verás la opción Asistente para temas hijo en la opción Herramientas de la barra de administración de WP del lado izquierdo

• Ahora, debes seleccionar el Tema Padre. Para ello, tienes que añadir el Título, la Descripción y la URL del Tema Hijo y hacer clic en Crear Tema Hijo.

• Ahora ve a Apariencia > Tema y verás tu tema hijo recién creado.

Así de sencillo puedes crear un tema hijo utilizando un plugin – Child Theme Wizard.

Cómo comprobar el Tema Hijo después de la instalación

Tanto si creas un tema hijo manualmente como desde un plugin, puedes ver tu tema hijo navegando a Apariencia > Tema. Desde aquí, puedes ver el tema hijo instalado. También puedes Activar y Eliminar el tema.

Resumen

Y ya está. Espero que ahora sepas qué es un tema hijo de WordPress y en qué se diferencia de un tema padre.

En este blog, he intentado explicar las ventajas de utilizar temas hijo y los requisitos previos que debes tener en cuenta antes de implementarlos.

También cubrí en detalle los pasos para crear temas hijo manualmente y utilizando un plugin. Si todavía tienes alguna pregunta, no dudes en ponerte en contacto conmigo.

Danish Naseer

Danish Naseer es Community Manager de WordPress en Cloudways. Le apasiona diseñar, desarrollar e interactuar con las personas para ayudarlas. También participa activamente en la comunidad para compartir sus conocimientos. Además, le encanta ver documentales, viajar y pasar tiempo con su familia. Puedes contactarlo en [email protected]

Get Connected on: Twitter Community Forum