Cómo crear un Child Theme para WordPress

Probablemente alguna vez has conseguido (de la manera que sea) una plantilla para WordPress que incluía un tema secundario y no sabías qué era. Generalmente suele tener un nombre similar con la terminación “-child” añadida, ¿te suena? Es frecuente no prestarle mucha atención. No te preocupes, a partir de hoy sabrás qué es, para qué se utiliza y por qué es recomendable el uso de Child Themes para Wordpress.

Empecemos, ¿qué es un Child Theme?

En pocas palabras, es una extensión de la plantilla padre (Parent Theme) que utilizaremos para hacer modificaciones sin que esto afecte en un futuro a posibles actualizaciones de la plantilla original. Te pongo un ejemplo:

Supón que instalas una plantilla en tu WordPress y quieres adaptarla a una imagen algo distinta, además de hacer algunos cambios en el código. Lo normal es indagar entre tantos archivos y hacer los cambios pertinentes para conseguir los resultados que queremos: cambios en el estilo, modificación de alguna función, etc. Pero, ¿qué pasa si el día de mañana esta plantilla recibe una actualización? Lo que pasará, si actualizas, es que perderás todos los cambios que en su día hiciste, ya que los archivos del template se machacarán y tu trabajo habrá sido en vano.

Supongo que ya te harás una idea de para qué sirven los Temas Hijo. No es más que una plantilla donde realizarás los cambios que desees sobre el tema padre. Este child theme hereda tanto el diseño como la funcionalidad de su parent theme, por lo que podremos reemplazar el código simplemente escribiendo uno nuevo en esta plantilla, o añadiendo modificaciones al ya existente. Crear un tema hijo es muy sencillo.

¿Cómo creo un Child Theme?

Técnicamente sólo necesitas llevar a cabo dos pasos para crear un tema hijo:

  1. Crear una carpeta en el directorio wp-content/themes dándole el nombre que quieras a tu tema hijo (por ejemplo: macarron-child, si el tema padre se llamara “Macarron”)
  2. Incluir un fichero style.css en el directorio creado. Es el único archivo requerido y debe incluir el siguiente código:
/*
Theme Name: Macarrón Child
Theme URI: https://ejemplo.com/macarron-child/
Description: Child Theme para la plantilla Macarrón
Author: Carlos Alfaro
Author URI: https://www.calfaro.es
Template: macarron
Version: 1.0.0
Tags: etiqueta1, etiqueta2, etiqueta3...
*/
@import url("../macarron/style.css"); // Importamos la hoja de estilo del tema padre

¿Y qué significa todo este código? Bueno, realmente sólo tiene importancia el nombre que le asignes a Template, ya que deberá ser el nombre de la carpeta que contenga tu parent theme, el resto rellénalo ajustándote a tu caso.

La última línea se utiliza para importar la hoja de estilo del parent theme, sin embargo existe una manera más correcta de hacerlo a través de wp_enqueue_style, aunque necesitarás otro archivo llamado functions.php con el siguiente código. ¡Es vital que te vayas familiarizando con el archivo functions.php!

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

Ahora tienes un child theme con dos archivos fundamentales: functions.php y style.css. Ya podemos modificar el tema sin miedo a perderlo en un futuro, pero antes debemos activarlo. Como si de otra plantilla se tratara, entrando en el menú Apariencia – Temas, encontraremos nuestro nuevo Child Theme listo para activar.

Cambiando el estilo de una clase mediante el Child Theme

Para que resulte más fácil entenderlo, vamos con un ejemplo práctico de cómo cambiar el aspecto de nuestra plantilla con unas simples líneas de css. Es muy simple, pero servirá para que se entienda, en la imagen podéis ver el cambio que vamos a llevar a cabo.Modificaremos el color del encabezado H3 y le añadiremos un subrayado; por otra parte, cambiaremos el background del mensaje destacado y el grosor del borde izquierdo. Bastará con añadir el siguiente código a nuestro style.css del tema hijo.

h3{
text-decoration: underline;
color: #44AAFF;
}
div.alert-box {
background-color:#E9FDEE;
border-left: 1px solid green;
}

Así de fácil cambiamos el estilo, pero podemos ir mucho más lejos con el uso de filtros y otros métodos muy útiles. Ahora que sabes lo que es y por qué debemos usar Child Themes te animo a que pruebes a hacer alguna modificación por tu cuenta.

Si has encontrado útil esta entrada, o tienes cualquier tipo de duda, no dudes en dejar un comentario. ¡No te pierdas las próximas entradas sobre WordPress!

Comentarios

  • Edu dice:

    Carlos tengo un par de dudas referentes a los child themes.

    ¿Cómo puedo establecer una imagen para el child theme que se visualice en la sección para elegir theme?

    ¿Aparte del functions.php puedo crear comments.php, footer.php y demás? O no es bueno tener tantos?…

    Gracias Carlos 🙂

    • Hey Edu,

      Sólo tienes que crear una imagen que se llame screenshot.png dentro de la carpeta del child theme con un tamaño de 880x660px.

      Sobre los archivos, puedes y debes crear los que dices, nunca toques el core de WordPress. Es indistinto los que tengas en el child, ya que siempre les dará preferencia a ellos. Para algunos cambios igual es más recomendable el uso de hooks, pronto intentaré hacer una guía sobre los action y filters.

      Un saludo!

  • Analia dice:

    Gracias! Excelente explicado. Saludos.

  • Brenda Meneses dice:

    Hola Carlos

    Soy nueva en este mundo de wordpress, actualmente estoy en un nuevo empleo y ellos tienen su pagina actual en wordpress (latinosiae.com), pero estan haciendo un cambio de marca y quieren re diseñar el sitio web, eso implica crear una plantilla desde cero para wordpress,porque lo quieren totalmente personalizado ¿por donde empiezo? es decir luego de que el diseñador me pase el diseño ¿qué es lo primero que debo hacer?. Además mientras se implementa la nueva pagina, la empresa quiere implementar un formulario de contacto totalmente personalizado y que ademas envie toda la informacion en formato PDF luego de que se halla completado,¿ cómo podria hacer eso sin afectar lo que ya esta?…estoy asustada…

Deja un comentario

¿Quieres recibir las últimas novedades en tu e-mail?

¡GRACIAS!