Guía para crear un Tema hijo en WordPress

Aprende las técnicas que usan los programadores para crear un Tema hijo y así modificar un tema de WordPress de forma segura.

Tienes que tener claro que un Tema hijo es un nuevo tema. Tiene una carpeta propia para sus ficheros y, en el escritorio de WordPress aparece como un tema diferente que puedes activar y desactivar.

Los programadores crean Temas hijo para cambiar el funcionamiento de un Tema -padre- sin modificar sus ficheros.

Trabajar con temas hijo tiene 2 ventajas:

  • Puedes actualizar el Tema padre sin perder los cambios hechos en el hijo porque son independientes.
  • Es fácil y rapido probar distintos diseños creando varios Temas hijo.

Cómo crear un Tema hijo

Para crear un Tema hijo -Child theme- necesitas tener acceso a los ficheros del sitio por FTP o bien, a través de un gestor de ficheros.

Un Tema hijo esta compuesto por una carpeta en wp-content/themes que contiene:

  • Un fichero de estilos: style.css.
  • El fichero functions.php.
  • Una copia de los ficheros del tema padre cuya funcionalidad sobrescribe el programador con código propio (opcional).

Vamos a crear un Tema hijo a partir del tema Twentyseventeen:

#1. Crea la carpeta para el Tema hijo

Crea una carpeta dentro de wp-content/themes con el nombre que quieras. Te recomiendo usar el mismo nombre del tema padre y añade el sufijo -child o -hijo.

Estructura de ficheros de un tema hijo

En el ejemplo, he creado la carpeta twentyseventeen-child.

#2. Crea el fichero style.css

Dentro de la nueva carpeta crea el fichero style.css con este contenido:

/*
Theme Name: Twenty Seventeen Tema Hijo
Template: twentyseventeen
Author: superadmin.es
Description: Mi primer tema hijo.
*/

// Aquí escribe tu personalización CSS

WordPress utiliza el contenido de los comentarios para configurar el tema. Estos campos son los necesarios:

  • Theme Name es el nombre del Tema hijo y te sirve para identificarlo.
  • Template es el nombre del Tema Padre que utiliza como plantilla.

Al final del archivo puedes añadir tu código CSS para personalizar el diseño.

En este vídeo puedes ver estos dos primeros pasos:

#3. Importa los estilos

En la misma carpeta crea el fichero functions.php con este contenido:

<?php
// ./wp-content/themes/twentyseventeen-child/functions.php

function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'child-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Esta programación importa todo el contenido CSS del Tema padre para que cargue su diseño.

A continuación puedes poner tu propia programación que modifique el funcionamiento de WordPress usando acciones con do_action() y filtros con add_filter().

#4. Sobrescribir ficheros del Tema padre

Para cambiar la funcionalidad de un fichero del Tema padre cópialo en la carpeta del Tema hijo y, luego haz las modificaciones.

Por ejemplo, para cambiar el diseño de la cabecera -que siempre está definido en el fichero header.php - de un tema copia el fichero header.php desde la carpeta del Tema padre en la carpeta del Tema hijo y, luego cámbialo.

#5. Activar el Tema hijo

El último paso es activar el tema desde el Panel de Administrador > Apariencia > Temas.

Te dejo un ejemplo dónde uso un Tema hijo para eliminar los créditos que aparecen en el pie de página:


¿Te ha gustado? Mándame ánimos con un comentario. ¡Gracias!

Mabel.


Creative Commons License

Esta obra está bajo una licencia de Creative
Commons Reconocimiento-NoComercial-CompartirIgual
4.0 Internacional
.