X

Créer plusieurs sidebar pour WordPress et ses Widgets

WordPress est un CMS très malléable qui vous permet de personnaliser votre site de fond en comble. Cet article porte sur la customisation de la barre de menu latérale (sidebar) mais vous pouvez l’adapter pour créer de nombreuses zones de widgets à travers vos pages.

Tout dépend, à vrai dire, du type de site que vous êtes en train de construire :

  • un blog demandera principalement des widgets en sidebar latérale droite ou gauche
  • un site vitrine pourra demander des widgets dans le footer, dans le header ou à d’autres endroits sur les pages

Le but étant de retrouver dans votre administration (Apparence > Widget) des zones multiples qui se chargeront de personnaliser les différents espaces avec des widgets.

1ère Etape : Functions.php

Il est nécessaire de travailler dans le fichier functions.php de votre thème WordPress. Vous devrez alors renseigner les nouvelles zones de widget comme ceci :

if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'Header',
        'before_widget' => '<div id="header">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name' => 'Footer',
        'before_widget' => '<div id="footer">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}

Comme son nom l’indique register_sidebar va se charger de créer une nouvelle zone avec un tableau contenant diverses informations (le nom de la zone, communément les balises avant le widget ainsi que le titre de celui-ci)

2ème Etape : Ajouter la nouvelle zone widgets à votre thème WordPress

Il vous suffit désormais de choisir l’emplacement de ces nouvelles zones de widget. Par exemple, si vous souhaitez ajouter un widget en footer, modifiez le fichier footer.php du template et ajoutez y le code suivant à l’emplacement souhaité :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : endif; ?>

Et le tour est joué !

3ème Etape : Ajouter de nouveaux widgets à vos nouvelles zones

Il vous reste à glisser déposer les widgets dans vos nouveaux espaces 😉

Yoann :

View Comments (23)

  • bonjour super ce tuto! J'ai enfin réussi! merci merci!
    juste une petite question si on ne veut pas mettre ni en header ni en footer on ajoute à page.php ou index.php??? peut-on choisir la position de la sidebar (une à gauche une à droite par exemple?)
    Merci d'avance!

    • Oui pas de soucis, vous pouvez placer les zones de widgets où bon vous semble. Si vous voulez que ça apparaisse dans la colonne latérale (sidebar), alors il faut utiliser le fichier sidebar.php du thème qui est prévu pour cela.

      Généralement, sidebar.php est appelé aussi bien sur l'index que sur les pages classiques et les articles.

  • Bonjour, pouvez-vous préciser où mettre précisément la dernière ligne de code après avoir suivi toute la procédure? Ma nouvelle sidebar apparaît dans mon dashbord mais je ne parviens pas à l'inclure dans le thème, j'aimerais la mettre de préférence à côté de ma sidebar principale donc dans sidebar.php si j'ai bien compris mais où exactement? Merci

    • Bonjour,

      Il suffit de l'ajouter dans votre fichier sidebar.php là où vous souhaitez qu'elle apparaisse.

      A noter que le code ne permet pas de créer une nouvelle colonne latérale (ce qui se fait en HTML et CSS), il permet simplement d'inclure de nouveaux widgets dans la colonne qui existe déjà.

  • bonjour,
    j'utilise depuis peu wordpress.org et le théme sugar & spice, sur lequel il y a une colonne (sidebar?) latérale à droite. puis je avec ce tuto ajouter une autre colonne à gauche, merci!

    • Bonjour,

      Merci pour votre commentaire, la procédure présentée dans cet article permet seulement d'ajouter des widgets dans une colonne latérale ou tout autre endroit du thème déjà existant. Si vous voulez ajouter une colonne latérale à gauche, il vous faudra modifier le html et le css de votre thème.

  • Super ! Mais je n'arrive pas à activer ma barre latéral ? est ce parce que mon thème ne prend pas de barre sur le côté ? Merci d'avance :)

  • Bonjour une question je souhaite rajouter dans le header deux colonnes comment faire, je n'y arrive pas, merci
    Charles

  • Parfait! J'ai créé 2 sidebars en 15 minutes (en prenant des notes pour la prochaine fois). Maintenant je sais faire, l'explication est claire.
    Merci

    • Je me réponds :)

      En fait si on mets plusieurs widgets dans la sidebar on a div id="header" devant chaque widget. Il vaudrait mieux utiliser div class="header" pour éviter de dupliquer les ID.

  • Bonjour,

    je cherche sur quel fichier php je dois entrer le dernier morceau de code pour créer une nouvelle sidebar entre mon footer et le bloc ou je mets du texte et des photos, en fait c'est le fond du site , le background
    mon thème est "oblique"
    merci d'avance

    • Bonjour Julie,

      Vous pouvez placer ce morceau de code là où vous souhaitez que le widget apparaisse. Si c'est dans une colonne latérale (sidebar en anglais) alors c'est dans le fichier sidebar.php du thème que vous devez placer ce code, si c'est en footer dans footer.php