Crear un tema hijo en WordPress

Categories:

Un tema hijo es un tema que utiliza el estilo y la funcionalidad de otro tema.

Al crear un tema hijo se puede modificar la funcionalidad o agregar funcionalidad al tema original. Además, es una manera segura de realizar cambios a un tema – en comparación de modificar los archivos directamente – porque las actualizaciones que se hacen en el tema original no modifican o sobrescriben los cambios realizados en el tema hijo.

Si quieres desarrollar un tema, un tema hijo te puede ayudar a implementarlo más rápido.

Creación

Para crear un tema hijo se necesita crear una carpeta dentro de wp-content/themes/ en tu instalación de wordpress.

Es conveniente que el nombre de la carpeta que sea el nombre del tema.
Dentro de la carpeta se necesitan los siguientes archivos:

  1. style.css
  2. functions.php
  3. Plantillas

style.css

Este archivo es importante. Aquí vienen datos que utiliza wordpress, además de que aquí van a ir los estilos que va a tener el tema. Este archivo tiene que comenzar el siguiente bloque de comentarios.

/*
Theme Name: 
Theme URI: 
Description: 
Author: 
Author URI: 
Template: 
Version: 
*/

Theme Name / Nombre del tema *
Es el nombre que le quieres poner a tu tema.
Se va a mostrar en la sección de temas de wordpress.

Theme URI / URI del tema
URL – dirección web – con información acerca del tema.

Description / Descripción
Descripción el tema.
Se muestra en la sección de temas de wordpress.

Author / Autor
Nombre de cómo quieres que te identifiquen en la página de temas de wordpress.

Author URI / URI del autor
URL – dirección web – con información acerca del desarrollador.

Template / Plantilla *
Nombre de la plantilla padre.
Escribir como está en el directorio /wp-content/themes
Si no se establece el valor de template wordpress asume que se quiere hacer un tema nuevo y que está dañado.

Version / Versión
Versión del tema.
Algunas maneras para establecer la versión son:
Utilizar una notación que incluya la fecha / hora.

/*  
// Notación con guiones
aaaa-mm-dd-hh-mm-ss
2014-02-14-08-00-00

// Notación sin guiones
aaaammddhhmmss
20140214080000
*/

Otra opción es utilizar versiones semánticas.

/* 
Están formadas por tres números. Ej:

0.1.0

versionMayor.versionMenor.Parche

Cuando se tiene una versión semántica - versionMayor.versionMenor.Parche  - y se quiere 
actualizar hay que incrementar la: 
1. Versión Mayor - Cuando haya cambios incompatibles con las versiones anteriores. 
2. Versión Menor - Cuando se agrega funcionalidad y existe compatibilidad 
con versiones anteriores.
3.  Parche - Cuando se solucionan errores y existe compatibilidad  con versiones anteriores.

¿Cómo se debe tratar con revisiones en la fase inicial de desarrollo?

Lo más sencillo es empezar el desarrollo con la versión 0.1.0 
Después incrementar la versión menor en cada iteración.
*/

* Valores requeridos.

Si probamos el tema, aunque se instale correctamente y no haya errores, no se visualiza el estilo definido en el tema original.
Podemos incluir los estilos definidos en el tema original utilizando la regla @import de CSS.

/*
Aquí van los comentarios donde se define el tema hijo.
Si se quieren importar las reglas de estilo del tema original 
hay que sustituir el término tema-originalpor el nombre del tema
*/
@import url("../tema-original/style.css");
/*
Desde aquí actualizar las reglas css que se encuentren definidas
en el tema original  y / o definir nuevas reglas en caso de ser necesario.
*/

Después de la utilizar import podemos actualizar las reglas css que se encuentren definidas en el tema original y / o definir nuevas reglas en caso de ser necesario.

functions.php

Las funciones definidas en este archivo se agregan a las definidas en el archivo functions.php del tema original.
Las funciones que se encuentren definidas en el tema hijo se van a ejecutar antes que las funciones que están definidas en el tema original.
Si se quiere cambiar la manera en que funciona un tema – una función o funciones -, dentro del tema hijo volver a definir la función – o funciones – que se quiere(n) modificar.

<?php 
    /* Ejemplo archivo functions.php en un tema hijo */
        
    function mostrar_mensaje_en_js() {
      echo "<script>alert('mensaje desde el archivo functions.php')</script>";
    }
    add_action( 'wp_head', 'mostrar_mensaje_en_js' );

    ?>

Plantillas

Las plantillas se encargan de presentar el contenido que está almacenado en la base de datos – casi todos los archivos con extensión php a excepción de functions.php -.

Si existen plantillas en el tema original que se quieren modificar, basta con copiar e incluir esos archivos en el tema hijo y adaptarlos según se requiera.

Si no existe el archivo en el tema padre y se quiere crear un archivo para secciones del contenido en específico (por ejemplo para una categoría, página, taxonomía) se crea el archivo correspondiente para que wordpress utilice esa plantilla.

Una referencia para saber cómo wordpress elige la plantilla utilizar está en el codex – Jerarquía de plantillas.

Si quieres comenzar a crear un tema hijo descarga la carpeta de referencia.

Únicamente tiene el archivo style.css y functions.php