Guía completa para crear un Tema de WordPress desde Cero

En un artículo anterior Estructura de archivos para Temas de WordPress hemos descrito los archivos y el objetivo de cada archivo de un tema, ahora veamos cómo se implementa un tema desde cero.

Preparación

Para crear nuestro tema de WordPress se necesita: tener instalado WordPress en un servidor, los archivos HTML, CSS y JavaScript con el diseño de nuestra web y una imagen de 1200×900 píxels con el pantallazo de nuestra web.

Estructura de archivos

Creamos una carpeta llamada kodetheme ubicado en la carpeta wp-content/themes, donde vamos a copiar todos los archivos estáticos (imágenes, css, javascript, etc) de nuestra maquetación y vamos a crear lo siguientes siguientes archivos:

style.css: para configurar las propiedades del tema (nombre, autor, versión).
screenshot.png: es la imagen con el pantallazo del tema.
header.php: contiene el header con el menú de navegación.
footer.php: para el footer de nuestra página.
index.php: pantalla inicial con el listados de los últimos artículos.
single.php: para la pantalla con el detalle de un artículo.
page.php: para la pantalla con el contenido de una página.

Estructura HTML

Para empezar vamos a revisar el HTML que vamos a convertir en un tema.


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>MWordpress - Home</title>
    <meta name="description" content="...">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
    <div class="content">
        <h1>
            <a href="#"><img src="img/logo.png" alt="Logo"></a>
        </h1>

        <ul class="menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">Nosotros</a></li>
            <li><a href="contact.html">Contacto</a></li>
        </ul>
    </div>
</header>

<section class="posts">
    <div class="content">
        <h2>Últimos Artículos</h2>

        <div class="post">
            <strong>Lorem ipsum dolor sit amet</strong><br>
            <em>Publicado: 10/12/2023</em><br>
            <p>
                Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Sit amet nisl purus in mollis nunc. Convallis a
                cras semper auctor neque vitae tempus. Sollicitudin ac orci phasellus
                egestas tellus. Ullamcorper morbi tincidunt ornare massa eget.
            </p>
            <a href="post.html">Ver artículo</a>
        </div>

        <!-- more posts -->
    </div>
</section>

<footer>
    <div class="content">
        © 2022 Kodetop - <a href="#">Política de privacidad</a>
    </div>
</footer>
</body>
</html>

La estructura contiene los siguientes bloques:

<header>: Header o contenedor superior de la página que incluye el logo y menú.
<section class="posts">: Sección que contiene el listado de artículos.
<div class="post">: Elemento para cada artículo (título, fecha, resumen y enlace).
<footer>: Footer o contenedor inferior de la página.

Configurar el tema

Para configurar el tema se utiliza el archivo style.css, donde se puede definir el nombre, descripción, autor, versión, textdomain entre otros.


/*
Theme Name: KodeTheme
Author: Kodetop team
Author URI: https://kodetop.com/
Description: Basic theme used to learning creation of WordPress Themes
Version: 1.0
Text Domain: kodetheme
*/

Agrega un Screenshot

El segundo paso es crear una imagen con un pantallazo de tu tema, esta imagen debe estar en formato PNG y con dimensiones de 1200×900 pixels, el archivo debe llamarse screenshot.png.

Implementar el Tema

Header

Creamos el archivo header.php el cual contiene todos los elementos del encabezado o parte superior de tu página. Entonces copiamos la parte superior de la estructura HTML vista previamente.


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title><?php bloginfo('name'); ?></title>
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/styles.css">
</head>
<body>
<header>
    <div class="content">
        <h1>
            <a href="<?php echo home_url('/'); ?>">
                <img src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="Logo">
            </a>
        </h1>

        <ul class="menu">
            <li><a href="<?php echo home_url('/'); ?>">Home</a></li>
            <li><a href="<?php echo home_url('/about'); ?>">Nosotros</a></li>
            <li><a href="<?php echo home_url('/contact'); ?>">Contacto</a></li>
        </ul>
    </div>
</header>

Notar que estamos usando las siguientes funciones de WordPress:

bloginfo('name'): Muestra el título del sitio, que se configura en WordPress.
bloginfo('description'): Muestra la descripción o tagline del sitio.
bloginfo('template_url'): Ruta absoluta del tema, se usa para enlazar archivos.
home_url(): Devuelve en enlace absoluto hacia una ruta definida.

Footer

Creamos el archivo footer.php el cual contendrá todos los elementos ubicados al final de tu página. Copiamos la parte final de la estructura HTML.


<footer>
    <div class="content">
        © <?php echo date('Y'); ?> Kodetop - 
        <a href="<?php echo home_url('terms'); ?>">Política de privacidad</a>
    </div>
</footer>
</body>
</html>

Pantalla principal

Creamos el archivo index.php el cual va a contener el listado con los últimos artículos del sitio. Vamos a usar get_header() para incluir el header.php y get_footer() para incluir el footer.php previamente creado.


<?php get_header(); ?>

<section class="posts">
    <div class="content">
        <h2>Últimos Artículos</h2>

        <div class="post">
            <strong>Lorem ipsum dolor sit amet</strong><br>
            <em>Publicado: 10/12/2023</em><br>
            <p>
                Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Sit amet nisl purus in mollis nunc. Convallis a
                cras semper auctor neque vitae tempus. Sollicitudin ac orci phasellus
                egestas tellus. Ullamcorper morbi tincidunt ornare massa eget.
            </p>
            <a href="post.html">Ver artículo</a>
        </div>

        <!-- more posts -->
    </div>
</section>

<?php get_footer(); ?>

Para continuar necesitamos entender el concepto de Loop en WordPress.

El Loop en WordPress es una estructura de código PHP que se utiliza para iterar a través de las entradas de la base de datos y mostrarlas en el sitio web.

El Loop se utiliza de la siguiente manera:

Iniciar el Loop: Se utiliza la función have_posts() para verificar si hay entradas para mostrar. Cuando hay entradas comienza el Loop.
Iteración de Entradas: Mientras have_posts() devuelva verdadero, el Loop continúa. Dentro del Loop, se utiliza the_post() para preparar cada entrada para visualizarla.
Mostrar Contenido: En cada iteración, se utilizan funciones como the_title(), the_content(), the_excerpt(), the_permalink(), para mostrar los datos de cada post.

Luego, podemos modificar el archivo anterior para mostrar los últimos artículos que están guardados en la base de datos.


<?php get_header(); ?>

<section class="posts">
    <div class="content">
        <h2>Últimos Artículos</h2>

        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>

                <div class="post">
                    <strong><?php the_title(); ?></strong><br>
                    <em>Publicado: <?php the_time(); ?></em><br>
                    <?php the_excerpt(); ?>
                    <a href="<?php the_permalink(); ?>">Leer artículo</a>
                </div>

            <?php endwhile; ?>
        <?php endif; ?>
    </div>
</section>

<?php get_footer(); ?>

Detalle del Artículo

Ahora que ya conocemos los conceptos del Loop, vamos a crear la página del detalle de un artículo. Para ello creamos el archivo single.php y colocamos el código para mostrar el contenido completo del artículo.


<?php get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<section class="hero">
    <div class="content">
        <h2><?php the_title(); ?></h2>
        <p><em>Publicado: <?php the_time(); ?></em></p>
        <p><?php the_excerpt(); ?></p>
    </div
</section>

<section class="posts">
    <div class="content">
        <?php the_content(); ?>
    </div>
</section>

<?php get_footer(); ?>

Páginas

Para crear páginas (Contacto, Términos y condiciones, etc) se utiliza el archivo page.php y el Loop que hemos visto previamente.


<?php get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<section class="hero">
    <div class="content">
        <h2><?php the_title(); ?></h2>
    </div
</section>

<section class="posts">
    <div class="content">
        <?php the_content(); ?>
    </div>
</section>

<?php get_footer(); ?>

Listo, hemos creado un tema para WordPress de manera sencilla, no hemos usado un tema base o plugins adicionales.

Próximos pasos

Ahora que ya tenemos nuestro tema, podemos hacer las siguientes mejoras:

Se puede agregar un formulario de comentarios en el detalle del artículo.
Podemos agregar etiquetas <meta> para incluir el código para compartir en Facebook o X.
Se puede agregar código JavaScript o códigos de seguimiento de Google Analytics.
Agrega funcionalidades extra con métodos propios ubicados en functions.php.
Se pueden crear menús administrables y mostrarlos en el tema.
Se puede agregar un sidebar con enlaces para filtrar los artículos por categoría o etiqueta.
Puedes agregar un buscador a tu tema para facilitar la búsqueda de contenido.

Recomendaciones

Procura crear un tema desde cero, evita usar temas base pues regularmente agregan dependencias que luego no se usan.
Lo recomendable es crear la maquetación por separado y cuando se termina se procede a convertirlo en tema de WordPress.
Evita usar Plugins, trata de crear estas funcionalidades extra utilizando el archivo functions.php.

Conclusiones

Como se observa, crear un tema para WordPress es sencillo, hace falta entender como funciona el Loop que es la forma para mostrar el contenido. No es necesario configurar una conexión a base de datos, tampoco es necesario crear un panel de administración, todo lo ofrece y simplifica WordPress.