Creando un child theme para Wordpress

Escrito por:
Fecha: 2015-01-01 10:00:35 00:00

Como crear temas hijos "Child themes" con wordpress.

Introducción

Wordpress es el software CMS más utilizado para desarrollar sitios web en el momento en que esto se escribe.

Con Wordpress se puede crear sitios muy complejos así como simples blogs, se puede personalizar cada pequeño aspecto con el uso de plugins o temas con funciones incorporadas.

Mucho de la personalización puede hacerse con temas o realizando cambios en ellos, pero si realizas cambios en los temas oficiales (bajados del sitio) y estos reciben una actualización tus cambios se perderán. Para evitar esto debes crear un Child Theme o tema hijo, que va a heredar todas las funciones y aspecto del padre, y puedes cambiar cualquiera de ellos.

Creando un Child Theme

Lo primero que requieres es encontrar un tema que te guste y desees modificar.

Considerando que el tema que crees va a heredar todo del padre, debes escoger inteligentemente, busca un tema con sólido soporte para SEO, buena semántica y mejor si es liviano y posee un buen código, de este modo los cimientos para tu nueva creación serán sólidos.

Una vez que hayas aprendido lo suficiente, podrás comenzar a crear tus temas usando frameworks populares tales como:

O puedes escoger uno con código abierto:

Para este tutorial, vamos a utilizar el nuevo tema oficial de Wordpress TwentyFifteen

Instala el tema padre

Si aún no hiciste eso, necesitas bajar e instalar el tema en el que vas a basar tu creación.

Primero ve a la sección de administración, y de Apariencia -> Temas y si aún no esta instalado, ve a "Añadir Nuevo" y busca por Twenty Fifteen e instálalo.

Crea el folder para el Child Theme con sus contenidos mínimos.

Lo primero que debes hacer es crear el folder the alojará tu nuevo tema.

Lo puedes hacer de diferentes formas, FTP y ssh son las más comunes, el cómo hacerlo no es parte del contenido de este tutorial, pero debe estar localizado en wp-content/themes/. Una vez allí crea un folder twentyfifteen-child, como que algo obvio ¿verdad?, pero vamos, continuemos.

Dentro de ese folder vamos a poner estos dos archivos:

  • style.css
  • functions.php

Cuando los tengamos en su lugar, vamos a agregar esto a style.css

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://the-url-where-theme/can-be-downloaded
 Description:  Twenty Fifteen Child Theme
 Author:       Your name
 Author URI:   http://your-website
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         responsive, blog
 Text Domain:  twenty-fifteen-child
*/

Puedes cambiar cualquiera de esas lineas de acuerdo a tus necesidades, pero la línea Template debe apuntar al folder del tema padre.

También vamos a crear el archivo functions.php el cual dejaremos vacío por el momento.

Ahora vamos Apariencia -> Temas en la página de administración y activamos nuestro nuevo tema.

Si revisas la apariencia de tu sitio, te llevaras una fea sorpresa, podrás ver que no tienes en realidad ningún tema. Así que comencemos a trabajar.

Personalizando el child theme

Lo primero que tenemos que saber es como los archivos son manejados, cualquier archivo en el folder de tu tema hijo, reemplazará al archivo con el mismo nombre en el folder del padre, con una excepción, y este es functions.php del cual su contenido será procesado primero que el archivo del mismo nombre en el folder del tema padre.

Importando el estilo del padre

Una de las primeras cosas que debemos hacer agregar algo de estilo a nuestro tema, y para no crear todo de cero (si quieres puedes hacerlo) vamos a importar el estilo del padre, para ello vamos a agregar unas lineas al 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' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
    }
?>

Con esto, el tema hijo, se verá exactamente igual al padre, y ahora podemos comenzar a hacer cambios para personalizarlo.

Cambia el tipo de letra del tema

En este ejemplo, vamos a cambiar el tipo de letra únicamente, para efectos de demostración de como funciona la personalización.

Para ello vamos a editar el archivo /wp-content/themes/twentyfifteen-child/style.css y agregar las lineas:

@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
    font-family: 'Raleway', sans-serif;
}

El archivo ahora se ve así:

/*
    Theme Name:   Twenty Fifteen Child
    Theme URI:    http://the-url-where-theme/can-be-downloaded
    Description:  Twenty Fifteen Child Theme
    Author:       Guillermo Garron
    Author URI:   http://www.garron.me
    Template:     twentyfifteen
    Version:      1.0.0
    License:      GNU General Public License v2 or later
    License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    Tags:         responsive, blog
    Text Domain:  twenty-fifteen-child
*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
    font-family: 'Raleway', sans-serif;
}

Con esas líneas lo que logramos es importar el tipo de letra Raleway de Google, y le decimos al navegador que utilice dicho tipo en lugar de Noto que es el tipo por defecto de TwentyFifteen.

Resumen

Hemos aprendido a personalizar un tema de Wordpress de un modo en que no se pierdan nuestros cambios cuando actualicemos el tema. Para lograrlo hemos tomado los siguientes pasos:

  • Crear un Child Theme
    • En un nuevo folder creamos dos archivos: style.css y functions.php
    • En style.css se declaró el tema padre
    • En functions.php se importo el estilo del padre
  • Se agregaron nuestros cambios y personalizaciones al estilo del tema hijo.

Claro que solo cambiar el tipo de letra puede ser algo trivial, y puedes hacer cambios más elaborados, pero sirve para un ejemplo.