¿En qué hook se suele registrar una sidebar en tema clásico?

widgets_init es el hook adecuado para registrar sidebars y áreas de widgets.

WordPress Themes Pro

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.

¿Cuánto sabes de WordPress Themes Pro?

📘 Teoría

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.

Registro base en functions.php

<?php
add_action('after_setup_theme', function () {
  register_nav_menus([
    'primary' => __('Menú principal', 'mi-tema-clasico'),
    'footer' => __('Menú de pie', 'mi-tema-clasico'),
  ]);
});

add_action('widgets_init', function () {
  register_sidebar([
    'name' => __('Sidebar principal', 'mi-tema-clasico'),
    'id' => 'sidebar-primary',
    'before_widget' => '<section class="widget">',
    'after_widget' => '</section>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
  ]);
});

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.

Navegación principal en header.php

<nav class="site-nav" aria-label="Navegación principal">
  <?php
  wp_nav_menu([
    'theme_location' => 'primary',
    'menu_class' => 'site-nav__list',
    'container' => false,
    'fallback_cb' => 'wp_page_menu',
  ]);
  ?>
</nav>

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.

sidebar.php recomendado

<?php if (is_active_sidebar('sidebar-primary')) : ?>
  <aside class="sidebar">
    <?php dynamic_sidebar('sidebar-primary'); ?>
  </aside>
<?php else : ?>
  <aside class="sidebar">
    <p><?php echo esc_html__('Añade widgets en Apariencia > Widgets.', 'mi-tema-clasico'); ?></p>
  </aside>
<?php endif; ?>

1 Registrar ubicaciones de menú y áreas de widgets 2 Renderizar menús con fallback seguro 3 Sidebar dinámica con estado vacío

🧪 Aprende probando

🏁 Retos

🧰 Recursos

Enlaces útiles

Navigation Menus Sidebar wp_nav_menu() register_sidebar()

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

Recursos del curso 30

📘 Glosario 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces

‹

Lección 16

Tema clásico 06: jerarquía de plantillas aplicada al día a día

Lección 18

Tema clásico 08: Customizer avanzado con ajustes seguros

›