Tema hijo en Wordpress (child theme) | Programación

noviembre 29, 2018

Uno de los primeros aspectos a abordar al adentrarse en la programación web es la creación de un tema hijo en WordPress. Una vez hemos empezado a realizar modificaciones en el css de nuestro tema y quizás hasta hemos creado alguna función, para no perder nuestro trabajo en la siguiente actualización del tema, necesitamos crear un tema hijo (child theme).

El motivo es que todos los archivos del tema se guardan en la carpeta wp-content/themes/nombre-del-tema y al actualizar el tema, todos sus ficheros se sobreescriben, así que perdemos todo el trabajo realizado.

Vamos a crear un tema hijo de Storefront, el tema oficial de Woocommerce.

Para crear un tema hijo en WordPress necesitamos 3 elementos básicos:

Una carpeta que contenga nuestros ficheros
Una hoja de estilo: style.css
El archivo de funciones: functions.php

Carpeta del tema

Es necesario crear una carpeta dentro de ./wp-content/themes con el nombre de nuestro tema. No es obligatorio, pero sí recomendable, utilizar el nombre del tema seguido de “-child”. En nuestro ejemplo, la carpeta que crearemos será ./wp-content/themes/storefront-child .

Style.css

Este archivo contendrá todas las clases que utilicemos para modificar el tema original. El único requisito es que contenga esta cabecera:

/*
 Theme Name:   Storefront Child
 Theme URI:    http://example.com/storefront-child/
 Description:  Storefront Child Theme
 Author:       FerBcn
 Author URI:   http://FerBcn.com
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  storefront-child
*/

Las dos líneas importantes son:

Theme name: Este será el nombre que veamos en lapágina de temas de WordPress
Template: Esta es la carpeta que contiene el tema “padre” de nuestro tema. Si este dato es incorrecto, no se cargarán los estilos y funciones del tema padre.

Functions.php

En este archivo escribiremos las funciones que queramos añadir y añadiremos o quitaremos hooks de funciones ya existentes (próximamente escribiré un post explicando como realizar modificaciones en el tema manipulando los hooks). Además, es necesario incluir una función para que la hoja de estilos de nuestro tema se cargue después de la del estilo padre.

Este es el código indicado en el codex de WordPress para “encolar” nuestro css:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

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

Activar el tema hijo en WordPress

Ahora, para activar el tema en nuestro site solamente tenemos que subir subir todos estos ficheros por ftp a la carpeta que hemos creado.

En caso de no disponer de una conexión ftp, siempre podemos crear un archivo zip de la carpeta del tema y cargarlo desde Apariencia->temas->Añadir nuevo tema.

Y, para acabar de personalizar el tema, yo siempre creo un screenshot para diferenciarlo del resto. La imagen que muestra WordPress para cada tema es la contenida en el fichero screenshot.png. Basta con descargar la imagen del tema padre, modificarla a nuestro gusto y añadirla a la carpeta del nuestro tema hijo en WordPress.