Développeur web & bien plus encore

WordpressCréer plusieurs sidebar pour WordPress et ses Widgets

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 😉

  • Fab

    Bonjour,

    votre article est très intéressant!!
    Etant débutant, je souhaiterai savoir à quel endroit précisément je dois mettre ces différentes lignes dans les fichiers que vous avez précisé?
    je vous remercie d’avance,

    Fab

    • sanctius

      Salut Fab, le code de la première étape est à simplement recopier dans le fichier functions.php qui se trouve dans ton thème WordPress. Ensuite si tu souhaites rajouter une sidebar (par exemple), il faut que tu ouvres le fichier sidebar.php de ton thème également et que tu y colles le code de la 2ème étape là où tu souhaites que cette barre latérale apparaissent, si tu souhaites que cette nouvelle sidebar s’affichent tout en bas il faut coller le code à la fin du fichier. 😉

  • Caro

    Bonjour,

    Merci pour votre code qui parait très simple et fonctionne parfaitement quand je suis dans mon thème parent « twenty twelve » mais impossible de le faire fonctionner dans mon thème enfant. Je copie la fonction dans mon function.php et rien n’apparait dans l’interface d’admin. Du coup si je laisse dans le fichier function.php de twentytwelve et que je fais une mise à jour de ce dernier, je perdrais mes widgets ?

    • Yoann

      Bonjour Caro, je n’ai hélas pas testé les fonctions widget pour des thèmes enfants, le mieux est de tester (et étant la date de votre commentaire, c’est surement ce que vous avez fait)

  • Pingback: wordpress | Pearltrees()

  • Elodie P

    Merci beaucoup ! Ca fonctionne très bien !

  • Adamas8

    Bonjour, ce tuto est il toujours d’actualité?
    En effet, j’ai suivi ces instructions, mais mes nouveaux espaces ne sont pas disponibles dans l’administration de mon site. Ai-je fait une erreur?

    Je vous remercie par avance de votre réponse.

    • Yoann

      Bonjour Adamas8, oui cette manipulation est toujours d’actualité (je l’ai retesté ce week-end)

      Veillez à vérifier que le nom de la fonction est bien la même dans sa déclaration et dans son affichage.

  • Djésia

    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!

    • Yoann

      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.

  • Anna

    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

    • Yoann

      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à.

  • amandine

    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!

    • Yoann

      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.

  • Jérémie

    Merci pour ce tuto, sidebar ajoutée à gauche !

  • F@llisme

    Merci le tuto est simple, clair, et concis avec beaucoup de richesse j’aime ça thanks.

  • MESC

    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 🙂

  • Charles

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

  • grokiki

    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

    • grokiki

      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.

  • Julie Ma

    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

    • Yoann

      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