Sidebar et menus

Les menus de navigation

WordPress permet de créer des menus gérables depuis l'administration (Apparence → Menus). Pour qu'ils soient disponibles dans le thème, tu dois d'abord enregistrer des emplacements dans functions.php.

Enregistrer les emplacements (functions.php)

functions.php

add_action( 'after_setup_theme', 'montheme_setup' );

function montheme_setup() {

  register_nav_menus( [
    'primary' => __( 'Menu principal', 'montheme' ),
    'footer'  => __( 'Menu pied de page', 'montheme' ),
  ] );

}

Les clés ('primary', 'footer') sont les identifiants techniques. Les valeurs sont les noms affichés dans l'administration.

Afficher un menu (header.php)

header.php

<nav class="main-nav">
  <?php
    wp_nav_menu( [
      'theme_location' => 'primary',   // emplacement enregistré
      'container'      => 'div',         // balise conteneur (false = aucune)
      'container_class'=> 'nav-wrapper', // classe du conteneur
      'menu_class'     => 'nav-list',    // classe de <ul>
      'depth'          => 2,             // niveaux de sous-menus
      'fallback_cb'    => false,         // pas de fallback si menu non assigné
    ] );
  ?>
</nav>

theme_location doit correspondre exactement à la clé enregistrée avec register_nav_menus(). C'est ce qui relie l'emplacement du code au menu configuré dans l'admin.

💡

fallback_cb => false empêche WordPress d'afficher la liste de toutes les pages si aucun menu n'est assigné à cet emplacement. Recommandé pour éviter les affichages non désirés.

Les sidebars (zones de widgets)

Une sidebar WordPress est une zone de widgets — une zone de l'interface que l'utilisateur peut remplir avec des blocs (recherche, articles récents, widget personnalisé…) depuis Apparence → Widgets.

Enregistrer une sidebar (functions.php)

functions.php

add_action( 'widgets_init', 'montheme_register_sidebars' );

function montheme_register_sidebars() {

  register_sidebar( [
    'name'          => __( 'Sidebar principale', 'montheme' ),
    'id'            => 'sidebar-1',
    'description'   => __( 'Colonne latérale des articles', 'montheme' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ] );

}

before_widget et after_widget enveloppent chaque widget. before_title et after_title enveloppent le titre de chaque widget.

Afficher la sidebar (sidebar.php)

sidebar.php

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
  <aside class="sidebar">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  </aside>
<?php endif; ?>

is_active_sidebar() vérifie que la sidebar contient au moins un widget avant d'afficher la balise <aside>. Sinon la colonne latérale serait vide mais occuperait quand même de la place.

Inclure la sidebar dans un template

single.php

<?php get_header(); ?>

<div class="content-wrapper">

  <main class="site-main">
    <!-- ... boucle ... -->
  </main>

  <?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Le CSS en CSS Grid ou Flexbox positionne ensuite .content-wrapper en layout deux colonnes.

⚠️

Le hook widgets_init est utilisé pour register_sidebar(), pas after_setup_theme. Cette distinction est importante — utiliser le mauvais hook peut entraîner des sidebars non disponibles dans l'admin.

// à retenir

register_nav_menus() dans after_setup_theme — déclare les emplacements de menus
wp_nav_menu(['theme_location' => 'primary']) — affiche le menu dans le template
register_sidebar() dans widgets_init — déclare une zone de widgets
is_active_sidebar() avant dynamic_sidebar() — évite d'afficher une sidebar vide
get_sidebar() dans un template — inclut sidebar.php