Cómo crear un tema WordPress desde cero

WordPress domina el mundo de las webs con un 43% de las instalaciones en todo el mundo, tendencia al alza. Poder independizar el diseño de la web con los temas de WordPress y cambiarlos a modo de quita y pon ha sido una de las grandes claves de este éxito.

A esto hay que sumar que en el repositorio oficial de temas de WordPress puedes encontrar miles de temas gratuitos, de una manera similar a cómo puedes encontrar también miles (incluso decenas de miles) de plugins para ampliar las funcionalidades a tu web.

Por otra parte, también hay un mercado con muchos fabricantes con temas profesionales de pago como Divi, GeneratePress y “page builders” para temas como Elementor.

Sin embargo, aun así, puede tener sentido crear tu propio tema a medida, sobre todo, por dos motivos:

1. Cuando necesitas ciertas características muy específicas para tu caso, es muy posible que no las encuentras en los temas disponibles en el marcado, ya sean gratuitos o de pago.
2. Te permite crear un tema muy optimizado y con ello rápido por poder limitarte al código estrictamente necesario para implementar las características que realmente necesitas.

De hecho, por estas dos razones, sobre todo la segunda, en esta misma web nuestro tema WordPress está hecho a medida.

¿Qué herramientas necesito para crear temas WordPress?

Para crear tu propio tema, hay dos grandes cosas que necesitas: conocimientos de programación en PHP, HTML y CSS, y un entorno de desarrollo para programar.

En el post de arriba te lo detallo todo mucho más, incluidos mis comentarios sobre JavaScript, que es un cuarto lenguaje que para cosas sencillas no vas a necesitar, pero que para cosas más avanzadas puede que sí te haga falta en alguna ocasión.

Por otra parte, necesitas también un servidor web con una instalación de WordPress. Puede ser en una cuenta de hosting o una instalación local de WordPress en tu ordenador.

¿Qué diferencia hay entre un tema y un plugin de WordPress?

La filosofía de WordPress es la de ser una plataforma web muy ligera y moldeable a las necesidades del usuario.

Para conseguir esto, los diseñadores dividieron a WordPress en el núcleo, que es lo que te bajas de WordPress.org, los plugins de WordPress y los temas o plantillas de WordPress que hacen de extensiones del núcleo para añadir la funcionalidad y estética que demanda el usuario.

En este sentido, como ya sabes, en el escritorio de WordPress existe una sección específica para instalar temas y otra para los plugins.  A nivel de desarrollo, se crean de una manera muy similar.

De hecho, hay muchos productos que se mueven a caballo entre estas dos vías. Un ejemplo podría ser el plugin de Elementor, el famoso “Page Builder” para diseñar páginas de manera visual. No es propiamente un tema, pero realmente se mete mucho en el terreno típico de un tema.

Este solapamiento de los dos conceptos es inevitable en algunos casos y no pasa nada. Sin embargo, debes tener claro para qué usar cada cosa:

• Los temas implementan el interfaz de usuario, es decir, la presentación de los contenidos.
• Los plugins están orientados a las funcionalidades y comportamiento de tu sitio web. A veces, como en el caso de Elementor, pueden implementar funcionalidades que son de interfaz de usuario y que se añaden a un tema específico o a cualquier tema.

Cómo crear un tema WordPress desde cero

El desarrollo de temas WordPress es realmente todo un mundo. Y quiero dejarte muy claro que desarrollar un tema WordPress medianamente completo desde cero es un tarea compleja, más bien para profesionales del desarrollo.

Pero hay dos buenas noticias:

1. Los temas de WordPress funcionan “por capas”. Es decir, empezar a trastear y crear un tema muy simple es fácil si sabes programar en PHP.
2. Pero, además, hay una alternativa mucho más fácil a crear tu tema desde “cero patatero” que es crear un tema hijo basándote en un tema padre.

En realidad, te recomiendo encarecidamente este último enfoque: no te limita en nada y así el 80-90% del trabajo ya te lo dan hecho (además, la parte más complicada, de las funcionalidades nucleares) y te puedes limitar a modificar aquellas partes que cambian en tu caso.

De hecho, esta web está hecha así: como ya decía arriba es un tema propio, pero diseñado como tema hijo, basado en el tema GeneratePress como tema padre, al que consideramos la mejor opción en su momento como tema padre y la seguimos considerando así en la actualidad.

De todos modos, aquí te dejo algunas alternativas más:

Pero en cualquier caso, diseñes tu tema desde cero o como un tema hijo, necesitas conocer sí o sí los fundamentos de la programación de temas WordPress y eso es lo que vamos a ver aquí creando un tema muy muy simple desde cero.

A partir de aquí, tú ya decides lo lejos que quieras llegar explorando las cosas más avanzadas que necesitas dominar para crear un tema “serio” como la jerarquía de plantillas o los temas de bloques (para Gutenberg).

¿Qué características debe tener un tema WordPress?

Antes de empezar a programar, te quiero sensibilizar de tres puntos críticos para tu tema:

1. Tu tema tiene que ser rápido

La velocidad de una web siempre ha sido crítica para la experiencia de usuario y con ello su éxito. Pero esto se ha vuelto aún mucho más crítico con la introducción de las métricas Core Vitals de Google que suben o bajan las posiciones de las webs en Google en función de su velocidad.

Para que un tema WordPress sea rápido debe ser ligero: la mínima cantidad de código posible y con un diseño optimizado para el resultado que se busca.

Hay muchos temas sobrecargados con “virguerías” como carruseles de imágenes, etc., que aportan una escasa utilidad real, pero que pasan una alta factura en cuanto a la velocidad del tema. Cuidado con estas cosas.

Te recomiendo especialmente minimizar el uso de JavaScript y prescindir en la medida de lo posible de librerías JavaScript pesadas como Bootstrap y jQuery. Procura también que el diseño de tus estilos CSS sea lo más liviano posible.

2. Tiene que ser responsive (o “adaptable”)

En este momento, más de la mitad del tráfico web es “mobile”, es decir, proviene de teléfonos móviles o tablets, siendo las tablets sólo un pequeño porcentaje de este tipo de tráfico.

Por ese motivo, tienes que diseñar tu tema para que se vea bien en este tipo de dispositivos.

En este punto ganas también mucho si diseñas tu tema como tema hijo ya que así tu tema puede “heredar” este trabajo del tema padre y ya será tan sólo cuestión de matizar algún que otro aspecto que quieran modificar.

En cualquier caso, hay muchos recursos libres para aprender a crear diseños web responsive desde cero, sólo tienes que buscar en Google. Aquí tienes un ejemplo muy completo:

Además, existen muchas plantillas de código como ésta de un menú responsive que te ayudarán un montón en la implementación de aspectos concretos.

3. Tiene que ser “SEO-friendly”

Qué te voy a contar sobre la importancia de estar arriba en los resultados de Google...

Cumplir los dos puntos anteriores, que el tema sea rápido y que sea “responsive”, son dos aspectos fundamentales dentro de que un tema se pueda considerar “seo-friendly”.

Pero también importa mucho la estructura interna de las páginas. Es decir, Google debe poer rastrear las páginas de manera eficiente y “comprenderlas” lo mejor posible.

Esto significa que hay ciertas etiquetas HTML muy sensibles de cara al SEO como, principalmente, la etiqueta HTML de meta descripción, la etiqueta <title> y las etiquetas <h1> a <h6>. Échale un vistazo a esta guía básica de SEO de Google para más detalles.

Los ficheros básicos para crear un tema WordPress

Igual que los plugins, los temas son una colección de ficheros de código fuente que implementan el tema y tienen asignada una ruta determinada dentro de WordPress.

En el caso de los temas, la ruta es:

El tema del ejemplo lo voy a llamar “Zero Theme” como pequeño guiño a que va a ser de lo más simple. La ruta en WordPress en la que se ubicaría el tema sería entonces:

Los ficheros mínimos para crear un tema WordPress serían un fichero index.php (código PHP) y style.css (hoja de estilos). Estos ficheros deben estar dentro de la carpeta “zero” y ya conformarían un tema que, comprimiendo la carpeta “zero” como .zip, conformarían un tema instalable.

De todos modos, desde un punto de vista del diseño del código, ésta es una estructura muy mala, porque en cualquier tema con un poquito de chicha se convertiría en un enorme bloque de código monolítico inmanejable por tamaño y complejidad.

La manera de combatir esa complejidad intratable de bloque de código demasiado grandes es organizarlos mejor dividiéndolos, repartiendo responsabilidades, igual que una empresa cuando crece se tiene que ir organizando por equipos y departamentos.

Por eso, la documentación de WordPress considera que, además, hay que añadir tres ficheros con código PHP específico para la cabecera una posible barra lateral y un pie de página. En total, nos queda la siguiente estructura:

• php: el fichero principal para con el código PHP del tema.
• php: el fichero con el código PHP específico para la cabecera.
• php: el fichero con el código PHP específico para una posible barra lateral.
• php: el fichero con el código PHP específico para el pie.
• css: la hoja de estilo CSS para el tema.
• png: una imagen con una relación de aspecto 4/3 (por ejemplo, 800x600 pixeles) para la miniatura que se visualiza en el listado de temas instalados en el menú de “Apariencia/Temas” de WordPress.

El código PHP para nuestra plantilla WordPress

Recordemos ahora que la estructura básica de cualquier página web es así:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
    <!-- código del contenido visible de la página -->
  </body>
</html>

Elaboremos esto un poco más para tener un patrón general para las páginas de nuestro tema:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Contenido para la meta-descripción">
    <title>Título Página</title>
    <link rel="stylesheet" href="/wp-content/themes/zero/style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" 
          rel="stylesheet">
  </head>
  <body>
    <header class="">
      <div class="logo">
        <img alt="Zero Theme" title="Zero Theme" width="300" 
             src="/wp-content/themes/zero/logo-500px.png">
      </div>
    </header>
    <main>
      <h1 class="title">Título Página</h1>
      <div class="content">
        <p>...</p>
        <p>...</p>
        <h2>Subtítulo</h2>
        <p>...</p>
        <p>...</p>
        <h2>Subtítulo</h2>
        <p>...</p>
      </div>
    </main>
    <footer><div class="text">Copyright @ 2022 Zero Theme</div></footer>
  </body>
</html>

Como puedes ver, este código es HTML puro. No hay nada de PHP. Es una maqueta de lo que queremos que haga nuestro tema WordPress.

Te recomiendo encarecidamente que tú lo hagas igual: no te lances a programar el tema en PHP, crea primero una o varias maquetas HTML. Cuando luego pases a la programación en PHP, ésta te resultará mucho más fácil, ganarás tiempo y cometerás muchos menos errores.

Si te fijas, con respecto a la estructura mínima de HTML, hemos añadido unas cuantas cosas a nuestra página:

• Una meta-descripción.
• La hoja de estilos obligatoria del tema.
• Hemos incluido una fuente de Google Fonts.
• Una sección de cabecera con el logo.
• Una sección con el cuerpo que es donde irá el contenido principal de las páginas.
• Una sección de pie de página.
• Omitimos la barra lateral porque no aporta mucho más al ejemplo.

Lo que toca hacer ahora es crear esta estructura con PHP y tirando de los contenidos que WordPress tiene almacenados en su base de datos para cada una de las páginas (o entradas).

Vamos a construir entonces poco a poco el código de nuestro tema.

La cabecera de nuestro tema

Éste es el código del fichero de cabecera header.php, incluye el HTML hasta el fin de la sección de <header>:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Contenido para la meta-descripción">
    <title><?= the_title(); ?></title>
    <link rel="stylesheet" href="<?= get_stylesheet_directory_uri().'/style.css'?>">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" rel="stylesheet">
  </head>
  <body>
    <header class="">
      <div class="logo">
        <img alt="Hosting a Tope" title="Hosting a Tope" width="250"
             src="/wp-content/uploads/2021/07/logo-hat-500px.webp">
      </div>
  </header>

Para mantener el ejemplo muy simple, he puesto contenidos fijos en cosas que deberían ser dinámicas, es decir, individualizadas para la página en cuestión. Por ejemplo: el contenido de la meta-descripción que aquí es una simple cadena de texto fija.

Igualmente, la URL del logotipo de la web no debería estar “metida a pelo”, sino que aquí debería algún código PHP que lo recuperar en base a una configuración del logo en el tema.

Sin embargo, el contenido de la etiqueta <title> sí que se genera dinámicamente en función de la página con la función the_title(). Esto sí que lo he implementado por ser una parte especialmente crítica por su importancia en el SEO y un ejemplo muy fácil de hacer.

Cabe destacar también el uso de la función get_stylesheet_directory_uri() que nos da la URL hasta el directorio raíz del tema. Permite programar con URLs que apuntan a ficheros dentro del tema sin saber el dominio bajo cuál funcionará la web.

Incluso, si acabas cambiando el nombre inicial del tema (que implica cambiar el nombre de la carpeta principio y con la URL a sus ficheros) no pasa nada. Esta función nos permite despreocuparnos de todo esto. Por eso, se usa mucho en la programación en WordPress.

Pero lo dicho: no quiero desarrollar demasiado este tipo detalles aquí porque si no, un simple post de introducción como éste se acabaría convirtiendo en un libro...

El cuerpo de nuestro tema

A continuación, viene el cuerpo de la página, implementado en el fichero index.php. Este fichero es también el fichero principal que WordPress llama cuando accedemos a cualquier página dentro de una web hecha con WordPress.

El código en sí mismo es muy simple, pero aquí ya entramos en la chicha de la programación de WordPress, concretamente en el “Loop de WordPress” que es el mecanismo por defecto de WordPress para visualizar sus contenidos.

Los detalles de qué es y cómo funciona el loop exactamente los puedes ver aquí.

<?php get_header(); ?>
<main>
  <?php
  if ( have_posts() ) {
    while ( have_posts() ) {
      the_post();
     ?>
      <h1 class="title"><?= the_title(); ?></h1>
      <div class="content"><?= the_content(); ?></div>
      <?php
    }
  }
  ?>
</main>
  <?php get_footer(); ?>

Fíjate en que hay tres partes bien diferenciadas en este trocito de código:

1. La inclusión de la cabecera con la llamada a get_header() que es una función del API de programación de WordPress. La función asume que existe un fichero header.php tal como lo hemos creado nosotros antes y lo incluye.
2. El código del loop, encargado de visualizar el contenido principal de la página.
3. El código que incluye al fichero php de manera similar a la cabecera.

Fíjate, además, especialmente en cómo en la sección de código del loop recuperamos, por un lado, el título de la página en cuestión con la función the_title() y, por el otro, el resto del contenido con the_content().

Aquí, una buena práctica de SEO importante es que el título tenga una etiqueta <h1> para dejarle claro a Google que éste es el título principal del contenido.

El pie de nuestro tema

Lo que queda de código PHP, footer.php, ya es muy simple, en este caso ni tan siquiera llegamos a usar PHP:

    <footer><div class="text">Copyright @ 2022 Zero Theme</div></footer>
  </body>
</html>

De nuevo, en un tema real sería inaceptable incluir el año y nombre del sitio como una cadena fija, pero para el ejemplo nos vale.

La hoja de estilos de nuestro tema WordPress

Bueno, pues a lo tonto ya hemos llegado a la última parte para completar nuestro tema WordPress: la hoja de estilos.

En primer lugar, quiero que te fijes muy bien en el comentario al principio del fichero. Esto no es un simple comentario PHP sin más. Tiene una estructura con una serie de campos que a WordPress le permite reconocer que se trata de un tema.

/*
 Theme Name:   Zero Theme
 Theme URI:    https://www.ciudadano2cero.com
 Description:  Tema mínimo que sólo sirve como una introducción a la
               programación de temas en WordPress.
 Author:       Berto López
 Author URI:   https://bertolopez.com
 Version:      1.0
*/

body {
    margin: 0;
    font-family: Montserrat;
}

p {
    line-height: 1.5em;
    font-size: 1.1em;
}

h1, header .logo, footer .text {
    text-align: center;
}

header {
    padding: 20px;
    border-bottom: 2px solid #f1f1f1;
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 50px;
}

footer {
    padding: 20px;
    font-weight: bold;
    background-color: lightgray;
}

Pero, sobre todo, lo importante es que es también información que WordPress utiliza cuando muestra un tema en el escritorio.

En la siguiente imagen puedes ver cómo la información se corresponde exactamente con los campos correspondientes del comentario:

Además, puedes ver también como se está usando la imagen screenshot.png que debe incluir un tema WordPress.

Por otra parte, me hecho caso a mí mismo creando una hoja CSS realmente simple. Con esto no vamos a conseguir una virguería de tema, pero sí que podría ser una estética perfectamente válida para un estilo de diseño minimalista, tan de moda en los últimos años.

Además, te aseguro una cosa: este tema es rápido, muy rápido.

Sí, vale, tiene truco, es fácil conseguir que sea rápido cuando apenas hemos implementado funcionalidades (sección de comentarios, etc.). Pero mi mensaje es que recuerdes que cuanto más complejo el tema, más lento. Piensa muy bien qué cosas necesitas añadir realmente a tu tema.

¿Qué cosas nos faltan para tener un “tema de verdad”?

Ahora que tenemos a nuestro tema simple, sólo queda una pregunta:

¿Qué cosas le faltan para que sea tema razonablemente completo, comparable a los temas gratuitos “buenos” que te puedes descargar del repositorio de temas de WordPress?

Pues lo cierto es que le falta mucho. Aquí van ejemplos de las características más importantes que un tema debería incluir para que se pueda considerar razonablemente completo:

• Deberían ser configurables los elementos estéticos básicos: logo, fuentes, tamaños de letra, esquemas de colores, etc.
• Debe implementar una sección de comentarios y de paginación (para las páginas con muchos comentarios).
• Disponer de páginas de blog (listados de posts), categorías y etiquetas (listados de contenidos por categorías y etiquetas).
• Una colección de widgets básicos para la barra lateral y para su uso dentro de los contenidos (como, por ejemplo, las tarjetas que puedes ver aquí y que llevan a otros posts, son parte de nuestro tema a medida).
• Estilos para visualizar correctamente los bloques básicos de Gutenberg (tabla, calendario, citas, etc.).
• Soporte para microformatos básicos.
• Etc.

Ahora bien, que éstas sean características que se consideran estándar para cualquier tema no quiere decir que las necesites en tu caso. Por ejemplo, la configuración estética de los colores, fuentes y tamaño de letra puede implementarla perfectamente “a pelo” en la hoja de estilos.

Otro ejemplo serían los comentarios: no se puede concebir un tema de uso general sin incluir una sección de comentarios, pero en tu tipo de web quizás no necesites comentarios, así que, ¿para qué implementarla?

En definitiva, analiza estos aspectos para valorar si te merece la pena crear tu propio tema y, sobre todo, si no puede ser mejor alternativa para tu caso crear un tema hijo.

Descarga del código

Y, por último, aquí te dejo el tema para que lo descargues, instales y trastees con el:

¡Espero que disfrutes mucho programando y trasteando! 😉