INICIO

GUÍA PARA CREAR UN TEMA WORDPRESS DESDE CERO | PASO A PASO

Si estás leyendo esto es porque quieres aprender a crear tu propia plantilla de WordPress.

Aquí vamos a hacerlo explicando todo con detalle paso a paso

Yo sé que tú eres mega inteligente y por eso tienes algunos conocimientos básicos de:

Si no, te recomiendo repasar antes el curso de desarrollo web.

Crear mi propio tema para WordPress

Es muy fácil.

WordPress tiene un directorio especial para meter nuevos temas, todos los que quieras.

Crea una nueva carpeta para tu tema, dentro del directorio de temas de tu instalación de WordPress.

¿Dónde está eso?

[directorio_wordpress]/wp-content/themes/

Donde [directorio_wordpress] es la carpeta donde hayas puesto tu instalación de WordPress.

¿Qué nombre le pongo a la carpeta de mi tema?

El que quieras, por ejemplo:

/wp-content/themes/super-tema/

A partir de aquí ya has conseguido hacer lo más difícil.

Solo falta crear los archivos que usará tu plantilla.

Y eso lo sabe hacer cualquiera.

Yo te enseñaré.

Cómo construir los archivos de tu nuevo tema

Lo primero que haremos será añadir el archivo style.css

Este lo tienes que incluir dentro de la carpeta que has creado.

/wp-content/themes/super-tema/style.css

Y dentro de ese archivo escribiremos estas líneas de código:

/*
Theme Name: Mi Super Tema
Description: Un tema fantástico porque sí.
Author: Salamarkesa
Author URI: http://salamarkesa.com
Version: 1.0
*/

Fallo común: no olvides copiar todo, incluídos los símbolos de  /* (comentario CSS).

Lo que está en violeta puedes cambiarlo a tu gusto.

¿Qué hemos hecho?

Básicamente hemos añadido la información general sobre nuestra nueva plantilla.

¿Tengo que poner más cosas?

Sí.

A continuación pondrás además todos los estilos básicos para toda la plantilla.

Por ejemplo:

/*
Theme Name: Mi Super Tema
Description: Un tema fantástico porque sí.
Author: Salamarkesa
Author URI: http://salamarkesa.com
Version: 1.0
*/

html, body{
margin:0;
padding:0;
background-color:#F3F3F3;
}

...

Y bueno, lo editarás a tu gusto para contemplar todas las reglas CSS que necesites.

¿Te estás perdiendo?: Te recuerdo que esto es un tutorial de cómo hacer una plantilla para WordPress, y naturalmente estoy dando por sentado que ya conoces HTML y CSS y algo de PHP.

Pero bueno.

Si hasta aquí entiendes todo, eres super mega WordPressero friki máximo de internet y del desarrollo web, y eso está muy bien.

Seguiremos ahora con algunos archivos principales en PHP, que serán la cabeza pensante y la estructura de nuestro tema.

Archivos PHP fundamentales para crear un tema

Empezaremos con el encabezado.

Crear encabezado de mi theme personalizado

Crea un archivo, en la misma carpeta del tema, que se llame header.php

/wp-content/themes/super-tema/header.php

Ahí vas a poner el encabezado de tu web.

Aquí te enseño un ejemplo básico, para que tú lo modifiques a tu gusto:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?> 
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>

Para que no te pierdas:

Bien.

Crear footer de mi theme personalizado

Creamos el archivo footer.php en la carpeta del tema.

/wp-content/themes/super-tema/footer.php

Ese será nuestro pie de página.

Y puedes meter estas líneas de código como ejemplo base:

<footer>
<p>Web creada con ayuda de Salamarkesa.com</p>
<p>Puedes borrar esta publicidad, por supuesto que sí :)</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Fácil.

Bien.

Ya casi que tenemos listo nuestro tema para verlo funcionando.

Crear página de inicio personalizada

Crearemos otro archivo PHP dentro de la carpeta del tema.

Lo llamaremos index.php

/wp-content/themes/super-tema/index.php

Esta será nuestra página de inicio.

Como ejemplo, puedes poner estas líneas:

<?php get_header(); ?>
<p>Mi super página de inicio</p>
<?php get_footer(); ?>

Muy básico todo.

Bien.

Ver el tema en funcionamiento

Cuando hayas guardado la carpeta con todos los archivos creados en tu servidor, podrás ir al menú:

WP Admin > Apariencia > Temas

Y ahí deberías ver la opción para activar tu nuevo tema.

crear-tema-wordpress-tutorial

Como ves, todavía queda mucho por hacer, pero te mereces un super aplauso, porque ya estás aprendiendo.

¿Cómo añadir una imagen de vista previa personalizada?

Muy fácil, dentro de la carpeta de tu tema, mete una imagen en formato PNG que se llame screenshot.png

Así:

/wp-content/themes/super-tema/screenshot.png

Dimensiones: debería medir 1200x900 px.

Si usas otras dimensiones u otro formato de imagen, puede ser que funcione, pero no es recomendable salirse de los estándares, si quieres que las cosas funcionen bien.

crear-tema-propio-wp

Así es como quedaría en el visor de temas.

Exportar mi tema para regalarlo o venderlo

Puedes exportar el tema en un zip comprimido para que cualquiera pueda instalarlo.

Es tan fácil como crear un archivo comprimido en formato zip que contenga todos los archivos que has creado.

Y no te pierdas todo el índice de cosas que puedes hacer con wordpress para darle forma a tu nuevo tema.

Ver: Índice de recursos de Desarrollo en WordPress.