Footer personnalisable sur wordpress

Pourquoi personnaliser le footer de son site ?

Votre footer ne vous plait pas! Si la ou les licences de votre thème wordpress vous permettent de retravailler les codes sources afin de les adapter à vos besoins. Les étapes ci-dessous vous permettrons d’ajouter certaines informations.
C’est à dire :

  • Ajouter des liens vers certaines pages (contact, mentions légales, plan du site, …)
  • Ajouter les boutons des médias sociaux (facebook/twitter/google)
  • Ajouter un texte pour présenter rapidement le site
  • Ajouter des widgets configurables dans la partie administration

Etape 1 : Repérer les fichiers à modifier

Suivant le thème qui vous utilisez, vous aurez plus ou moins la même configuration, à savoir, les fichiers suivants:

  • footer.php > Fichier contenant tout se qui sera afficher dans le pied de page
  • function.php > Fichier répertoriant certaines configurations du thème
  • styles.css > Fichier contenant le css de votre thème

Etape 2 : Ajouter 3 widgets personnalisables

Dans « footer.php », là où commence votre pied de page, ajoutez:

<div class="footer-scoco">
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f1'); ?>
  </ul>
  </div>
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f2'); ?>
  </ul>
  </div>
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f3'); ?>
  </ul>
  </div>
  <div style="clear:both;float:none;"></div>
</div>

Dans « style.css », à la fin, ajouter :

Adaptez le css à votre thème

/* styles.css > apparence du footer */
.footer-widget-scoco{width: 33%;float:left;} 
.footer-widget-scoco h2{margin: 0;}
.footer-widget-scoco ul{list-style: none;margin: 0;padding: 0;}
.footer-widget-scoco li{list-style: none;margin: 0;padding: 0;}

Dans « function.php », ajouter :

register_sidebar(array(
  'name'=>'widget-f1',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));
register_sidebar(array(
  'name'=>'widget-f2',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));
register_sidebar(array(
  'name'=>'widget-f3',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));

Etape 3 : Remplissez vos widgets !

Si il vous manque des informations, n’hésitez pas à me contacter. J’améliorerai cet article par la suite.

  • Coralie

    Merci pour le tuto ! J’ai cependant une question, comment fait on pour changer le footer selon la langue ? Mon footer est en Français pour mes versions française, anglaise et espagnole…

    • Je pense qu’il faudrait faire autant de footer que de langages proposés sur votre site et mettre un petit algo dans votre bas de page du genre.

      SI Languechoisie = FR j’affiche FooterFR
      SI Languechoisie = EN j’affiche FooterEN
      SI Languechoisie = SP j’affiche FooterSP

      Sinon si vous utilisez WPML (plugin multilangue), ceci pourrait peut etre vous aider https://wpml.org/forums/topic/create-custom-language-switcher-in-header-and-footer/

  • Merci pour ce tuto j en avais justement besoin pour personnaliser le footer sur le site d un client ….

    Clément tu vas bien ….superbe photos sur ton site web….

  • Manou

    Bonjour,
    Je souhaiterai que mes widget du footer s’alignent horizontalement, et non pas verticalement.
    Pouvez-vous m’aider ? Bonne semaine

  • Bonjour,
    J’ai appliqué à la lettre le tuto, ça avait fonctionné, et j’ai voulu ajouter une troisième colonne au footer, et depuis plus accès à mon site et au BO, c’est une page blanche…
    Est ce que quelqu’un peut m’aider ? Je ne sais pas du tout comment faire …

    Merci d’avance pour votre aide

  • Benoit

    J’adore ! MERCI 🙂
    Testé sous WordPress dernière version 4.5.
    Je sens que je vais utiliser le concept pour simplifier la gestion des zones du template directement dans l’admin de WP
    TOP

  • Amélyah.B

    C’est-à-dire, remplissez vos widgets ? Je ne comprends pas (oui, je suis novice en la matière ^^)
    Un exemple ne serait pas de refus svp

    Merci

    • Bonjour,

      Remplissez vos widgets => Mettre le ou les widgets dans la zone créée sur http://www.votresite.fr/wp-admin/widgets.php

      • Amélyah.B

        est-ce vous pourriez être plus précis car je suis un peu en difficulté

        Il faut que j’ouvre le fichier widget.php ? Quelles lignes dois-je modifier et par quoi ?

        • Amélyah.B

          En fait, c’est bon je viens de comprendre ^^
          auf que maintenant le problème, c’est que les widgets apparaissent à la ligne, et mois je voudrais qu’ils soient plutôt en colonne (comme des boîtes quoi, avec 1 widget pour une boîte)

      • Sami

        tu ne résouds pas le problème la on a plus accès au wordpress comment faire pour changer la parenthèse

  • Fritzinger

    Bonjour,
    j’ai entré les modifications sur mon site, problème : je n’ai plus accès à rien ! Lorsque je charges les pages admin ou le site tout seul rien ne charges. Comment faire ??
    En attende de votre réponse.

    • Bonjour,

      « Je n’ai plus accès à rien » => Genre une page blanche ?
      C’est surement une parenthèse ou une erreur de code quelque part qui bloque tout.

      Tenez vous courant

      • Véronique

        Bonjour,

        Idem pour moi, mon site ne s’affiche plus ! « Erreur serveur »
        Merci de votre aide.

        • Léa

          Bonjour,
          Comment avez vous résolu le problème ?
          Mon site a sauté aussi et je ne sais pas comment faire pour le récupérer

      • Gilbert

        Moi aussi ca marque : Parse error: syntax error, unexpected ‘=>’ (T_DOUBLE_ARROW) in (site blabla..) on line 131.
        Il y a absolument plus rien qui ne marche, merci

        • Bonjour,

          Je pense qu’il faut regarder du coté des tableaux (array) dans function.php, il y a une erreur de syntaxe quelque part.

  • sabrina

    Bonjour je souhaite ajouter un footer a mon thème wordpress mais impossible
    pouvez vous m’aider svp?

  • Thomas

    Attention : pour appliquer la méthode sur les thèmes enfants, il s’agit du fichier functions.php, avec un « s » final. Sinon ça ne marche pas.

    • Thomas

      j’ajoute : merci pour le tuto 😉

  • Bonjour, je souhaiterai mettre cinq widgets, mais je ne sais pas comment faire? Peux tu m’aider s’il te plait?
    Merci d’avance.

    • Bonjour,

      Il suffit de dupliquer 2 fois cette partie de code en renommant en f4 puis f5

      et celle ci également en renommant en f4 puis f5
      register_sidebar( … );

      Scoco

  • axel

    Bonjour je cherche à modifier le footer de mon site.
    J’utilise comme thème Twenty TEN.
    Dans ce footer je voudrais ajouter l’accès aux pages mentions légales et contact.
    J’ai lu vos explications, mais je ne vois pas comment ajouter tout ça.
    Existe t’il un moyen, type pluging extension permettant de réaliser cette opération.
    Avez vous un exemple sur ce sujet.
    Les widgets -F1 -f2 -f3, vont ‘ils apparaître lorsque l’on utilisation la modifcation du menu apparence?
    Cordialement

  • Bonjour, je souhaite mettre un slider (instagram) en bas de mmon blog dans le footer mais le thème choisi (sparklin) propose 3 zones alors que je voudrais que le wiget prenne toute la largeur. Pouvez vous m’aider ? (j’ai regarder votre note sur le fichier footer mais c’est également pour 3 zones) merci

  • merci pour ce superbe tuto complet en bien écrit …j ai pu ajouter l adresse de mon site web en bas du site d un de mes clients .

  • Merci pour ce superbe tutoriel

  • Coucou,
    Merci encore pour ce tutoriel, j’ai réussi à personnaliser ce que je voulais !! 🙂
    Je vais voir pour modifier le CSS maintenant car j’aimerais y mettre un fond etc…

  • merci, très intéressant pour faire un plan de site web

  • Hervé Vit Là

    bonjour,

    c’est bien des codes pour un thème enfant et non un thème parent?
    Merci

    • Ces codes là sont plus pour des thèmes enfants que parent cependant, il est possible d’y apporter quelque modifications pour qu’il soit exploitable avec un theme parent.

      • Hervé Vit Là

        bonjour,
        merci de la réponse, je posais la question pour un thème enfant comme cela n’est pas préciser dans l’article, je voulais être sûr.
        Twenty Fourteen a des widgets dans le footer d’origine, pourquoi rajouter ce code?
        Merci

        • Au moment où j’ai rédigé cet article j’utilisais un thème simple et léger trouvé sur le web.

          • Hervé Vit Là

            merci, Fourteen est bien dommage qu’avec un écran en haute résolution, il soit collé à gauche de l’écran, et non centré.

  • Florian Duplan

    Bonjour,
    premièrement, merci pour ce bout de code, j’ai cependant un problème. Je travail sur un thème enfant dans lequel j’ai insérer les différents codes si dessus. Lorsque je suis dans la gestion des widgets, je vois que f2 et f3, y-a t’il une raison ?
    Par contre en ajoutant une 2nde fois f1, les 3 widgets apparaissent.
    Merci de votre lecture.

  • Pit38©

    J’ai essayé de coller ton code (étape 2) dans mon footer, mais cela n’a rien donné.
    Peux tu préciser à quel endroit dois je le faire stp ?

    • Chaque thème est différent. essayes de le mettre juste avant < ?php wp_footer(); ?>

      Test différents endroits et adaptes les code à ta convenance.

    • Lyn

      Je confirme j’ai testé à plusieurs endroits dans footer.php et cela n’a rien donné