Crear un tema hijo en WordPress

Motivos para crear un tema hijo

Uno de los principales motivos para que te veas en la necesidad de crear un tema hijo en wordpress es que vayas a tocar los archivos php de tu plantilla wordpress. Si has decidido echarte al monte y enredar con los archivos php o css de wordpress, no te va a quedar más remedio.

En caso de que no lo hagas, el día que le des a actualizar tu tema wordpress te llevarás una bonita sorpresa: todo se ha ido a la mierda. Al actualizarse el tema de tu página web en wordpress todos los archivos que hayas tocado se sobrescriben. De esta manera, modificaciones en hojas de estilo, archivos php y demás familia rogarán una oración por tu alma. Y, dando cumplimiento a la ley de Murphy tu última copia de seguridad será de antes de la última glaciación.

Todas esas horas de investigación y trabajo desaparecerán como lágrimas en la lluvia. Cada línea de código y cada gota de sudor no habrá servido de nada. Por todo ello vamos a ver como crear un tema hijo en WordPress. Así que como dijo mi colega Jack, vamos por partes.

Creando la carpeta de nuestro child theme

Vamos a ver como proceder en función del tema que utilicemos, haciendo un par de ejemplos con dos temas famosos.

GeneratePress

Lo primero que vamos a hacer es crear una carpeta en wp-content/themes con el nombre que deseamos darle a nuestro tema. En este caso, uso generatepress. Así que me parece lógico nombrarlo como generatepress-hijo. Conectamos por ftp a nuestro sitio y creamos la carpeta

Dentro de la misma, tan solo hemos de crear una hoja de estilos que se llame style.css. Dentro de ella pondremos el siguiente contenido. Adaptándolo a tu sitio en cuestión, claro está.

/*
Theme Name: GeneratePress Hijo
Theme URI: https://pedropablomoral.com
Version: 1.0
Description: Tema hijo de GeneratePress
Author: pedropablomoral
Author URI: https://pedropablomoral.com
Template: generatepress
*/

@import url("../generatepress/style.css");

/*----------------- Cambios -------------------------------*/

En este caso, el valor de template es el nombre de la carpeta de nuestro tema padre. No pongáis el nombre del tema por que os dará el error:

No encontramos el tema principal. Por favor, instala el tema principal

Y con esto y un bizcocho, tenemos a posibilidad de activar nuestro tema hijo. Para ello vamos a Apariencia->Temas en el menú de wordpress. Una vez allí, pulsamos en activar y ya tenemos todo listo. Nuestro sitio no habrá cambiado, porque aun no hemos modificado nada.

 

OceanWP

OceanWP es un tema muy flexible y personalizable. No obstante, si quieres personalizarlo aún más y que tu trabajo no se pierda con alguna actualización del tema, también es muy importante crear un tema hijo para OceanWP. Los pasos a seguir son muy similares a los del caso de GeneratePress:

1. Crear la carpeta del tema hijo, en este caso yo la he llamado OceanWP-hijo
2. Crear el archivo functions.php y dotarle del siguiente contenido, que puedes consultar en Github

   <?php
   /**
    * Child theme functions
    *
    * When using a child theme (see http://codex.wordpress.org/Theme_Development
    * and http://codex.wordpress.org/Child_Themes), you can override certain
    * functions (those wrapped in a function_exists() call) by defining them first
    * in your child theme's functions.php file. The child theme's functions.php
    * file is included before the parent theme's file, so the child theme
    * functions would be used.
    *
    * Text Domain: oceanwp
    * @link http://codex.wordpress.org/Plugin_API
    *
    */
   
   /**
    * Load the parent style.css file
    *
    * @link http://codex.wordpress.org/Child_Themes
    */
   function oceanwp_child_enqueue_parent_style() {
   	// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
   	$theme   = wp_get_theme( 'OceanWP' );
   	$version = $theme->get( 'Version' );
   	// Load the stylesheet
   	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );
   	
   }
   add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );
   
   
   

3. Crea el archivo style.css, con el siguiente contenido

   /*
   Theme Name: OceanWP Child
   Theme URI: https://oceanwp.org/
   Description: OceanWP WordPress theme example child theme.
   Author: Nick
   Author URI: https://oceanwp.org/
   Template: oceanwp
   Version: 1.0
   */
   
   /* Parent stylesheet should be loaded from functions.php not using @import */

Y ya solo te queda entrar al panel de administración y en Apariencia=>Temas activar el nuevo tema que te aparecerá.

Ya podemos hacer todos los cambios que queramos sin afectar a nuestra plantilla wordpress. Ademas de modificar los estilos, podremos añadir nuevas características a través del fichero functions.php. También podremos modificar ficheros del tema padre. Tan solo tenemos que copiarlos en la carpeta de nuestro child theme. Para ello, debemos mantener la estructura de las carpetas de nuestro tema padre.

Pero eso es otra historia y debe ser contada en otra ocasión. Si quieres saber mas de wordpress aquí te dejo unos libritos:

[amazon_link asins=’8494645749,1720442193,B00A8SRXHW,8441538255,1984220314′ template=’ProductGrid’ store=’ppmv-21′ marketplace=’ES’ link_id=’2ae20f4d-96e7-11e8-b153-eb668cbe884d’]