Como reza el título de este articulo, este es un tutorial de como crear tu tema en WordPress.

Al terminar esta serie de artículos, obtendrás un tema o plantilla totalmente funcional para poder trabajar en tus proyectos.

WordPress se ha convertido sin duda en el CSM más utilizado por los administradores de sitios web, tanto para empresas como para particulares.

Tan popular es su uso, que está instalado en más del 20% de sitios en Internet.

Si eres desarrollador web, no dudes en utilizar la plataforma WordPress para tus proyectos, no lo lamentarás!

Flexible, potente y sencillo, esas son las 3 claves de WordPress. Para los desarrolladores de sitios web, WordPress nos ofrece estas 3 claves para crear temas o plantillas.

Instalación de servidor local

Para estas cosas, desarrollar una plantilla de wordpress o tocar simplemente el código para cambiar algo, recomiendo instalar un servidor Apache local, con PHP y mysql, para realizar ahí las pruebas, así nos aseguramos de no romper nada 😎

(Como instalar un servidor local Apache + MariaDB + PHP + Perl)

Para no estar dando indicaciones extra largas y extensas, doy por hecho, que sabes como instalar y configurar WordPress, también doy por hecho, que sabes HTML, CSS y PHP.

Creando la estructura de nuestro tema

En primer lugar, te informo que todas las plantillas que vayas a crear, deberás colocarlas en el directorio “themes” dentro de la instalación de WordPress, en la carpeta “wp-content”:

Archivos principales

Para comenzar con el tutorial de como crear tu tema en WordPress, vamos a crear un directorio en la carpeta themes, pon el nombre: MiTemaWP.

Pero, ten en cuenta que añadir un nuevo directorio en la carpeta themes no va a hacer que WordPress entienda que hay un nuevo tema para usar.

Para ello, necesitaremos como mínimo dos archivos:

• index.php
  Es un archivo obligatorio en la raíz de nuestra plantilla. Se trata del archivo que WordPress buscará y llamará en el caso de no encontrar ninguna página-plantilla como página de inicio.
• style.css
  Es donde especificaremos los parámetros principales de la plantilla, además de ser el archivo principal para definir los estilos que utilizaremos.

Ahora nuestro WordPress ya detectará que tenemos un nuevo tema, en nuestra carpeta de themes, pero no está listo aún. Vamos a tener que editar el archivo styles.css y añadir las siguientes líneas:


/*
Theme Name: MiTemaWP Template
Template Theme URI: https://tu.website.com/
Author: "equipo o persona"
Description: Plantilla desarrollada como parte del tutorial
Version: 1.0
*/

Nuestro tema ya esta listo para que WordPress lo detecte sin errores, como podemos ver en la imagen:

Pero vaya! Que feo se ve eso no? Mejor vamos a añadirle una captura para saber que es nuestro tema.

Es muy sencillo, simplemente crea una imagen de 880x660px y nombrala screenshot, luego sube la al directorio raíz de tu nuevo tema, dónde está index.php y styles.css.

Ahora, la plantilla tiene mucho mejor aspecto en el gestor de temas, ¿verdad?

Archivos secundarios

Bien, es la hora de crear los archivos necesarios para nuestro nuevo tema.

Nombre de archivo y explicación a continuación:

• header.php
  En este archivo, indicaremos la cabecera que será común en la navegación de la plantilla y el menú de navegación principal.
• footer.php
  En él indicaremos la información que estará siempre presente en el pie de página como por ejemplo el copyright.
• sidebar.php
  Este archivo está pensado para mostrarlo a modo de barra lateral.
• front-page.php
  Es la plantilla que WordPress cargue por defecto como página de inicio.
• home.php
  Este archivo está pensado para casos en los que la página de inicio es una página estática, como puede ser la página de inicio de un site corporativo.
• single.php
  Es la plantilla que muestra un post completo por defecto.
• page.php
  Éste es el archivo de plantilla que mostrará por defecto cualquier página que creemos, siempre y cuando no se le haya especificado una plantilla.
• category.php
  Sirve para mostrar un listado de posts de una categoría específica.
• comments.php
  Es la plantilla a la que llamaremos dentro de single.php para poder añadir comentarios a nuestros posts.
• search.php
  Esta plantilla es la que mostrará Wordress cuando se lleve a cabo una búsqueda.
• 404.php
  Se trata de la plantilla que se mostrará cuando un enlace esté roto o no funcione.
• functions.php
  Este archivo nos permitirá crear zonas de menú y de widgets, así como personalizar algunos parámetros que WordPress trae por defecto.

Ahora ya tenemos la estructura necesaria de nuestro tema para que WordPress trabaje con él sin problemas. Ah claro! Los archivos están vacíos!! Por supuesto amigo, pero eso lo dejo para el siguiente articulo 😉

De momento, deja la plantilla activa en tu servidor local, así en el siguiente articulo, conforme avancemos iras viendo los cambios que vayamos realizando.

Como crear tu tema en WordPress parte2 >