Cómo crear tu propio Theme para WordPress

En este post voy a explicar los pasos más básicos que he recopilado para crear tu propio Theme para WordPress.

wordpress-water

La idea es disponer de una estructura muy básica para entender las diferentes partes de un theme de WordPress como base para un posterior enriquecimiento del mismo tanto a nivel de diseño como funcional.

Podéis descargar el theme ikerbitwp con todos los archivos que intentaré explicar brevemente.

En este caso he creado una plantilla o “theme” a partir del siguiente código HTML de una página Web muy sencilla.

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"><title>ikerbitwp theme</title>
	</head>
	<body>
		<h1>Hello world. I’m ikerbitwp theme</h1>
		<p>My first paragraph.</p>
		<div>
		Visit us at <a href='http://www.ikerbit.com'><a href="http://www.ikerbit.com/">ikerbit</a></a>.
		</div>
	</body>
</html>

Para empezar, accedemos a la ruta “/wp-content/themes” del sitio Web donde esté WordPress instalado. La carpeta “themes” es la que contiene los temas de WordPress. Aparecerá la carpeta de cada theme instalado.

En la misma ruta donde se encuentran el resto de themes creamos una nueva carpeta con el nombre que daremos al theme, por ejemplo “ikerbitwp”.

Ahora vamos a crear los archivos que deberán estar en el raíz de la carpeta de nuestro theme, es este caso “/wp-content/themes/ikerbitwp”.

El código HTML estático que vamos a utilizar lo vamos a partir en 3 partes. La primera parte considerada cabecera se mostrará mediante el archivo header.php. La segunda corresponde al contenido y la insertaremos en el archivo index.php. La parte final considerada pié de página en el archivo footer.php.

1.- Archivo screenshot.png

Lo primero de todo escogeremos una imagen que identifique nuestro nuevo theme. Para ello, buscamos o creamos una imagen de 300×225 px de tamaño y la guardamos con el nombre screenshot.png. Ésta será la imagen con la que se mostrará nuestro theme.

 

2.- Archivo index.php

La página index.php se considera la página principal de la carga del sitio. Vamos a crear una página index.php con una estructura muy sencilla, la carga de la cabecera (header.php), 3 líneas de código HTML (título y párrafo) y finalmente el pié de página o footer (footer.php).

 

2.1.- Etiquetas get_header() y get_footer()

Vamos a insertar la etiqueta get_header() al principio del archivo. Esta etiqueta cargará al principio de la página el contenido de cabecera del sitio, concretamente el contenido del archivo header.php que veremos más adelante. Así mismo insertamos la etiqueta get_footer() al final del archivo para cargar el contenido del pié de página. Este formato sirve para el resto de páginas personalizadas que podamos ir creando en un futuro.

Código de index.php

<?php get_header(); ?>
	<!-- HTML -->
	<h1>Hello world. I’m ikerbitwp theme</h1>
	<p>My first paragraph.</p>
<?phpget_footer(); ?>

 

3.- Archivo style.css
Ahora vamos a crear en la misma ruta el archivo “style.css”.
Este archivo contiene el código referente al estilo con el que se mostrará el contenido del sitio con nuestro theme pero además de esto debe contener un comentario al principio con la información de las especificaciones del theme.
En este caso insertamos el comentario con las especificaciones del theme que consideremos, Themename, Author, etc.
Al final del archivo incluimos unas básicas instrucciones css para el body.

Archivo style.css

/*
Theme Name: ikerbitwp
Theme URI: http://ikerbit.com
Version: 1.0
Description: Simple base WP theme
Author: Iker Zazpe
Author URI: http://ikerbit.com
Template: ikerbitwp
Tags: wordpress, basic, theme
License URI: http://creativecommons.org/licenses/by-sa/3.0/
License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
*/
/*----------------- changes start here---------*/
body {
     padding-top: 60px;
     padding-bottom: 40px;
}

4.- Archivo header.php
Creamos el archivo header.php en la carpeta del theme.
Este archivo contiene el código de la cabecera del sitio. Se da por hecho que la misma cabecera se cargará al principio de cada página por lo que se realizará una llamada a este archivo cada vez.

Lo primero, insertamos el código HTML correspondiente a la cabecera.

4.1.- Etiqueta bloginfo()
Esta etiqueta la utilizamos para cargar el archivo de la hoja de estilos CSS. Asegurarse de implementar la siguiente línea en al archivo header.php

<link href="<?phpbloginfo('stylesheet_url');?>" rel="stylesheet">

4.2.- Etiqueta wp_enqueue_script()
Esta etiqueta implementa una forma segura de añadir contenido Javascript a las páginas generadas por WordPress.

<?php wp_enqueue_script("jquery"); ?>

4.3.- Etiqueta wp_head()
Insertar la etiqueta “wp_head()”. Ésta etiqueta servirá para que el contenido Javascript o css pueda ser modificado por plugins.

<?phpwp_head(); ?>

Archivo header.php

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>ikerbitwp theme</title>
  <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
  <?php wp_enqueue_script("jquery"); ?>
  <?php wp_head(); ?>
  </head>
  <body>

5.- Archivo footer.php
Creamos el archivo footer.php en la misma ruta e insertamos la etiqueta wp_footer(). Esta etiqueta tiene la misma función que la etiqueta wp_head() en el archivo header.php pero en este caso cargará el pié o footer en cada página.

Insertar la etiqueta justo antes del cierre de la etiqueta body.

<?php wp_footer(); ?>
</body>

Archivo footer.php

<div>
	Visit us at <a href='http://www.ikerbit.com'>ikerbit</a>.
</div>

<?php wp_footer(); ?>

</body>
</html>

6.- Página home.php
Esta página será la página estática del theme. Utilizando el archivo index.php como plantilla, copiamos el contenido del archivo y creamos el archivo home.php con el mismo contenido. La carga de la página estática del theme (home) se establece en el área de administración del theme de la siguiente forma.

ikerbitwp1

El contenido debería ser el siguiente:

ikerbitwp2

7.- Archivo front-page.php
Este archivo es utilizado en WordPress como página de inicio dinámica (Yourlatestposts) y su carga en el inicio se predetermina seleccionándolo en las propiedades del theme, dentro del área de administración.

ikerbitwp3

A partir del archivo index.php que utilizamos como plantilla creamos un nuevo archivo front-page.php con el mismo contenido. Después la modificaremos para que muestre contenido dinámico de los últimos posts o entradas.
Para empezar vamos a cambiar el título por “POSTS” antes del contenido de los posts.

<h1>Posts</h1>

7.1.- Insertar el loop de WordPress.
El loop de WordPress muestra el contenido asociado a páginas y posts de forma dinámica en la base de datos. Este loop lo integraremos entre las etiquetas get_header() y get_footer().
En este caso vamos a mostrar en el loop el título de los posts con la etiqueta the_tittle() y el contenido con la etiqueta the_content().

Archivo front-page.php

<?php get_header(); ?>
	<!-- HTML -->
	<h1>Posts</h1>

	<!-- Loop WordPress -->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?>
	<?php endwhile; else: ?>
		<p><?php _e('Sorry, this page does not exist.'); ?></p>
	<?php endif; ?>

<?php get_footer(); ?>

Al cargar la página el contenido debería cargarse según lo hemos codificado:
Posts(Título HTML)
Loop (Cada post)
– Título de post
– Contenido del post

ikerbitwp4

 

Para terminar con nuestro theme vamos a crear 3 archivos vacíos que no son imprescindibles (functions.php, sidebar.php y comments.php) para futuras incorporaciones de código.

8.-Archivo functions.php

El archivo functions.php no es un archivo imprescindible para WordPress y sus funciones sólo se ejecutarán si WordPress lo encuentra en la carpeta raíz del theme.

El archivo functions.php de un theme contiene el código de funciones que implementan funcionalidades concretas del theme y se conecta con otras funciones que incorpora WordPress.

9.- Archivo sidebar.php

En este archivo se realiza la gestión de la barra lateral donde se cargan los widget, enlaces a categorías, etc.

10.- Archivo comments.php

En este archivo se codifican las funciones para gestionar los comentarios que los usuarios pueden dejar en cada post.

Este es todo por el momento espero que haya sido de vuestro interés.