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 .

51 commentaires

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

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

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

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

  5. 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?

    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.

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

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

  8. 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!

  9. 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 !

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

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

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

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

  14. 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 ».

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

  16. 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!

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

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

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

Laisser un commentaire