Créer une sidebar widgétisée avec WordPress

Mis à jour le :

La plupart des thèmes WordPress dispose d’une ou plusieurs sidebars (barres latérales) widgétisées – c’est à dire, que vous pouvez la modifier en y ajoutant des gadgets via le menu Widgets de WordPress, et ce très facilement.

Alors plutôt que de changer votre thème graphique pour un autre dit widgétisé, lisez la suite de l’article pour pallier votre problème.

Commencez par ouvrir le fichier contenant votre sidebar. En général, il se nomme sidebar.php ou second.php. Puis, ajoutez cette ligne de code à l’emplacement de votre choix.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?>

Ensuite, il nous faut déclarer en quelque sorte notre sidebar widgétisée dans le fichier functions.php. Si ce dernier n’existe pas, créez-le. Ajoutez-y ces lignes de code :

<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>

Vous remarquerez que notre barre latérale widgétisée s’appelle ici Sidebar mais vous pouvez l’appeler comme bon vous semble. Toutefois, si vous souhaitez la nommer autrement, n’oubliez pas de modifier son nom dans les deux morceaux de code précédemment utilisés.

Quelques explications sur ces lignes de code :

  • 'before_widget' et 'after_widget' : permettent d’encadrer votre sidebar d’une balise div pour la styliser ;
  • 'before_title' et 'after_title' : permettent d’appliquer un style aux différents intitulés de vos widgets (par exemple, articles récents ou articles populaires) ;

Sauvegardez vos modifications puis rendez-vous sur la page Widgets où vous devriez voir apparaître dans une liste déroulante le nom de votre sidebar. Il ne vous reste plus qu’à y ajouter des widgets.

Notez que vous pouvez créer autant d’emplacements widgétisés que vous nécessaire en prenant soin de les nommer différemment. De plus, tout emplacement de votre site peut widgétisé comme le pied de page.

Liste déroulante des sidebars disponibles
Liste déroulante des sidebars disponibles

Désormais, vous n’aurez plus à vous soucier de savoir si le thème est widgétisé ou non .

Avatar de Benjamin Denis

Protégez votre site WordPress

Vos données sont précieuses,
ne prenez pas le risque de tout perdre.
Confiez-moi votre maintenance !

Ces articles devraient t’intéresser…

53 réponses
  1. Avatar de Gotz
    Gotz

    Bonjour,
    Merci pour le tuto ça fonctionne bien, les widgets sont à ajouter dans Apparence / Widgets avant de pouvoir les customiser.
    Du coup ça me disait « Votre thème possède 1 zone de widget mais cette page particulière ne les affiche pas. » quand je voulais personnaliser les widgets de mon thème directement.

  2. Avatar de Boris
    Boris

    Parse error: syntax error, unexpected ‘<' in /htdocs/wp-content/themes/clean-commerce/functions.php on line 169
    apres modification du code voici ce qu'affiche mon site…aidez moi svp

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Sans doute que votre balise PHP était déjà ouverte, retirez-là à l’aide de votre éditeur de code favori.

  3. Avatar de CHRISTELLE
    CHRISTELLE

    Bonjour !

    J’ai créé un site sous WordPress.
    J’ai voulu rajouter la barre latérale.
    J’ai réussi la première étape (dans sidebar.php).
    J’ai suivi la seconde (functions.php), sauf que…
    ça a planté le site !

    ça me donne ça, sur une page blanche : « Parse error: syntax error, unexpected end of file in /wp-content/plugins/sidebar-manager-light/include/otw_functions.php on line 204 »

    si vous voulez jeter un coup d’œil : RETIRE PAR MODERATEUR

    Je ne peux plus du tout me connecter, ni accéder aux différentes adresses du site… Est-il irrécupérable ?
    Merci d’avance !

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Bonjour,

      en cas de plantage, il suffit de retirer la portion de code insérée via un éditeur de code. Ne jamais intervenir via l’interface d’administration de WordPress. Ici, le plugin Sidebar Manager Light semble poser soucis.

  4. Avatar de guillaume
    guillaume

    Bonjour,

    je souhaite ajouter un bouton dans le sid bar de mon site (thee :’ »twenty fiftenn »), j’ai essayé le plugin « Buttons Shortcode and Widget plugin » mais ça ne fonctionne pas…
    Pouvez vous svp lm’aider ?

    merci beaucoup

    Guillaume

  5. Avatar de Cécile
    Cécile

    Bonjour,
    Le thème que j’ai mis en place sur wordpress (Garfunkel), ne contient pas de sidebar. Est-ce que je peux utiliser ce tuto pour en créer une de toute pièce ? ( à noter qu’il y a quand même un fichier sidebar.php avec des ligne de code qui sont relative à des footers).

    Merci par avance.

    Cécile

  6. Avatar de smailassia
    smailassia

    Bonjour, j’arrive pas a modifier le sidebar des pages web car je ne veux pas que toute les pages auront le même sidebar, j’ai suivi ce tutoriel http://forum.alsacreations.com/topic-4-68347-1-Resolu-Theme-Wordpress-mettre-du-css-dans-les-pages.html mais j’ai pas arrivé, plus précisement j’utilise le thème vantage quelqu’un de vous pourra m’aider?
    Cordialement

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Si vous souhaitez une sidebar différente en fonction d’un contenu, il va falloir développer ou avoir recours à des plugins qui gèrent des sidebars conditionelles.

  7. Avatar de antoine18
    antoine18

    Bonjour,

    J’ai suivi toutes les instructions ci-dessus et, au moment d’enregistrer les modifications, une page blanche s’est affichée. Depuis je n’ai plus du tout accès à mon site, tout a disparu. Pouvez-vous m’aider svp, j’ai pourtant suivi les instruction du tuto à la lettre mais là je stress un peu…
    Merci d’avance!

  8. Avatar de Davoult
    Davoult

    Salut,
    J’ai bien suivi ton tutoet merci.
    MAIS j’ai un problème.
    la slidebar apparaît bien dans la page Apparence -> widgets,
    mais aucunement sur mon site.
    Sais-tu pourquoi ?
    D’avance, je te remercie.

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Sans doute que la fonction PHP get_sidebar ne doit pas être insérée dans le bon fichier du thème.

  9. Avatar de piclem
    piclem

    Moi j’ai ce message qui apparait : «There Is No Sidebar Widgets Yet»

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Comme indiqué, il faut en ajouter via Apparence > Widgets. 😉

  10. Avatar de ludovicaptel
    ludovicaptel

    c’est nickel, moi qui suis encore novice, ça a marché nikel dans ma heatbar!!!!!

  11. Avatar de Anice
    Anice

    Slt, j’utilise cette méthode sur a peu près tous les sites web que je conçois, c’est vrai que c’est assez manuel mais bon du moment que sa marche ;).
    Juste sur le premier code il y a un « deux points (:) » en lieu et place du « point virgule (;) » d’où le « parse error ».

  12. Avatar de Benoit
    Benoit

    Bonjour,

    Merci beaucoup pour ce tutoriel. Je chercher à améliorer ma sidebar afin que les différents widgets apparaissent encadrer et pas simplement les en dessus des autres sans séparation comme actuellement sur mon site. Y a t il un moyen?

    Merci par avance

  13. Avatar de Blanche
    Blanche

    Tutoriel très clair qui se suffit à lui-même. Un sans faute. Merci pour le coup de main.

  14. Avatar de Cyril
    Cyril

    Bonjour,

    J’ai suivi parfaitement le tutoriel, cependant une erreur apparait à la place du widget :
    Parse error: syntax error, unexpected $end in /homez.548/squareki/www/wp-content/themes/swedish-greys 3/sidebar.php on line 35

    cordialement

  15. Avatar de howen_greed
    howen_greed

    Bonjour,

    Je suis scrupuleusement ce tuto et je bloque à la dernière étape qui est l’apparition de la top bar sur le site.

    Avez déjà eu un problème que la sidebar refuse de s’afficher malgré son appel dans le header.php

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Non tu dois forcément avoir une erreur… vérifies ton code à l’aide de Firebug pour voir si l’élément se charge ou pas.

      1. Avatar de howen_greed
        howen_greed

        Je vous remercie d’avoir prit le temps de répondre à ma requête et il se trouve que j’ai bien commis une erreur sur l’appel de la fonction.

        Cordialement.

        thanks

  16. Avatar de Alex
    Alex

    Il me semble qu’il y a une erreur à la fin de la ligne
    et qu’il faut mettre un point virgule à la place des deux points. Je me trompe ?

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Non mais il faut clore le tout par <?php endif; ?> si utilises cette première ligne. 😉

  17. Avatar de 6ril
    6ril

    Salut,
    pareil pour le parse error, en fait ça vient de là où l’on met: dans la page sidebar.php, d’ailleurs tu n’as pas de , c’est normal ?

    Alors, où exactement mettre cette ligne de code php, sachant que j’utilise le même thème que toi (twenty eleven) ?

    Merci d’avance.

    1. Avatar de 6ril
      6ril

      je parle de la ligne de code php :
      if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Sidebar’) ) :

  18. Avatar de Stef
    Stef

    merci pour ce tuto,
    je m’en mêle les pates

    je souhaite ajouter une sidebar widjetable dans la header :
    Comment faire appel de la sidebar (sidebar-header.php) dans la header ?

    Dans header.php :

    dans sidebar-header.php :

    dans fuctions.php :
    ‘header’,
    ‘before_widget’ =>  »,
    ‘after_widget’ =>  »,
    ‘before_title’ =>  »,
    ‘after_title’ =>  »,
    ));
    ?>

    merci de votre aide !

  19. Avatar de zazou
    zazou

    Bonjour,

    J’ai une question qui vous paraîtra peut-être étrange, mais je souhaitais savoir s’il serait possible d’ajouter à ma page d’accueil une colonne widgétisée à droite? Si oui, savez-vous comment je dois procéder? Merci beaucoup d’avance!

    1. Avatar de Aurélien Denis
      Aurélien Denis

      En utilisant ce tutoriel bien évidemment ! 😉

  20. Avatar de tyler_durden
    tyler_durden

    J’ai exactement le même problème que certains, à savoir : Pour ma part ça ne marche pas :« Parse error: parse error in … » qui apparait à la place de mon sidebar.
    En fait, ceci apparait suite au 1er code à rentrer dans le sidebar.php

    Quelqu’un a t-il trouvé la solution ? car du coup, j’ai les widgets qui apparaissent bien, mais mon sidebar est vide (dans « apparences » et « widgets »). Merci.

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Essaie de remplacer le premier code par <?php get_sidebar(); ?>. 😉

  21. Avatar de gwen
    gwen

    En fin de compte le premier script (<?php if ( !function_exists('dynamic_sidebar')…) est déjà dans mon thème et en ajoutant un s, et en mettant un 2:
    ‘Sidebar’,
    j’ arrive à faire apparaitre la sidebar dans les widgets, mais elle n’ apparait pas dans mon blog..

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Je ne peux pas faire de dépannage sur-mesure faute de temps et parce que je ne pourrais aider tout le monde mais ton problème d’alignement doit pouvoir se régler via une propriété float:right à basculer sur float:left dans ton CSS. 😉

      1. Avatar de gwen
        gwen

        merci pour ton aide..

  22. Avatar de gwen
    gwen

    Bonjour, comment choisir de mettre à gauche ou à droite?

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Cela dépend directement de ton thème et donc de la feuille de styles CSS.

      1. Avatar de gwen
        gwen

        je voudrais l mettre à gauche de ce thème: http://themes.weboy.org/flying-colors/

  23. Avatar de Romain Guitard
    Romain Guitard

    mince cette fonction ?php get_sidebar(); ?

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Il te faut créer un fichier qui va reprendre le nom de ta sidebar – par exemple, sidebar-test.php.

      Ensuite, appelles celle-ci avec la commande

      <?php if ( function_exists ('register_sidebar')) {
      register_sidebar ('test');
      } ?>

      Remarques le nom de la sidebar dans la ligne de code. Il te faut également l’ajouter dans le functions.php. 😉

  24. Avatar de Romain Guitard
    Romain Guitard

    d’accord en fait l’exemple, ne s’est pas affiché
    en fait si je crée une nouvelle sidebar en plus de celle qui existe déjà et que je l’inclue avec cette fonction <q cite=" »> il m’inclut l’ancienne…

    Alors comment créer une fonction pour inclure la nouvelle sidebar?

  25. Avatar de Romain Guitard
    Romain Guitard

    bonjour,

    comment créer une sidebar widgetisée aditionelle que l’on pourrait placer oú l’on veut?

    Exemple

    1. Avatar de Aurélien Denis
      Aurélien Denis

      En répétant les étapes du tutoriel, cela devrait fonctionner. 🙂

  26. Avatar de Benjamin Denis
    Benjamin Denis

    @letthemusicplay @Bingo : Bonjour,

    quelle version de WP utilisez vous ? Votre fichier functions.php est-il vide, ou que contient t-il ?

    Pour répondre plus facilement, il serait préférable d’ouvrir un topic sur le forum notamment pour partager du code.

    Merci 😉

  27. Avatar de LetTheMusicPlay
    LetTheMusicPlay

    Bonjour à tous !!

    Pour ma part même erreur que pour « BingoBingo » qui est un « Parse error: parse error in … » après avoir suivit le tuto…!

  28. Avatar de Benjamin Denis
    Benjamin Denis

    @NoireôNaturel : heu tu as uploadé les fichiers vers ton hébergeur ?

  29. Avatar de NoireôNaturel
    NoireôNaturel

    Je viens de télécharger Notepad, mais toujours pas de widget 🙁

  30. Avatar de NoireôNaturel
    NoireôNaturel

    Bonjour,

    Je suis bloggeuse depuis peu et je débute, j’ai créér mon blog récemment mais dans le thème que j’ai choisi, je n’ai aucun widget ce qui est tout à fait problématique, je ne peux pas faire ce que je veux et c’est problématique. J’ai suivi vos instructions, j’ai ouvert les deux documents .php, j’y ai fait les modifications et je les ai enregistrés sour Wordpad, était ce la bonne chose à faire. En tt cas, cela ne fonctionne pas, toujours pas de widget !!!! Aidez-moi, svp, c’est tellement frustrant !!! Mille merci par avance !!!

    Karambole

  31. Avatar de Aurélien Denis
    Aurélien Denis

    @Bingo : pour résoudre ce genre de problème particulier, le mieux est que tu t’inscrives sur le forum. Tu pourras facilement copier / coller des bouts de code si besoin est. 😉

  32. Avatar de Benjamin Denis
    Benjamin Denis

    @Bingo : cela vient sûrement du fichier functions.php. Je pense que ton fichier n’est pas vide, n’est ce pas ?

    A mon avis, tu as dû ajouter le code à l’intérieur d’un autre morceau de code.

    Indiques moi un lien vers ton fichier et je regarderai pour voir. 😉

  33. Avatar de Bingo
    Bingo

    Pour ma part ça ne marche pas :/
    J’ai l’erreur suivante « Parse error: parse error in … »

    Si quelqu’un a une idée, je suis preneur 🙂

    Merci !

  34. Avatar de said026
    said026

    Merci pour ce tutoriel rainbow

  35. Avatar de Thierry Roget
    Thierry Roget

    Bonjour, je viens de widgetisez mon footer en suivant scrupuleusement ton tuto, j’ai réussi sans problème,
    Merci de cet information
    Thierry

    1. Avatar de Benjamin Denis
      Benjamin Denis

      @Thierry Roget : Pas de quoi 🙂