Tutorial de como crear tu tema en WordPress parte1
Tabla de contenidos
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.