Tema clásico 04: header, footer y sidebar bien desacoplados

Construye la estructura base del tema clásico con plantillas parciales reutilizables y puntos de integración correctos de WordPress.

En un tema clásico, header.php, footer.php y sidebar.php marcan la base de todas las vistas: si están mal diseñados, el problema se replica en todo el sitio.

La meta no es solo partir layout, sino crear piezas reutilizables que mantengan consistencia visual y técnica entre plantillas.

También necesitas respetar dos puntos críticos: wp_head() y wp_footer(), porque ahí se inyectan estilos, scripts y hooks de WordPress y plugins.

En esta lección vas a separar correctamente estructura global y contenido variable para evitar duplicación de markup.

  • Cada archivo parcial tiene un objetivo concreto; mezclarlos crea deuda técnica muy rápido.
  • header.php contiene la apertura del documento, branding, navegación principal y llamadas obligatorias de cabecera.
  • footer.php cierra la estructura del sitio y debe incluir wp_footer() justo antes de cerrar body.
  • sidebar.php sirve para zonas complementarias y widgets; no debe contener lógica de negocio compleja.
  • header y footer se cargan con get_header() y get_footer().

Rol de cada parcial del layout

Cada archivo parcial tiene un objetivo concreto; mezclarlos crea deuda técnica muy rápido.

header.php contiene la apertura del documento, branding, navegación principal y llamadas obligatorias de cabecera.

footer.php cierra la estructura del sitio y debe incluir wp_footer() justo antes de cerrar body.

sidebar.php sirve para zonas complementarias y widgets; no debe contener lógica de negocio compleja.

  • header y footer se cargan con get_header() y get_footer().
  • wp_head() y wp_footer() son obligatorios para compatibilidad.
  • Sidebar opcional según plantilla, no forzada en todas las vistas.
  • Menos duplicación de HTML entre page, single y archive.

Estructura base de una plantilla principal

La plantilla principal orquesta parciales y deja el contenido específico en su bloque central.

Sidebar dinámica con fallback

Registra y renderiza widgets con fallback para no dejar huecos rotos cuando no hay contenido.

Registra el área de widgets en functions.php y llama dynamic_sidebar() desde sidebar.php.

Si no hay widgets activos, muestra un fallback simple que mantenga estructura visual estable.

Este patrón evita dependencias ocultas y mejora la experiencia durante el desarrollo inicial del tema.

WordPress Themes Pro
14

Tema clásico 04: header, footer y sidebar bien desacoplados

Construye la estructura base del tema clásico con plantillas parciales reutilizables y puntos de integración correctos de WordPress.

Código del tema: get_sidebar

📘 Teoría

🧪 Aprende probando

🏁 Retos

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .