Creando un theme para WordPress from scratch • JnjSite.com

Ya estoy por aquí de nuevo compartiendo en este blog. Esta vez tienes un pequeño howto o codekata para crear un theme from scratch, desde 0 y sin ningún punto de partida, para WordPress. Vengo de nuevo escribiendo sobre WordPress, ya que últimamente estoy poniéndome al día con este CMS.

He estado construyendo un par de plugins, practicando mientras leía la documentación oficial. También me propuse crear un theme propio para jnjsite.com para conseguir aumentar la puntuación SEO, aunque lo estaba abandonando un poco. He estado trabajando en un Service Worker para que puedas visitar offline jnjsite.com, aumentar con este la puntuación SEO, y también para que puedas instalarte la web como si fuera una app de móvil. Si has estado viendo las últimas entradas en jnjsite.com habrás notado, que por esto, estoy escribiendo más alrededor de WordPress, frontend, JavaScript, SASS, etc..

No me enrollo más, este post va sobre cómo empezar la creación de un theme 100% propio para WordPress usando Gulp, SASS, JavaScript, etc.. Trataré de ir avanzando más adelante sobre extras que añadirle, pero ahora vayamos al grano.. ?

Un poco de teoría, pero poco

Como reza en la documentación, lo único necesario para empezar un theme es crear dos ficheros en un directorio:

/wp-content/themes/nombre-theme/index.php
/wp-content/themes/nombre-theme/style.css

Para este post dejo también a continuación contenidos para los ficheros siguientes:

/wp-content/themes/nombre-theme/functions.php
/wp-content/themes/nombre-theme/gulpfile.js
/wp-content/themes/nombre-theme/style.scss
/wp-content/themes/nombre-theme/main.js

¡Importante! En la documentación se recomienda revisar a fecha de hoy el tema base Twenty Twenty. Como referencia para construir. Ten en cuenta que si por ejemplo haces referencia al fichero de cabecera header.php con la función get_header.php, y no lo has creado, entonces se irá a buscar al tema por defecto. A fecha de hoy se iria a buscar el fichero:

/wp-content/themes/twentytwenty/header.php

Una propuesta de ficheros base

Unos ficheros base para empezar un theme para WordPress..

Revisando la documentación oficial de WordPress, un fichero de inicio index.php podría ser como el siguiente:

<?php
get_header();
 
if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
else :
    _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
 
get_sidebar();
get_footer();

A saber, con las funciones get_header(), get_sidebar() y get_footer(), hará un fallback hacia la plantilla base, si no encuentra los ficheros header.php, sidebar.php y footer.php, pintando los contenidos como indico anteriormente. El bucle básico este ya te pintará la lista de entradas, y también una entrada única. Cuando digo entradas me refiero a un post, que puede ser tanto una página como un post normal. También funcionará con custom post types (tipos de posts personalizados). En WordPress todo son posts, siendo las páginas por ejemplo, unos tipos de posts personalizados.

El fichero style.css definirá la plantilla como tal, con lo que es necesario aunque no le pongamos ningún estilo:

/*
Theme Name: Looking for the 100 points
Text Domain: looking-for-the-100-points
Version: 0.1
Requires at least: 5.5
Requires PHP: 7.2
Description: 
Author: jaimenj
Author URI: https://jnjsite.com/
Theme URI: https://jnjsite.com/looking-for-the-100-points-for-wordpress/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Unos ficheros extra para SASS y Gulp

Si no me equivoco mucho, creo que para las principales tecnologías frontend, sin entrar en los grandes frameworks como Angular, React, Vue, etc.. conviene usar tales como SASS o LESS, Gulp o Grunt, ES6, etc.. así que una propuesta para mejorar el flujo de trabajo podría ser el siguiente fichero gulpfile.js:

'use strict'

const gulp = require("gulp")
const { parallel } = require("gulp")
const sass = require("gulp-sass")
const cleanCss = require("gulp-clean-css")
const concat = require('gulp-concat')
const uglify = require('gulp-uglify-es').default
const sourcemaps = require('gulp-sourcemaps')
const rename = require('gulp-rename');

function css() {
    return gulp.src('./style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        //.pipe(cleanCss())
        .pipe(rename('style.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./'))
}

function js() {
    return gulp.src([
            './main.js'
        ])
        .pipe(sourcemaps.init())
        //.pipe(uglify())
        .pipe(concat('main.min.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./'))
}

function watchAll() {
    gulp.watch(['./style.scss', './main.js'], parallel('css', 'js'))
}

exports.css = css
exports.js = js
exports.watch = watchAll
exports.default = this.watch

Revisando el código anterior, podemos ver referencias a un fichero style.scss escrito en SASS, que se procesará al fichero style.css necesario para la plantilla. Para un inicio, podría de ser algo parecido a lo siguiente:

/*
Theme Name: Looking for the 100 points
Text Domain: looking-for-the-100-points
Version: 0.1
Requires at least: 5.5
Requires PHP: 7.2
Description: 
Author: jaimenj
Author URI: https://jnjsite.com/
Theme URI: https://jnjsite.com/looking-for-the-100-points-for-wordpress/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

body {
    background-color: #808080;
}

Ahora así podremos usar SASS al usar el fichero style.scss para maquetar. Sólo quedará lanzar Gulp desde línea de comandos y procesará los estilos y JavaScripts.

Preparando los ficheros JavaScript y Gulp

Revisando el gulpfile.js anterior que propongo, podremos tener un main.js con el que comenzar a programar en JavaScript:

'use strict'

window.addEventListener('load', function () {
    console.log('Loading main.js from theme..')

    // TODO
})

Este fichero procesado con Gulp, se generará en un main.min.js. Que habrá entonces que incluirlo en el header de la plantilla mediante el fichero functions.php.

Incluyendo CSS y JavaScripts en el header

Hasta aquí ya tenemos un main.min.js y un style.css pero sólo se verá style.css porque ya WordPress se encarga de incluir este fichero automáticamente. Para el fichero JavasScript, o para añadir otros, tenemos que usar funciones como las siguientes:

wp_enqueue_style('nombre_estilo', get_template_directory_uri().'/ruta/otroFicheroExtra.css', false, '0.1');
wp_enqueue_script('nombre_script', get_template_directory_uri().'/main.min.js', [], '0.1');
wp_enqueue_script('nombre_script2', get_template_directory_uri().'/otroFicheroExtra.min.js', [], '0.1');

Mira que sólo la segunda línea es necesaria para esta plantilla base. Pero esta es la forma de añadir ficheros CSS y JavaScript en el header.

Añadiendo en el footer los JavaScripts

Es buena práctica el poner los JS en el footer, cargará la web más rápido y tendrá más puntos SEO. Esto lo podemos hacer usando un parámetro que han añadido a la función wp_enqueue_script llamado $in_footer. Así que poniendo esto en el functions.php lo conseguiremos:

wp_enqueue_script('nombre_script', get_template_directory_uri().'/main.min.js', [], '0.1', true);

Terminando, activando el theme

Ya con esto, si has seguido el codekata completo, podremos ir al administrador de temas de WordPress y activarlo. Probando con el contenido de jnjsite.com se ve algo como lo siguiente: