Crear un tema clásico en WordPress puede parecer desafiante al principio, pero si utilizas las herramientas adecuadas y sigues esta guía detallada, te sorprenderá lo accesible y gratificante que puede ser crear tu propio tema clasico de WordPress. En este artículo, aprenderás paso a paso cómo construir un tema clasico desde cero, comprendiendo la estructura básica, configurando un entorno de desarrollo, y personalizando cada aspecto de tu sitio. Este enfoque es ideal para quienes desean un control total sobre el diseño, la funcionalidad y el rendimiento de su sitio web en WordPress, destacando aspectos clave como flexibilidad, personalización y optimización.
Tabla de Contenido
- Comprende la estructura de un tema de WordPress
- Configura tu entorno de desarrollo
- Crea los archivos básicos de tu tema
- Agrega soporte para funcionalidades básicas
- Personaliza tu tema
- Prueba tu tema
- Mejora tu tema
- Conclusión
Comprende la estructura de un tema de WordPress
¿Alguna vez te has preguntado cómo funciona un tema clásico en WordPress? Básicamente, es un conjunto de archivos que trabajan en armonía para darle estilo y funcionalidad a tu sitio web. Estos archivos esenciales hacen que todo cobre vida, desde el diseño hasta la forma en que los usuarios interactúan con tu página. Los más importantes incluyen:
style.css
(Archivo requerido por el tema)
El fichero style.css, es el que define los estilos CSS del tema y contiene información básica del tema. WordPress leera esta informacion, y la presentara dentro de la un bloque con la infromacion del tema. Los estilos aqui agregados se le aplicaran al tema en el front-end.
index.php
(Archivo requerido por el tema)
El archivo principal que WordPress. este se usa como base principal del tema, donde presentar el contenido, si no encuentra archivos específicos para el contenido solicitado. (Mas adelante veremos estos archivos)
functions.php
(Es opcional, pero muy util para agregarle funcionalidades al tema)
Un archivo donde puedes agregar funcionalidades personalizadas al tema.
Con solo index.php y style.css vas a poder ya tener un tema funcional, pero teambien puedes ampliarlo agregando otros acrchivos, tales como los que continuacion presento:
header.php
El fichero header.php, es el que contiene el encabezado del sitio. Se crea como un fichero externo para mantener usando la logica de programacion orientada a objetos. Asi si necesitas modificar cualquier codigo dentro de la cabecera de tu tema, lo puedes hacer aqui, sin tener que modificar cada plantilla de tu tema.
footer.php
El fichero footer.php, es el que contiene el pie de pagina del sitio. Se crea como un fichero externo para mantener usando la logica de programacion orientada a objetos. Asi si necesitas modificar cualquier codigo dentro de esta zona de tu tema, lo puedes hacer aqui, sin tener que modificar cada plantilla de tu tema.
sidebar.php
Este archivo define la barra lateral que puedes incomporar contenido en tu sitio.
single.php
El fichero single.php, es el encargado de mostrar publicaciones individuales en tu sitio. WordPress chequeara si este fichero existe en tu tema para mostrar los articulos, y si no existe, entonces usara el archivo index.php.
page.php
El fichero page.php, es el encargado de mostrar paginas (no confundir con los articulos) en tu sitio. WordPress chequeara si este fichero existe en tu tema para mostrar las paginas (Paginas de Destino como: Acerca De…, Inicio, Contactanos, etc.), y si no existe, entonces usara el archivo index.php.
home.php
Este archivo define la pagina que mostrara la lista de todos los articulos que tienes en tu Sitio.
Configura tu entorno de desarrollo
Antes de comenzar, necesitarás lo siguiente:
- Un servidor local: Puedes usar herramientas como XAMPP, WAMP o Laragon. Estas te permitiran crear un servidor local con PHP, Base de Datos y un servidor Apache o Nginx segun tu preferencia. Segun tus necesidades puedes elegirentre cualquiera de los dos, pero aqui te dejo una simple descripcion de ambos:
- Que es Apache: Es un servidor web de uso general que es bueno para entornos de alojamiento compartido y contenido dinámico. Es de código abierto, personalizable y se puede utilizar con archivos .htaccess.
- Que es Nginx: Es un servidor web de alto rendimiento que es bueno para contenido estático y sitios web de alto tráfico. Es conocido por su velocidad, flexibilidad y estabilidad. Se puede utilizar como proxy inverso o equilibrador de carga.
- Configuración híbrida: Apache y Nginx se pueden utilizar juntos en una configuración híbrida. En esta configuración, Nginx puede manejar contenido estático y actuar como proxy inverso, mientras que Apache puede manejar contenido dinámico.
- Un editor de código: Visual Studio Code o cualquier editor de tu preferencia.
- WordPress instalado: La manera mas facil de obtener la version mas actuilizada de WordPress, es descargandolo desde el sitio oficial ( wordpress.org ).
Crea los archivos básicos de tu tema
Ahora que tenemos una idea de todo, y tenemos un servidor instalado en nuestra PC, vamos a comenzar.
Lo primero que debes hacer es descomprimir wordpress para tenerlo listo. Una vez listo, debes navegar hasta la carpeta www dentro del servidor (ej: C:/laragon/www
). dentro de esta carpeta, pega la carpeta de wordpress que antes descomprimistes. Lo siguiente sera abrir myPHPAdmin en tu servidor local, y crear una nueva base de datos para tu wordpress. Con esto, ya puedes comenzar a instalar wordpress en tu maquina navegando a http://localhost.../tusitioweb/
on en caso de que este usando laragon vas a poder acceder directamente usando http://tusitioweb.test
.
Una vez tengas instalado wordpress, vamos a comenzer con la creacion del tema clasico. Comienza con abrir Visual Studio Code y vamos a agregar una carpeta dentro de la carpeta de wordpress wp_content/theme. Dentro crearemos los ficheros que necesitas para tu tema.
En el directorio wp-content/themes
del sitio que instalaste, crea una nueva carpeta para tu tema, por ejemplo, mi-tema-clasico
. Dentro de esta carpeta, crea los siguientes archivos:
- style.css:
- index.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('|', true, 'right'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<main>
<h2>Bienvenido a Mi Tema Clásico</h2>
<p>Este es un tema básico para WordPress.</p>
</main>
<?php wp_footer(); ?>
</body>
</html>
Agrega soporte para funcionalidades básicas
Abre el archivo functions.php
y agrega el siguiente código para registrar estilos y scripts:
<?php
function mi_tema_scripts() {
wp_enqueue_style('estilo-principal', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mi_tema_scripts');
Este código asegura que tu archivo style.css
se cargue correctamente.
Personaliza tu tema
Puedes empezar a dividir tu código HTML en archivos específicos como header.php
, footer.php
y sidebar.php
. Por ejemplo:
header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('|', true, 'right'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</header>
footer.php:
<footer>
<p>© <?php echo date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Luego, incluye estos archivos en index.php
con:
<?php get_header(); ?>
<main>
<h2>Contenido principal</h2>
</main>
<?php get_footer(); ?>
Prueba tu tema
- Ve al panel de administración de WordPress.
- Activa tu tema desde Apariencia > Temas.
- Abre tu sitio y verifica que todo funcione correctamente.
Mejora tu tema
Agrega más funcionalidades para personalizar tu tema. Las personalizaciones se haran dentro de una funcion general para el tema. Primero crearemos la funcion:
Funcion principal del tema
Abrimos el fichero functions.php y agregamos las siguientes lineas justo antes de la funcion que creamos antes para encolar el estilo.
<?php
if(!isset($content_width)){
$content_width = 1000;
}
if(!function_exists('mi_sitio_web_setup')){
function mi_sitio_web_setup(){
}
}
add_action('after_setup_theme', 'mi_sitio_web_setup');
Menús de navegación:
Dontro de la funcion, vamos a agregar todas las configuraciones que necesitamos para nuestro tema. En primer paso vamos a agregar los menus que vamos a utilizar. En primer lugar usaremos solo un menu, el menu principal del sitio. Mas adelante, si necesitamos mas menus, podemos agregarlos aqui siguiendo los mismo pasos que aqui se describen.
Primero agregamos register_nav_menus
y ponemos el menu principal. Puedes incluir mas posiciones de menus separandolos con una ‘comma
‘.
<?php
...
register_nav_menus(array(
'menu-principal' => __('Menú Principal', 'mi-sitio-web'),
));
}
add_action('after_setup_theme', 'mi_sitio_web_setup');
...
Lo siguiente es abrir el fichero header.php
e incluir el siguiente codigo wp_nav_menu()
para llamar a este menu y presentarlo en el front-end.
...
</header>
<nav class="menu-principal">
<?php wp_nav_menu([
'theme_location' => 'menu-principal',
'menu_id' => 'menu-principal',
'container' => '',
'fallback_cb' => false,
]); ?>
</nav>
...

El Loop
El loop, va a ser el mecanismo por el cual, wordpress presentara los articulos, paginas y otros contenidos del sitio como, categorias, y mas. El primer loop que vamos a incluir en el tema va a ser el regular que podemos adquirir desde la pagina de desarrolladores de wordpress. Este loop va a presentar un pequeño texto sobre el articulo, un titulo, y la image principal. Mas adelante vamos a mejorar la estructura del loop.
Para agregar el Loop, abre el fichero index.php
, e incluye este codigo dentro de la etiqueta <main>
...
<main>
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( 'Lo siento, no hay articulos en este sitio.', 'mi-sitio-web' );
endif;
</main>

Plantillas adicionales como archive.php
o search.php
.
Tema en desarrollo, esta parte viene en el futuro.
Soporte para widgets
Tema en desarrollo, esta parte viene en el futuro.
Conclusión
Crear un tema clásico en WordPress es una excelente manera de aprender sobre el funcionamiento interno de la plataforma y obtener un sitio personalizado que se adapte perfectamente a tus necesidades. Dedica tiempo a experimentar y añadir funcionalidades adicionales según tus necesidades. ¡Buena suerte en tu viaje como desarrollador de temas!