Aunque normalmente y dada mi falta de originalidad para ciertos temas (además de mi mente excesivamente analítica) prefiero coger un theme gratuito y editarlo a mi gusto, me he decidido por investigar cómo crear desde 0 (bueno, desde 0,5) un theme de wordpress.

Resulta bastante sencillo y no supone un gran coste, pero para poder explicarme con más comodidad y hacer artículos menos densos prefiero hacerlo en 2 o 3 partes, de forma que separe unos temas de otros. De esta manera, pasaré a explicar cómo crear y configurar un theme y qué archivos son necesarios, los estilos que deberíamos incluir, los archivos que deberíamos editar y por último algún truco más avanzado. Empecemos.

Creando nuestro nuevo theme. ¿Qué necesitamos?

Lo primero que hay que saber es que los themes se guardan en carpetas independientes dentro de wp-content/themes/, por lo tanto, nos metemos ahí y creamos una nueva carpeta, por ejemplo “miNuevoTheme“.

Tras esto es necesario crear un archivo style.css que empiece por el siguiente texto, esto es importante ya que wordpress no reconocerá el theme si no tiene estos datos ya que wordpress utiliza esta información para mostrar los themes en el panel de administración. Si quieres ver un ejemplo utiliza el style.css del theme por defecto de wordpress.

/*
Theme Name: Mi super Theme
Theme URI: http://www.entrecodigos.com/
Description: Theme de pruebas.
Version: 1
Author: Ruben Canton
Author URI: http://www.entrecodigos.com/
Tags: blue, custom header, fixed width, one column, widgets
*/

Ahora sólo hace falta que coloquemos ciertos archivos php que definen la estructura de las distintas secciones de nuestro blog, sólo 3 de ellos son imprescindibles:

• index.php: Es el archivo al que realmente se llama, éste es quien debe llamar a header.php y footer.php.
• header.php: incluye la cabecera.
• footer.php: Incluye el pie de página.

Seguramente te preguntarás cómo meter un sidebar, widgets o cómo hacer estructuras distintas para listar categorías, páginas o resultados de búsqueda. Pues bien, por eso en la mayoría de themes hay muchos más archivos, los 3 anteriores son imprescindibles para un diseño básico, pero si quieres hacer algo mas complejo sin provocar que el index.php termine ocupando 800 líneas de código lleno de bifurcaciones será mejor que te mires la carpeta con el theme por defecto de wordpress y copies todos los archivos php que contiene. Así podrás tener todos los archivos y partir de una base, como hice yo, lo que puede resultarte muy útil.

Por último, existe una imagen llamada screenshot.png de 300×225 que wordpress utiliza para mostrarte una minipreview del theme en el panel de administración, cuando termines tu theme puedes hacer una captura y colocarlo para distinguirlo fácilmente.

¿Qué estilos colocar en style.css?

Cada uno trabaja a su manera, si coges el style.css de algún theme te encontrarás con mucha basura o estilos que no vas a utilizar, si utilizas el style por defecto de wordpress no te libras de esa basura, y además, su forma de organizar el css puede que no se adapte a tu forma de trabajar, como me pasó a mi. Por lo que lo mejor es borrarlo todo y empezar desde 0 teniendo claro qué estilos sí son imprescindibles o necesarios, aunque como tú eres quien define la estructura puedes modificar el nombre de los mismos, te recomiendo que utilices los que vienen por defecto, así tu theme será más compatible. Te muestro la estructura básica:

• body
• • page
  • • header
    • content
    • • post
      • postmetadata
      • entry
      • commentlist
      • commentmetadata
      • avatar
      • commentform
    • sidebar
    • footer

Por supuesto no hay que olvidar ponerle estilo a las típìcas etiquetas HTML como a, h1, h2, ul, ol, li, img, … y tras eso ya puedes empezar a crear tus propios estilos o bloques e incuirlos en la estructura y en el css.

Nota: Si has copiado los archivos php del theme por defecto, fíjate que el header.php mete un estilo de forma dinámica en función del tipo de página que se carga, puedes utilizar esto si te interesa para tener distintos estilos o eliminarlo para que no te moleste.

Continuará…

Fuente: Un especial agradecimiento a Andrés Nieto, por su manual y por su recopilación de manuales.