Tema clásico 07: menús y widgets con arquitectura limpia

Configura navegación y sidebars dinámicas en un tema clásico con registros correctos, fallback y marcado mantenible.

Menús y widgets son piezas clave en temas clásicos porque conectan la estructura del diseño con el contenido editable por usuario.

Si los registras sin criterio, acabarás con ubicaciones duplicadas, sidebars ambiguas y comportamiento inconsistente entre plantillas.

La práctica profesional es definir ubicaciones claras, renderizar con fallback y mantener clases CSS predecibles.

También debes pensar en accesibilidad: navegación semántica, etiquetas legibles y estados vacíos útiles cuando falta configuración.

  • Todo comienza en functions.php con identificadores estables y nombres claros para administración.
  • Registra menús en after_setup_theme para que WordPress conozca posiciones como primary o footer.
  • Registra sidebars en widgets_init y define before_widget/before_title para controlar markup consistente.
  • Usa IDs descriptivos, porque luego serán la referencia en plantillas y CSS del tema.
  • Si el cliente no asigna menú todavía, tu plantilla no debe romper navegación.

Registrar ubicaciones de menú y áreas de widgets

Todo comienza en functions.php con identificadores estables y nombres claros para administración.

Registra menús en after_setup_theme para que WordPress conozca posiciones como primary o footer.

Registra sidebars en widgets_init y define before_widget/before_title para controlar markup consistente.

Usa IDs descriptivos, porque luego serán la referencia en plantillas y CSS del tema.

Renderizar menús con fallback seguro

Si el cliente no asigna menú todavía, tu plantilla no debe romper navegación.

wp_nav_menu permite renderizar ubicación específica y controlar contenedor, clases y profundidad.

Añade fallback_cb para mostrar lista de páginas o un mensaje de ayuda durante configuración inicial.

Mantén class names coherentes para que cabecera y footer compartan estrategia CSS sin duplicar estilos.

Sidebar dinámica con estado vacío

Un sidebar vacío sin fallback genera huecos visuales y confusión en QA.

Llama dynamic_sidebar con el id registrado y muestra contenido alternativo cuando no hay widgets activos.

Este fallback puede incluir texto de ayuda o enlaces básicos para evitar una columna completamente vacía.

Cuando uses varias sidebars, define qué plantillas usan cada una para no mezclar contextos de contenido.

WordPress Themes Pro
17

Tema clásico 07: menús y widgets con arquitectura limpia

Configura navegación y sidebars dinámicas en un tema clásico con registros correctos, fallback y marcado mantenible.

Código del tema: register_sidebar

📘 Teoría

Registrar ubicaciones de menú y áreas de widgets

Todo comienza en functions.php con identificadores estables y nombres claros para administración.

1

Registra menús en after_setup_theme para que WordPress conozca posiciones como primary o footer.

2

Registra sidebars en widgets_init y define before_widget/before_title para controlar markup consistente.

3

Usa IDs descriptivos, porque luego serán la referencia en plantillas y CSS del tema.

Renderizar menús con fallback seguro

Si el cliente no asigna menú todavía, tu plantilla no debe romper navegación.

1

wp_nav_menu permite renderizar ubicación específica y controlar contenedor, clases y profundidad.

2

Añade fallback_cb para mostrar lista de páginas o un mensaje de ayuda durante configuración inicial.

3

Mantén class names coherentes para que cabecera y footer compartan estrategia CSS sin duplicar estilos.

Sidebar dinámica con estado vacío

Un sidebar vacío sin fallback genera huecos visuales y confusión en QA.

1

Llama dynamic_sidebar con el id registrado y muestra contenido alternativo cuando no hay widgets activos.

2

Este fallback puede incluir texto de ayuda o enlaces básicos para evitar una columna completamente vacía.

3

Cuando uses varias sidebars, define qué plantillas usan cada una para no mezclar contextos de contenido.

🧪 Aprende probando

🏁 Retos

Reto Reto: completar registro de sidebar Añade id y wrappers de título al bloque de register_sidebar.

🧰 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. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com