Creación de temas WordPress desde cero: estructura, templates y hooks
Construir un tema de WordPress desde cero te da control total sobre el diseño, el rendimiento y la arquitectura de tu sitio. En esta guía verás la estructura mínima, la jerarquía de plantillas, cómo registrar assets y los hooks esenciales (actions & filters) para extender funcionalidades.
Estructura mínima de un tema
mi-tema/
├─ style.css
├─ functions.php
├─ index.php
├─ screenshot.png
└─ /templates (opcional)
Encabezado obligatorio en style.css
/*
Theme Name: Mi Tema
Theme URI: https://ejemplo.com
Author: Tu Nombre
Description: Tema base desde cero.
Version: 1.0.0
Text Domain: mi-tema
*/
Archivo functions.php: inicialización del tema
<?php
// Soportes del tema (miniaturas, título, HTML5, etc.)
add_action('after_setup_theme', function () {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('html5', ['search-form','comment-form','gallery','caption']);
register_nav_menus([
'primary' => __('Menú principal', 'mi-tema'),
]);
});
// Registrar y encolar estilos/scripts
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('mi-tema', get_stylesheet_uri(), [], '1.0.0');
wp_enqueue_script('mi-tema', get_template_directory_uri() . '/assets/app.js', [], '1.0.0', true);
});
Plantillas base y jerarquía
La jerarquía de plantillas define qué archivo usa WordPress según el tipo de contenido:
front-page.php→ Portada estática.home.php→ Blog/entradas.single.php/single-{post_type}.php→ Entrada o CPT.page.php→ Páginas.archive.php,category.php,tag.php→ Archivos.search.php,404.php→ Búsqueda y errores.index.php→ Fallback obligatorio.
Estructura típica de layout
Divide la salida en header.php, footer.php y sidebar.php para reutilizar.
<!-- index.php -->
<?php get_header(); ?>
<main id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; else : ?>
<p>No hay contenido.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>
Template Parts y funciones útiles
get_template_part('parts/card', 'post')para fragmentos reutilizables.wp_nav_menu(['theme_location' => 'primary'])para menús.the_post_thumbnail('large')para imágenes destacadas.
Hooks: actions y filters esenciales
Los hooks permiten ejecutar lógica en puntos concretos del ciclo de WordPress.
Actions (ejecutar código)
<?php
// Agrega una clase al <body> según condición
add_filter('body_class', function($classes){
if (is_single()) $classes[] = 'is-single';
return $classes;
});
Filters (alterar valores)
<?php
// Cambiar el "read more" del extracto
add_filter('excerpt_more', fn() => ' …');
add_filter('excerpt_length', fn($l) => 24);
Custom Post Types (CPT) y taxonomías
<?php
add_action('init', function () {
register_post_type('proyecto', [
'label' => 'Proyectos',
'public' => true,
'menu_icon' => 'dashicons-portfolio',
'supports' => ['title','editor','thumbnail','excerpt'],
'has_archive' => true,
'rewrite' => ['slug' => 'proyectos'],
]);
});
Temas de bloques y theme.json (moderno)
Desde WordPress 5.9+ puedes definir estilos globales y soportes con theme.json.
{
"version": 2,
"settings": {
"color": { "palette": [{ "slug":"brand","color":"#4f46e5","name":"Brand" }] },
"typography": { "fontFamilies": [{ "slug":"inter","fontFamily":"Inter, system-ui" }] }
},
"styles": {
"color": { "text": "#111827", "background": "#ffffff" },
"typography": { "fontSize": "16px", "lineHeight": "1.6" }
}
}
Buenas prácticas
- Seguridad y rendimiento: escapa/sanea datos (
esc_html,wp_kses), usawp_enqueue_*, evita consultas pesadas. - I18n: prepara traducciones con
__()y_e()+Text Domain. - Accesibilidad: usa etiquetas semánticas, roles ARIA y contraste adecuado.
- Compatibilidad: prueba con Gutenberg y widgets, define
add_theme_supportsegún lo necesario. - Child theme: cuando edites un tema de terceros, crea un child para mantener actualizaciones seguras.
Checklist rápido
- ✓
style.csscon encabezado y estilos base. - ✓
functions.phpcon soportes, menús y assets encolados. - ✓ Plantillas clave:
index.php,single.php,page.php,archive.php,404.php. - ✓ Partes de plantilla reutilizables y lazos del Loop bien estructurados.
- ✓ Hooks para personalizar y
theme.jsonsi usas bloques.
Conclusión
Crear un tema de WordPress desde cero te permite construir sitios rápidos, accesibles y escalables. Domina la jerarquía de plantillas, aprovecha los hooks y organiza un código limpio para desarrollar con calidad profesional.
👉 ¿Quieres que diseñemos y desarrollemos tu tema WordPress a medida (rápido y SEO-friendly)?
Contáctanos aquí.
