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

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 .

Benjamin Denis
Publié le Mis à jour il y a 3 ans 53 commentaires
Par Benjamin Denis

Benjamin Denis est le fondateur de l’extension de référencement freemium SEOPress.

Ces tutoriels devraient vous intéresser…
53 commentaires
  1. 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. 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. Aurélien Denis

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

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

    1. 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. 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. 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. 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. piclem

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

    1. Aurélien Denis

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

  10. ludovicaptel

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

  11. 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. 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. Blanche

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

  14. 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. 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. 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. 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. 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. Aurélien Denis

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

  17. 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. 6ril

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

  18. 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. 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. Aurélien Denis

      En utilisant ce tutoriel bien évidemment ! 😉

  20. 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. Aurélien Denis

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

  21. 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. 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. gwen

        merci pour ton aide..

  22. gwen

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

    1. Aurélien Denis

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

  23. Romain Guitard

    mince cette fonction ?php get_sidebar(); ?

    1. 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. 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. Romain Guitard

    bonjour,

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

    Exemple

    1. Aurélien Denis

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

  26. 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. 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. Benjamin Denis

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

  29. NoireôNaturel

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

  30. 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. 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. 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. 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. said026

    Merci pour ce tutoriel rainbow

  35. 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. Benjamin Denis

      @Thierry Roget : Pas de quoi 🙂

Les commentaires sont fermés.