¿Quieres aprender a crear un tema WordPress desde cero? En esta guía te explicamos paso a paso cómo construir tu propia plantilla personalizada, comprender su estructura interna y adaptarla a tus necesidades de diseño o desarrollo. Esta es una habilidad muy valorada para desarrolladores, freelancers y profesionales del diseño web.
Por qué crear tu propio tema WordPress
WordPress ofrece miles de temas gratuitos y premium, pero desarrollar uno propio te permite:
- Tener control total sobre el diseño y funcionalidades
- Optimizar el rendimiento según tus necesidades
- Aprender a fondo cómo funciona WordPress
- Crear una solución personalizada para clientes
Además, al desarrollar desde cero, podrás implementar prácticas de desarrollo modernas, integrar herramientas externas o usar frameworks CSS como Tailwind o Bootstrap. Así, tu tema será mucho más flexible y escalable.
Requisitos previos para crear tema WordPress personalizado
Antes de empezar, necesitas cumplir algunos requisitos fundamentales:
- Conocimientos básicos de HTML, CSS y PHP
- Tener un entorno de desarrollo local (como XAMPP, MAMP o LocalWP)
- Instalar WordPress en local para hacer pruebas
- Contar con un editor de código como Visual Studio Code o Sublime Text
Contar con estas herramientas facilitará todo el proceso y te permitirá trabajar con mayor fluidez y seguridad.
Estructura de carpetas de un tema WordPress desde cero
Para crear un tema WordPress desde cero, los archivos básicos indispensables son:
mi-tema/
├── style.css
├── index.php
├── functions.phpstyle.css – Declaración del tema
Es el archivo que define el nombre del tema y sus metadatos. Debe comenzar con:
/*
Theme Name: Mi Tema
Author: Tu Nombre
Description: Tema personalizado para WordPress
Version: 1.0
*/Este archivo también puede incluir estilos CSS globales o importar archivos desde otras carpetas, como assets/css/estilos.css para una estructura más organizada.
index.php – Plantilla principal
Es el archivo principal de plantilla. WordPress lo utiliza como fallback si no existen otras plantillas específicas (como single.php o page.php). Aquí puedes definir una estructura HTML básica:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title('<h2>', '</h2>');
the_content();
endwhile;
else :
echo '<p>No se encontraron publicaciones.</p>';
endif;
?>
</main>
<?php get_footer(); ?>functions.php – Funcionalidad del tema WordPress
Sirve para añadir funcionalidades al tema como menús, scripts, estilos, widgets, etc.
<?php
function mitema_scripts() {
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_script('main-js', get_template_directory_uri() . '/assets/js/main.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'mitema_scripts');
function mitema_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
register_nav_menus(array(
'main_menu' => 'Menú Principal'
));
}
add_action('after_setup_theme', 'mitema_setup');
?>Archivos comunes para tu tema WordPress desde cero
A medida que desarrollas tu plantilla personalizada, puedes (y debes) incluir archivos que modularicen tu código. Estos son los más comunes y sus respectivos ejemplos:
header.php – Cabecera global del sitio
Contiene el encabezado del sitio, con la apertura del documento HTML, scripts iniciales y navegación principal. Suele usarse en todas las páginas para mantener coherencia.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<nav><?php wp_nav_menu(array('theme_location' => 'main_menu')); ?></nav>
</header>footer.php – Pie de página del tema WordPress
Incluye el cierre del cuerpo del sitio, scripts adicionales y el pie de página. Se usa justo antes del cierre de </body>.
<footer>
<p>© <?php echo date('Y'); ?> - Mi Tema</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>single.php – Entradas individuales
Plantilla para mostrar una entrada del blog. Ideal para mostrar contenido con imagen destacada y comentarios.
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title('<h1>', '</h1>');
the_post_thumbnail();
the_content();
comments_template();
endwhile;
endif;
?>
</main>
<?php get_footer(); ?>page.php – Plantilla para páginas
Muy similar a single.php pero pensada para páginas estáticas, sin incluir comentarios.
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title('<h1>', '</h1>');
the_content();
endwhile;
endif;
?>
</main>
<?php get_footer(); ?>sidebar.php – Widgets y menús laterales
Te permite mostrar contenido adicional como widgets o menús en una barra lateral.
<aside class="sidebar">
<?php if ( is_active_sidebar('main-sidebar') ) : ?>
<?php dynamic_sidebar('main-sidebar'); ?>
<?php endif; ?>
</aside>404.php – Página de error personalizada
Muestra un mensaje amigable cuando el usuario accede a una URL inexistente.
<?php get_header(); ?>
<main>
<h1>404 - Página no encontrada</h1>
<p>Lo sentimos, la página que buscas no existe.</p>
<a href="<?php echo home_url(); ?>">Volver al inicio</a>
</main>
<?php get_footer(); ?>archive.php – Archivos por fecha o autor
Es útil para mostrar listas de publicaciones por mes, autor, o tipo de contenido personalizado.
<?php get_header(); ?>
<main>
<h1><?php the_archive_title(); ?></h1>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
echo '<article>';
the_title('<h2><a href="' . get_permalink() . '">', '</a></h2>');
the_excerpt();
echo '</article>';
endwhile;
else :
echo '<p>No hay publicaciones en este archivo.</p>';
endif;
?>
</main>
<?php get_footer(); ?>category.php – Plantilla para categorías específicas
Permite mostrar entradas de una categoría concreta, con posibilidad de personalizar el diseño de cada una.
<?php get_header(); ?>
<main>
<h1>Categoría: <?php single_cat_title(); ?></h1>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
echo '<article>';
the_title('<h2><a href="' . get_permalink() . '">', '</a></h2>');
the_excerpt();
echo '</article>';
endwhile;
else :
echo '<p>No hay publicaciones en esta categoría.</p>';
endif;
?>
</main>
<?php get_footer(); ?>Estas plantillas siguen la jerarquía de WordPress y te permiten personalizar cada aspecto del sitio de manera flexible.
Cómo activar tu tema personalizado
- Guarda todos los archivos en una carpeta dentro de
/wp-content/themes/mi-tema - Ve al panel de WordPress > Apariencia > Temas
- Activa tu nuevo tema
Si todo está correcto, tu sitio web ya funcionará con el tema recién creado.
Buenas prácticas al crear tema WordPress
- Usa funciones nativas de WordPress como
the_title(),the_content(),wp_head()ywp_footer()para garantizar compatibilidad. - Escapa y sanitiza los datos con funciones como
esc_html(),esc_url()owp_kses(). - Usa comentarios en el código para facilitar futuras modificaciones.
- Implementa una estructura de carpetas organizada:
/assets/css/,/assets/js/,/template-parts/. - Usa
get_template_part()para reutilizar bloques como cards, loops o bloques de contenido. - Haz que tu tema sea responsive desde el principio usando CSS flexible o frameworks modernos.
Conclusión
Crear un tema WordPress desde cero es una excelente forma de mejorar tus habilidades en desarrollo web. No solo aprenderás cómo está construido un CMS por dentro, sino que también podrás ofrecer soluciones únicas y completamente adaptadas a cada proyecto.
¿Te gustaría que prepare una guía para convertirlo en un tema responsive o compatible con WooCommerce? ¡Cuéntamelo en los comentarios!
