Cómo crear tema de WordPress desde cero [WordPress Themes I]

Si utilizas WordPress como gestor de contenidos, sabrás que uno de los pilares, herramientas o comodidades que implementa son los themes o temas.

Los themes los hay de muchos tipos y para muchos perfiles; los hay para agencias, portfolios, tiendas online, vcards… Casi cualquier cosa que se te ocurra. ¡Incluso los hay multipropósito!

¿Qué es un theme de WordPress? ¿Qué tipos de themes hay?

Como digo, también se llaman Temas y son conjuntos de plantillas que le dan la apariencia a nuestro sitio web.

Entre los más conocidos están los «Twenty» oficiales de WordPress:

• TwentyThirteen (el tema oficial de WordPress durante el 2013)
• TwentyFourteen (el tema oficial de WordPress durante el 2014)
• TwentyFifteen
• TwentySixteen

Tipos de Themes para WordPress

Aunque podemos hacer infinitas categorías hablando de los temas, voy a resumirlo en dos tipos de categorías; según el coste (gratuitos o de pago) y según la temática (portfolio, tienda online, blog, agencias…)

Según el coste:

• Gratuitos: No tienen coste alguno ya que sus autores así lo han decidido. Son una buena base y generalmente muy personalizables. Algunos de ellos tienen una versión premium con más opciones.
• De pago: Realizados (al igual que los anteriores) por profesionales que, esta vez sí, quieren cobrarte una cantidad de dinero por su trabajo. Aunque no suelen ser caros, veremos precios que oscilan entre los 20 y los 50 dólares.

Según la temática:
Como dije anteriormente, podremos encontrar temas preparados para todo tipo de temáticas; desde el más clásico blog hasta la tienda online más compleja. Todos con diferentes costes (gratuitos o no) y características.

¿Dónde conseguir Themes para WordPress?

La respuesta perfecta es depende. Y es que depende de lo que te quieras gastar y de lo que te fíes de ciertos vendedores.

Bajo mi punto de vista, lo mejor es empezar por el repositorio oficial de temas de WordPress. Si aquí encuentras alguno que te agrade, ¡genial! Porque te habrás ahorrado comprar un theme.

Sin embargo, hay muchos sitios donde puedes comprar themes muy profesionales y realmente baratos, como por ejemplo:

• Elegant themes: Aunque en total no llegan a los 100 temas para WordPress, son de muy buena calidad y un diseño bonito.
• Theme Forest: Tienen muchísimos temas, por temáticas y de muy buena calidad.
• WooThemes: Con una buena calidad, a mi me gustan mucho los que se integran con WooCommerce (obvio).

Podría darte más páginas, pero creo que las más completas son estas tres aunque no descarto una actualización en el futuro para añadir temas recomendados.

La anatomía de un theme de WordPress

Si has llegado hasta esta parte es que no te conformas con un tema del repositorio, ni de las más conocidas tiendas que puse más arriba.

Tranquilo, quieres tener control total sobre tu tema y eso es bueno.

Cuando hablamos de la anatomía de un tema, podría engañarte y contarte que está compuesto de cientos de ficheros, todos y cada uno de los cuales son necesarios.

Pero el caso es que un tema de WordPress está compuesto por sólo dos ficheros básicos; ambos igual de importantes:

• style.css: En él incluiremos los estilos de nuestro tema (obviamente) y datos del mismo (Nombre, número de versión, Licencia, Tags, Autor (y su url), Descripción y un montón de datos más (como veremos a continuación).
• index.php: Es el primer fichero que se va a ejecutar desde nuestro front end; el encargado de imprimir las etiquetas HTML que todos los visitantes de nuestro sitio web verán. Eso sí, este podrá ser sustituido por plantillas, como veremos después.

El style.css

Como comentaba arriba, es uno de los dos pilares fundamentales de nuestro tema; sin él no tenemos tema. No, no es broma; si no tenemos un style.css, WordPress lo sabrá y nos mostrará un mensaje indicando que nuestro tema está corrupto.

Esta comprobación la hace mediante esta función:

function search_theme_directories(){
   [...]
   if ( $theme_file == ‘style.css’ ) {
      $theme_files[$theme_dir] = array( ‘theme_file’ => $theme_dir . ‘/’ . $theme_file, ‘theme_root’ => $theme_root );
      $found_stylesheet = true;
      break;
      [...]
   }
   [...]
}

Así que ya sabes, el style.css es imprescindible para crear un tema.

Además, para el correcto funcionamiento del tema (de cara al uso que se puede hacer de el), deberemos incluir el siguiente código comentario al principio del mismo*:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the
blog, featuring a full range of post formats, each displayed
beautifully in their own unique way. Design details abound,
starting with a vibrant color scheme and matching header images,
beautiful typography and icons, and a flexible layout that looks
great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-
column, two-columns, right-sidebar, flexible-width, custom-
header, custom-menu, editor-style, featured-images,
microformats, post-formats, rtl-language-support, sticky-post,
translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've
learned with others.
*/

*Nota: el ejemplo mostrado pertenece al código de muestra del theme Twenty Thirteen, tendrás que rellenar los correspondientes campos con los datos de tu tema.

El index.php

Sobre el index.php puedo contarte que es la plantilla más genérica; será la que mostremos si no hay otra más específica para el contenido que estamos mostrando.

La Modularización en el desarrollo con WordPress

Una de las cosas que mejor implementa WordPress como sistema de información es la modularización; esto es, podemos crear módulos y reciclar códigos entre proyectos en forma de plugins. Algo realmente útil para alguien que desarrolla varios tipos de sitios web desde cero.

Al final, puedes crearte un Framework de desarrollo muy potente; tal y como conté en mi ponencia de la WordCamp Sevilla 2013:

Otros ficheros habituales de un tema de WordPress

Si bien con sólo los dos ficheros que hemos mencionado arriba ya tendríamos nuestro tema creado, hay otros ficheros habituales que suelen ser parte del paquete básico (que no imprescindible) para crear un tema de WordPress.

Los ficheros que siempre te encontrarás son:

• Functions.php: Nos permite cambiar las características que WordPress ofrece por defecto; funciona como un plugin en el sentido de que aporta mejoras y funcionalidades a nuestro sitio WordPress, pero sólo lo aplica mientras este theme esté activado.
• header.php, footer.php y sidebar.php; se utilizan para modularizar el theme.

Además, es posible que veas otros como estos:

• sidebar.php
• page.php
• single.php
• archive.php
• 404.php
• search.php
• category.php
• tag.php

Aunque son unas pocas, puede haber muchas más. Si quieres saber más sobre las plantillas de un tema de WordPress te invito a que sigas leyendo el tutorial.

Imagen de Elegant Themes