Hola a todos, he decidido hacer un tutorial sobre como crear una plantilla en WordPress con Bootstrap 4 desde cero, paso a paso. De ese modo podremos utilizarla en los proyectos que queramos.

Veréis que es muy sencillo, y aunque en mi tutorial sobre WordPress explico a grandes rasgos como se hace una plantilla, aquí vamos a crear una desde cero explicando conceptos y añadiendo ideas, todo para que con solo unos toques de código podáis ir adaptándola a vuestros intereses.

¿Qué necesitas saber para crear esta plantilla?

En realidad va a ser muy sencillo, tan solo vais a necesitar conocimientos básicos de:

• PHP
• HTML
• CSS
• JavaScript

Veréis que si conocéis este stack básico el crear una plantilla en WordPress puede ser una cuestión bastante rápida y divertida.

¿Qué no tienes estos conocimientos? No te preocupes, al final de esta serie de tutoriales hare una entrada donde descargar la plantilla y seguramente ponga un enlace de descarga directa en el aside, de modo que también podrás usarla, y lo mejor – DE GRATIS. (Eso sí, si le dais click a algún anuncio de la página se agradecería)

Lo primero es lo primero…

Antes de tirarnos a la piscina a crear archivos hay que tener un entorno preparado, en mi caso voy a utilizar un servidor xampp con un WordPress que tengo ahí instalado y que en mi caso he llamado wppruebas.

De modo que vamos a ir creando nuestro directorio donde tendremos nuestro tema.

• Nos dirigimos al directorio wp-content/themes
• Creamos un directorio que vamos a llamar WPB4 

Creando los archivos básicos para nuestra plantilla

Una vez que ya tenemos nuestra carpeta para el tema creada tenemos que crear los archivos básicos para que WordPress la reconozca como un tema y por raro que parezca estos solo son dos.

• style.css que es el archivo principal de estilos del tema y donde WordPress va a buscar toda la información del mismo
• index.php que es el archivo que sirve de plantilla oficial del sitio siendo el último recurso que tiene WordPress para leer los datos solicitados. Esto ya lo conté en el tutorial y lo puedes ver en este enlace sobre la estructura de un tema en WordPress.
• También es interesante que creemos las carpetas css, js e img para poder ir teniendo nuestra estructura básica.

style.css

Vamos a crear nuestro archivo style.css que ahora mismo solo va a tener la información básica para que WordPress nos identifique como tema.

/*
NOMBRE DEL TEMA: WPB4
THEME URI: -
DESCRIPTION: Tema basado en Bootstrap 4
VERSION: 1.0
AUTHOR: Miguel A. López Torralba
AUTHOR URI: http://mialtoweb.es/
LICENSE: GNU General Public License v2 or later
LICENSE URI: http:/www.gnu.org/licenses/gpl-2.0.html
TAGS: bootstrap
TEXT DOMAIN: ;
*/

index.php

Vamos ahora a crear nuestro archivo index.php que como vas a ver aun no va a tener nada de bootstrap, eso ya lo haremos un poco más adelante, ahora mismo solo queremos que el tema haga algo.

<?php if (have_posts()): while (have_posts()): the_post(); ?>
    
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

    <?php the_excerpt(); ?>
<?php endwhile; endif; ?>

Extra, la imagen del tema

Si queremos poner una imagen descriptiva del tema podemos crear una imagen de 1200×900 con el nombre screenshot.png para que el sistema la use en el panel de control.

De este modo ya solo tenemos que ir a nuestro panel de control, abrir apariencia>temas y veremos nuestro tema seleccionable.