Cómo crear un tema hijo en WordPress

Al principio, el proceso detrás de la creación de un tema hijo para WordPress puede parecer una sobrecarga de información, especialmente si eres nuevo en el desarrollo para WordPress.

No es raro encontrar tutoriales altamente detallados sobre el desarrollo de temas hijos en WordPress que te informan diligentemente de todas las cosas que puedes hacer. Sin embargo, si llegas a este proceso siendo novato y sin contexto ni amplios conocimientos de fondo, puede ser difícil distinguir la diferencia entre los pasos esenciales, las prácticas recomendadas y los extras adicionales.

Por lo tanto, en lugar de explicarte los cientos de cosas que puedes hacer cuando creas un tema hijo para WordPress, vamos a comenzar describiendo los 5 pasos que debes llevar a cabo. Todo lo que sigue después de esos 5 pasos es complementario.

Profundizaremos en estos pasos dando más información sobre prácticas recomendadas y extras opcionales, pero comencemos manteniendo las cosas en su forma más simple posible.

Temas y plugins prémium de WordPress

Antes de que comencemos, no olvides que puedes explorar los miles de temas de WordPress en ThemeForest y plugins de WordPress en CodeCanyon. Compra estos temas (¿tal vez puedas extenderlos con un tema hijo?) y plugins de WordPress de alta calidad y mejora la experiencia en tu sitio web para ti y para tus visitantes.

Los 5 pasos esenciales para crear temas hijo en WordPress

Paso 1: crea una carpeta

Crea y nombra una carpeta vacía en la carpeta wp-content/themes de tu instalación de WordPress.

Paso 2: crea dos archivos

Crea los archivos "style.css" y "functions.php".

Paso 3: define el nombre del tema hijo y especifica su plantilla padre

Agrega un comentario en el archivo "style.css". Luego, en su interior, define el nombre de tu tema hijo y especifica el directorio de su tema padre de esta manera:

1

/*

2

Theme Name: My Child Theme

3

Template: parentthemedirectory

4

*/

Paso 4: carga los estilos padre

Agrega el siguiente código en el archivo "functions.php":

1

<?php

2

function enqueue_parent_styles() {

3

// You have to look up the parent theme’s stylesheet handle

4

// How to do this is covered later in the tutorial

5

$parenthandle = ’parent-style’;

6

// Double check this is the correct stylesheet location for the parent

7

wp_enqueue_style( $parenthandle, get_template_directory_uri().’/style.css’ );

8

}

9

add_action( ’wp_enqueue_scripts’, ’enqueue_parent_styles’);

10

?>

Paso 5: activa

Activa tu tema hijo a través de tu panel de administración de WordPress y, siempre que la hoja de estilo padre se cargue correctamente, tu sitio se verá tal y como se veía con el tema padre activo.

Eso es todo. Eso es todo lo esencial detrás de cómo crear un tema hijo en WordPress. Ahora veamos un poco más de detalle y agreguemos algunas prácticas recomendadas y extras opcionales.

Crea un tema hijo en WordPress: más detalles

Confirmación del nombre del directorio del tema padre

Por lo general el nombre del directorio del tema padre coincide con el nombre de dicho tema, pero aún debes asegurarte de que el nombre del directorio sea exactamente correcto, en particular incluyendo o excluyendo guiones de manera precisa.

Entonces, cuando estés dentro del directorio wp-content/themes configurando tu tema hijo, dedica un momento para identificar el directorio del tema padre y toma nota de su nombre exacto.

Asigna el nombre "parentname-child" a tu directorio

Técnicamente puedes asignar el nombre que quieras al directorio de tu tema hijo, pero se considera una buena práctica agregar "-child" al nombre del directorio del padre para que la relación entre el padre y el hijo sea clara.

Agrega más información al archivo "style.css"

Además de la información esencial que ya agregaste, tienes la opción de añadir un conjunto de información adicional al archivo "style.css" que aparecerá en el listado del tema en el panel de administración.

1

/*

2

Theme Name: My Child Theme

3

Template: parentthemedirectory

4

——— optional extras ———

5

Description: A child theme that adds some things

6

Theme URI:  https://example.com/parentname-child/

7

Author: It Me

8

Author URI: https://example.com 

9

Version: 1.0.0

10

*/

La información adicional es principalmente para el beneficio de otros, por lo que agregarla o no depende en gran medida de si planeas compartir tu tema hijo.

Confirmación de la ubicación de la hoja de estilo del tema padre

Por lo general la hoja de estilo principal del tema padre será "style.css", que se localiza en el directorio raíz, pero esto no siempre es así. Si la hoja de estilo padre tiene un nombre y/o ubicación diferente que no corresponda a los valores estándar, necesitarás usar esa información en lugar de la predeterminada al cargar los estilos padre a través del archivo "functions.php" de tu tema hijo.

Si te encuentras con que tu tema hijo inicialmente no tiene un estilo, y si estás seguro de que tu código para poner los estilos en cola es correcto, deberías verificar el nombre y la ubicación de la hoja de estilo padre.

Ya hemos cubierto cómo identificar la hoja de estilo de un tema en nuestro artículo "Cómo personalizar un tema de WordPress con CSS", así que échale un vistazo para aprender cómo hacer eso, ya sea:

1. Inspeccionando el código de <head>.
2. Revisando el archivo "functions.php".

Busca el manejador del tema padre

Probablemente habrás notado que, cuando pusimos la hoja de estilo padre en la cola, usamos la variable $parenthandle, que tenía el valor marcador de posición 'parent-handle'.

Este manejador es un identificador para la hoja de estilo padre que fue especificado por su desarrollador al escribir el código de wp_enqueue_style() para su carga, y ayuda a WordPress a diferenciar entre hojas de estilo. En aras de la coherencia, es una buena idea usar el manejador correcto para una hoja de estilo padre cuando tú mismo colocas en cola esa hoja de estilo.

Puedes buscar este manejador usando una variación de las dos técnicas mencionadas anteriormente para identificar la ubicación de la hoja de estilo de un tema padre, es decir, puedes inspeccionar el código de <head> o revisar el archivo "functions.php".

Con el tema padre activo, y mirando en la sección <head> de tu sitio, verás el manejador de la hoja de estilo en la propiedad id del elemento <link> relacionado, con el sufijo -css añadido.

Por ejemplo, el siguiente elemento muestra que esta hoja de estilo tiene el manejador twentytwenty-style:

1

<link rel="stylesheet" id="twentytwenty-style-css" href="https://example.com/wp-content/themes/twentytwenty/style.css?ver=1.7" media="all"></link>

O bien, si observas la función relacionada wp_enqueue_style() en el archivo "functions.php" del padre, verás que el manejador se encuentra especificado como el primer parámetros entre paréntesis.

1

wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );

Cómo hacer personalizaciones a través de un tema hijo de WordPress

El objetivo de crear un tema hijo en WordPress es poder personalizar el diseño del padre sin tocar este último directamente. Así que ahora aprendamos sobre las principales formas en las que puedes realizar estas personalizaciones.

Nuestro objetivo será sobrescribir CSS y plantillas, dado que son los dos vehículos principales para la personalización del diseño.

Sobrescritura del CSS padre

Ya has cargado la hoja de estilo del padre durante los pasos esenciales y, para que tengas una manera de incorporar tu propio CSS, ahora también necesitas cargar la hoja de estilo de tu tema hijo.

Puedes hacer esto usando la función wp_enqueue_style() nuevamente con esta línea de código:

1

wp_enqueue_style( ’child-style’, get_stylesheet_uri(), array( $parenthandle ));

Agrégala al código existente de tu archivo "functions.php" al final de la función enqueue_parent_styles(), de esta manera:

1

<?php

2

function enqueue_parent_styles() {

3

$parenthandle = ’parent-style’;

4

wp_enqueue_style( $parenthandle, get_template_directory_uri().’/style.css’ );

5

// This line loads your child theme stylesheet

6

wp_enqueue_style( ’child-style’, get_stylesheet_uri(), array( $parenthandle ));

7

}

8

add_action( ’wp_enqueue_scripts’, ’enqueue_parent_styles’);

9

?>

Ahora puedes agregar cualquier CSS personalizado que desees al archivo "style.css" de tu tema hijo, sobrescribiendo cualquiera de los estilos padre que quieras cambiar.

Echa un vistazo a nuestro artículo "Cómo personalizar un tema de WordPress con CSS" para aprender cómo identificar en qué estilos CSS debes enfocarte para hacer los cambios que quieras.

Sobrescritura de las plantillas padre

La sobrescritura de plantillas del tema padre es un proceso muy sencillo. Solamente son 2 pasos:

1. Copia y pega una plantilla del tema padre en tu tema hijo, asegurándote de reflejar la estructura del directorio del tema padre si estás copiando desde un subdirectorio.
2. Abre el archivo duplicado y edítalo como desees.

Cualquier cambio que realices en la plantilla duplicada ahora aparecerá en tu sitio automáticamente.

Adición de archivos de plantilla personalizados

WordPress usa su sistema de jerarquía de plantillas para decidir qué plantilla usar cuando un visitante se encuentre en diferentes partes de tu sitio, y siempre busca primero el archivo de plantilla necesario en el tema hijo.

Esto significa que, si quieres agregar un archivo de plantilla que aún no está en el tema padre, simplemente puedes añadirlo directamente a tu tema hijo. Este será cargado automáticamente, sin necesidad de pasos adicionales, siempre y cuando sigas las reglas establecidas por la jerarquía de plantillas.

Por ejemplo, digamos que quieres usar una plantilla personalizada para una categoría de tu sitio llamada "Portfolio" con el fin de asignarle un diseño único.

Puedes agregar una plantilla llamada "category-portfolio.php" a tu tema hijo, luego agregarle tu diseño personalizado, y esta se cargará automáticamente cada vez que alguien visite la categoría "Portfolio".

Información adicional: agrega una captura de pantalla del tema

Una vez que tu tema hijo tenga el aspecto que deseas, puedes tomar una captura de pantalla, cambiar su tamaño a 1200px de ancho por 900px de alto, y guardarla como "screenshot.png" en el directorio raíz de tu tema hijo. La captura de pantalla aparecerá en el listado de tu tema, dentro del área de administración.

Conclusión

Así que eso es todo, esa es toda la información crítica detrás de cómo crear un tema hijo en WordPress.

No tiene por qué ser complicado. Simplemente sigue los pasos esenciales primero, agrega los extras opcionales que desees y luego personalízalos.