Si desarrollar temas en WordPress les resulta familiar, saben que al empezar desde cero puede haber mucho desorden. Crear un tema desde el inicio no es sencillo, y configurarlo puede tomar mucho tiempo antes de que puedas escribir la primera línea de código. Por esto, varios desarrolladores han construído starter themes, que son temas con código para mostrar posts, páginas o contenido de WordPress en general pero sin diseño y con una estructura básica. Estos temas nos permiten dejar a un lado la conexión con la base de datos para traer el contenido para poder enfocarnos desde el principio en su presentación.

Es necesario tener en cuenta algunos puntos a la hora de escoger un starter theme: documentación, soporte, características técnicas y mantenimiento. Como desarrolladores necesitaremos documentación y soporte al empezar a usar un tema, o al corregir errores cuando estemos desarrollando sobre él. Debemos conocer qué herramientas vienen incluídas en el tema, si éste es compatible con los navegadores y con las herramientas que ya usamos, y si se adecúa a nuestros objetivos de proyecto. Además, nos gustaría que nuestro tema base fuera actualizado constantemente para asegurarnos de estar actualizados con los estándares actuales y que nuestro tema siempre será compatible con nuevas versiones de WordPress.

En Swapps usamos Sage como nuestro starter theme, fue desarrollado por Roots y está basado en HTML5 boilerplate. Sage incorpora varias características que nos ayudan a crear nuevos temas de una manera fácil y limpia. Incluye Bower, Gulp, Browsersync y Bootstrap, definiendo un flujo de trabajo que podemos usar para desarrollar nuestro tema. En caso que no sepas para que sirven estas herramientas, las mencionaré brevemente:

  • Gulp se encarga de tareas comunes de frontend por nosotros. Esas tareas incluyen, entre otros, minificación y concatenación de archivos CSS y Javascript, compilación de preprocesadores CSS, optimización de imagenes y revisión automática de código.
  • Bower es un manejador de paquetes usados en frontend
  • Bootstrap es un framework CSS ampliamente usado, fue creado por ingenieros de Twitter y nos permite crear sitios agradables visualmente y adaptables a sitios móviles usando clases predefinidas en poco tiempo.
  • Browsersync sincroniza cambios de archivos en múltiples navegadores y dispositivos, así no tenemos que recargar la página cada vez que guardemos un cambio.

Nota: La nueva versión de Sage (Sage 9) usa Webpack en vez de Gulp y se basa en npm en vez de Bower para manejar dependencias.

Sage posee una sólida documentación y un foro donde la comunidad e incluso los mismos desarrolladores de Sage pueden resolver cualquier problema que tengamos. También incluyen un archivo README dentro del projecto que podemos usar para empezar. El equipo de Sage está siempre pendiente de las nuevas tendencias y tecnologías en el desarrollo web (un ejemplo de esto es el uso de Webpack en su nueva versión), así que podemos estar seguros que un tema basado en Sage va a estar actualizado con la mejor tecnología en el momento.

Instalación

¿Cómo instalamos Sage? Primero asegúrate que tenemos estos requerimientos instalados:

  • PHP 5
  • Composer
  • Node.js
  • Git

Necesitamos instalar Gulp y Bower para poder usarlos, pero esto se hace fácilmente con Node.js usando npm. Sólo debemos escribir npm install -g gulp bower en nuestra consola.

Vamos a nuestra carpeta de temas de WordPress; en este punto tenemos dos maneras de instalar Sage. La primera es clonar el repositorio:
git clone https://github.com/roots/sage.git theme-name
Otra forma de instalarlo es a través de Composer, usando este comando:
composer create-project roots/sage theme-name 8.5.0
En cualquier caso no olvidemos cambiar theme-name por el nombre que queremos para nuestro nuevo tema. También podemos descargar el repositorio de Git como un .zip y extraerlo manualmente en nuestra carpeta de temas, per nos gustan más las cosas automáticas, ¿verdad?

Estructura de archivos

Podemos ver los archivos comunes de WordPress (index.php, functions.php, single.php, page.php, etc) en la raíz de la carpeta de nuestro tema. También tenemos la carpeta lib, allí se encuentra la configuración específica de Sage. La carpeta assets es donde podemos poner nuestras imágenes, estilos, scripts y fuentes. La carpeta templates contiene archivos para todas las plantillas que vemos comunmente en un tema de WordPress, aunque la gran diferencia es que están basados en HTML5 y usan roles ARIA para mejorar la accesibilidad. La carpeta dist contiene los recursos procesados que vamos a usar en nuestro sitio en vivo, los cuales son el resultado del flujo de trabajo automatizado y no deben ser editados manualmente. Sage tiene soporte para múltiples idiomas, por eso tenemos la carpeta lang con el archivo sage.pot, en caso que necesitemos hacer traducciones.

Personalización

Podemos configurar nuestra instalación de Sage modificando los archivos incluídos dentro del directorio lib. Cada archivo sirve una función específica:

  • assets.php, incluye nuestros estilos y scripts.
  • extras.php contiene funciones para añadir clases al y un enlace para seguir leyendo al final del resumen de nuestras entradas de blog.
  • setup.php es dónde se encuentra la configuración principal; podemos habilitar o deshabilitar el soporte del tema para ciertas características de WordPress, registrar sidebars y menús de navegación, y escoger en qué páginas queremos (o no) mostrar el sidebar.
  • titles.php controla el formato de salida de los títulos de página.
  • wrapper.php contiene la funcionalidad para el Theme Wrapper.

A continuación mostraré algunos fragmentos de código de características esenciales de

// lib/setup.php
add_theme_support('title-tag'); // Habilitar la modificación del título del sitio web.

add_theme_support('post-thumbnails'); // Habilitar las imágenes principales de WordPress.

// Añadir navegaciones, por defecto se registra una navegación principal.
register_nav_menus([
'primary_navigation' => __('Primary Navigation', 'sage')
]);

// Tipos de post habilitados por defecto. Modifica esto según lo necesites.
add_theme_support('post-formats', ['aside', 'gallery', 'link', 'image', 'quote', 'video', 'audio']);

// Habilitar soporte para estructura HTML5 en las secciones listadas.
add_theme_support('html5', ['caption', 'comment-form', 'comment-list', 'gallery', 'search-form']);

// Especificar la ruta de la hoja de estilos usada para customizar el editor TinyMCE usado por WordPress.
add_editor_style(Assets\asset_path('styles/editor-style.css'));

// Aquí podemos añadir sidebars en nuestro tema. Por defecto Sage añade un sidebar principal y uno en el footer.
function widgets_init() {
register_sidebar([
'name' => __('Primary', 'sage'),
'id' => 'sidebar-primary',
'before_widget' => '
<section class="widget %1$s %2$s">',
'after_widget' => '</section>

',
'before_title' => '
<h3>',
'after_title' => '</h3>

'
]);

register_sidebar([
'name' => __('Footer', 'sage'),
'id' => 'sidebar-footer',
'before_widget' => '
<section class="widget %1$s %2$s">',
'after_widget' => '</section>

',
'before_title' => '
<h3>',
'after_title' => '</h3>

'
]);
}
add_action('widgets_init', __NAMESPACE__ . '\\widgets_init');

 

Ya hemos visto suficiente de la carpeta lib, vamos ahora al directorio assets. Aquí se encuentran dos archivos a los que debemos ponerles atención. El primero es styles/main.scss; este archivo genera el archivo CSS principal que se guarda en dist/styles. Aquí es donde debemos importar todos nuestros estilos personalizados, y aquí también serán inyectadas automáticamente todas las dependencias Sass provenientes de los paquetes instalados por Bower. El otro archivo que merece nuestra atención es scripts/main.js; este archivo se comporta igual que el anterior. Aquí se cargarán scripts de nuestros paquetes de Bower, y en base a este archivo se generará el archivo JS principal almacenado en dist/scripts. Una peculiaridad sobre este archivo es que está estructurado de forma que podemos escribir código general que será cargado en todas las páginas, y código para páginas específicas que solo cargará en la página principal, por ejemplo. Por tanto, debemos tener en cuenta estos dos archivos cuando trabajamos en el frontend de nuestro sitio.

Sage Theme Wrapper

El Theme Wrapper (una traducción posible es contenedor de tema) es una característica clave de Sage, y es una de las razones de por qué es diferente de otros starter themes debido a que sigue el principio DRY (Don’t Repeat Yourself, No te repitas).
Tal vez hayas notado un archivo en la raíz del directorio de tu tema llamado base.php. Bueno, este archivo es el esqueleto de todas las páginas en nuestro sitio. Contiene la estructura principal de un document HTML, y se encarga de cargar secciones usadas frecuentemente como el header, el footer y el sidebar. La magia de esto es que Sage convierte este archivo en el punto de partida para la jerarquía de plantillas de WordPress, así el código y la estructura que pongamos aquí cargará en todas las páginas. Así, no tenemos que preocuparnos por repetir los mismos fragmentos de código en cualquier archivo que creemos o editemos, y podemos enfocarnos directamente en la estructura y la lógica para mostrar el contenido de un archivo particular. Además, cualquier modificación general a la estructura principal de las páginas no será dolorosa y solo debemos cambiar un único archivo para lograrlo. El código solo se escribe una vez, donde pertenece, y ahorraremos mucho tiempo y energía manteniéndolo.

Conclusión

Los starter themes son una grandiosa forma de empezar a desarrollar un tema nuevo; con ellos podemos acelerar el proceso y nos traen un flujo de trabajo para codificar eficientemente. Sage, en nuestra opinion, se destaca del resto porque sigue el principio DRY, viene con herramientas preconfiguradas que nos ayudarán a automatizar procesos y dependencias, es fácil de instalar y entender, y tiene un gran soporte. Con él, podemos construir un tema WordPress sólido en muy poco tiempo.