L’inspiration pour ce tutoriel vient d’un tweet que j’ai reçu avec des commentaires sur le thème RS12 qui sera bientôt publié.
Bien que le pied de page widgétisé n’ait finalement pas été intégré à la version du thème RS12, j’ai décidé d’écrire ce tutoriel pour montrer aux gens comment ajouter un pied de page widgétisé dans votre thème. Dans ce guide, vous apprendrez :
- Le code HTML et CSS nécessaire pour produire le pied de page widgétisé
- Comment ajouter des balises de template WordPress couramment utilisées comme placeholders
- Comment widgetiser le pied de page et placer des widgets à l’intérieur de celui-ci
Il va y avoir beaucoup de code dans cet article, alors si vous êtes prêt à le faire, lisez la suite…
J’utiliserai le thème WordPress Green Rays comme exemple dans ce tutoriel. Pour l’instant, le pied de page ne contient qu’un message standard de “copyright” et des crédits.
Le code HTML
La première étape consiste à ajouter le code HTML. Disons que nous allons avoir trois sections différentes dans le pied de page widgétisé avec des listes d’articles les plus récents, d’archives mensuelles et d’archives quotidiennes. Nous placerons ce code HTML au-dessus de la ligne “copyright” actuelle.
<div class="footer-item">
<h3>Articles récents</h3>
<ul>
<li><a href='#' title='Featured post'>Featured post</a></li>
<li><a href='#' title='Blockquotes'>Blockquotes</a></li>
<li><a href='#' title='How the 'more' tag works'>How the 'more' tag works</a></li>
<li><a href='#' title='Order or Unorder'>Order or Unorder</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archives mensuelles</h3>
<ul>
<li><a href='#' title='March 2008'>March 2008</a></li>
<li><a href='#' title='February 2008'>February 2008</a></li>
<li><a href='#' title='January 2008'>January 2008</a></li>
<li><a href='#' title='December 2007'>December 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archives quotidiennes</h3>
<ul>
<li><a href='#' title='March 7, 2008'>March 7, 2008</a></li>
<li><a href='#' title='9 février 2008'>9 février 2008</a></li>
<li><a href='#' title='January 4, 2008'>January 4, 2008</a></li>
<li><a href='#' title='December 22, 2007'>December 22, 2007</a></li>
</ul>
</div>
<div class="clear"></div>
Ce code place chaque “widget” dans une div. A l’intérieur de chaque widget se trouve un titre et une liste non ordonnée avec des liens. Oui, je sais que les liens ne vont nulle part. Nous les remplacerons plus tard par des balises de modèle WordPress. Voici ce que nous avons pour l’instant :
Le CSS
Comme vous pouvez le voir, ce n’est pas très joli sans un style CSS. Ajoutez le code suivant à votre feuille de style.
.footer-item {
float : left ;
width : 33% ;
padding-bottom : 10px ;
}
.footer-item ul {
padding-left : 15px ;
}
Ce code permet de faire flotter chaque élément de pied de page à gauche, ce qui signifie qu’ils peuvent être placés côte à côte. La largeur est fixée à 33 %, ce qui laisse suffisamment de place pour trois éléments de pied de page sur une seule ligne. Un peu de rembourrage est également ajouté sous chaque élément de pied de page. Le deuxième élément consiste simplement à placer les listes 15 pixels à gauche.
Vous pouvez maintenant voir que le HTML et le CSS commencent à s’assembler. Voici ce que vous devriez avoir jusqu’à présent :
Code WordPress
Pour l’instant, nous avons un tas de liens HTML vides, sans aucun code WordPress. Remplaçons les listes des articles récents, des archives mensuelles et des archives quotidiennes par les équivalents des balises du modèle WordPress. Remplacez ce que vous avez actuellement par ce qui suit :
<div class="footer-item">
<h3>Articles récents</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=4') ; ?>
</ul>
</div>
<div class="footer-item">
<h3>Archives mensuelles</h3>
<ul>
<?php wp_get_archives('limit=4') ; ?>
</ul>
</div>
<div class="footer-item">
<h3>Archives quotidiennes</h3>
<ul>
<?php wp_get_archives('type=daily&limit=4') ; ?>
</ul>
</div>
Les paramètres devraient être assez explicites, mais si vous n’êtes pas sûr de l’un d’entre eux, essayez de chercher wp_get_archives dans l’outil de recherche des balises de template de WordPress. N’oubliez pas que j’utilise les balises de template wp_get_archives() à titre indicatif. Nous les remplacerons par d’autres widgets WordPress plus tard, après avoir widgétisé le pied de page.
Widgetize It
Pour cette section du tutoriel, je vais emprunter des parties de mon précédent tutoriel sur les thèmes de widgetisation.
La première étape consiste à enregistrer les “sidebars”. Pour ce faire, il suffit de remplacer le contenu actuel du fichier functions.php par ce qui suit :
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div class="sidebaritem">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
)) ;
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '<div class="footer-item">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
)) ;
?>
Nous allons maintenant aller dans sidebar.php et remplacer la balise conditionnelle dynamique actuelle de la barre latérale par ceci :
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
Avec ceci :
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) : ?>
Maintenant, nous allons aller dans notre fichier footer.php et envelopper les éléments du pied de page dans leur propre balise conditionnelle sidebar. Juste avant la première div “sidebar-item”, ajoutez ce qui suit.
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>
Juste après la dernière div “footer-item” (et au-dessus de la div “clear” que nous avons ajoutée plus tôt), nous ajouterons ce qui suit :
<?php endif ; ?>
Bon, maintenant notre barre latérale et notre pied de page devraient être widgetisés. Testons-le en ajoutant quelques widgets dans le pied de page. J’ajouterai un widget Blogroll, un widget Commentaires récents et un widget texte. Voici à quoi cela devrait ressembler :
Conclusion
Voilà pour les bases de l’ajout d’un pied de page widgétisé à votre thème. Vous pouvez ajouter des règles de style distinctes pour d’autres types de widgets tels que le calendrier ou la boîte de recherche. Cela ne fonctionnera probablement pas avec tous les thèmes, comme le thème RS12 par exemple, qui avait un pied de page non extensible.
Si par hasard quelqu’un veut le thème Green Rays mis à jour, vous pouvez le télécharger ici. Vous pourrez ainsi voir où j’ai ajouté le code exactement. Vous pouvez également le comparer avec le thème original.
J’espère que ce tutoriel vous a plu. Allez-vous ajouter un pied de page widgetisé à votre thème ? Y a-t-il quelque chose dans le code que j’ai utilisé ci-dessus que vous feriez différemment ? Les questions, commentaires, suggestions et critiques sont tous les bienvenus, alors n’hésitez pas à vous exprimer dans les commentaires.
Leland,
Here’s the pastebin link for my functions.php file. I posted it sans your alteration. Your help is appreciated.
http://pastebin.com/m40073591
“I too am trying to widgetize my footer using your step, but when I add the code to the functions.php, I keep getting the same error message:
Parse error: syntax error, unexpected ‘}’ in /home/………..redacted………/functions.php on line 230
I’m sure this means I just have a ‘}” out of place, but removing it doesn’t seem to work. Help?”
I am experiencing the same problems. Could you offer some advice?
Thanks,
Dave
did you ever figure that out? I’m also having the same problem but it happened when I changed my sidebar.php code.
how did you fix it?
I’m running 2 sidebars thus I have 2 sidebar.php files. I tried reverting the code to its original state but no dice. I guess I’ll have to upload my backup php file, but that will not solve the problem, it will only let me continue working on my site.
if there’s any advice, I’d appreciate it.
thanks
Stumbled across this by accident – great tutorial in terms of both content and writing style – well done.
This tutorial rocks my world! I have not seen such a thorough explanation of how to do this. I am in the process of creating a new look for my blog and wow…this is totally what I needed. Thank You so much!!
[…] Add a Widgetized Footer to Your WordPress Theme | Theme Lab (tags: wordpress tutorial footer CSS) […]
@Lance: It would depend on the theme, but it would be somewhere within the “footer” div (whatever it may be called).
It looks like the footer on your site has a fixed height, so you’d probably have to fix that before using this code.
Hi – Thanks for this turorial but I’m confused. Where do I put the HTML code that you have at the beginning?
I have the css and the footer files and I know I can put the code in there. But where does the actual HTML code go?
[…] box, custom archive and search templates, an options page, and four widgetized areas (including a widgetized footer). These features will be gone over […]
@Terri: No problem! Nice widgetized footer, by the way. 🙂
yyyyes! Thank you!
@Hannah: Yes, that’s what it means. Although it’s kind of hard for me to diagnose the problem if I can’t see the exact code. Could you possibly paste the code of your current functions.php file to some sort of pastebin? Something like http://pastebin.com – thanks!
Great tutorial! I’m trying to widgetize my footer using your step, but when I add the code to the functions.php, I keep getting the error message:
Parse error: syntax error, unexpected ‘}’ in /home/………..redacted………/functions.php on line 230
I’m sure this means I just have a ‘}” out of place, but removing it doesn’t seem to work. Help?
[…] found a nice tutorial on how to add widgets to the footer of a theme. Widget aren’t just for the sidebar […]
@ezg: Ah…well glad it worked out for you.
@Jeffro: Thanks, appreciate the stumble, and glad you liked the tutorial.
I’ve been waiting for a post like this for a long time now. I figured it out on my own but it’s always nice to have a reference to fall back on. I submitted this puppy to StumbleUpon 🙂
[…] Add a Widgetized Footer to Your WordPress Theme | Theme Lab (tags: wordpress) […]
[…] domain ), uploaded the new theme, and started making my tweaks to it. The biggest thing I did was add a chunky widgetized footer. You can do the same using the linked tutorial from Leland at Theme Lab. Mostly I wanted to make […]
[…] Add a Widgetized Footer to Your WordPress Theme – who says widgets are just for sidebars? I’ve seen them used in plenty of other places, including footers, which is exactly what you’ll learn to do in this tutorial. [Link] […]
[…] http://www.themelab.com/2009/04/25/add-a-widgetized-footer-to-your-wordpress-theme/ […]
You didn’t see it, cause I’m not using it now. But when I turned it on, it really looked like great. Later, when I will think about what widgets to use I’ll turn it on.
@ezg: Nice! Just wondering, which blog did you use it on? I checked the URL you used to comment here, but didn’t see the widgetized footer.
I used your tutorial in my blog. It looks really cool.
Thanks for your lesson. 🙂
@sriganesh: Sounds good, let me know how it works out for you.
thanks. iam using now elegant theme.which i won in contest. see my theme footer.. thanks alot. , i mini problem-i added my flickr photos. but its irregularly arranged.like other professional site with border, i cant align it. can u help me in this. past three months i tried my own and added codings but nothing happen.
[…] HTML or for a content management system (CMS)? Depending on your skill Add A Widgetized Footer to Your WordPress Theme – themelab.com 04/25/2009 The inspiration for this tutorial comes from a tweet I received with […]
nice tutorial, i’ll try this, cos i need something like that. visit my site. i like to have same as it mentioned here.
Don’t get me wrong, I love the tutorial and all…but to be completely honest, I feel you kind of hoed us out…like we want to know how YOU did YOUR header you know? This is no personal attack, but I just feel a little jipped getting a measly boring text footer….
If you could please, tell us how you did YOURS, that’d be great. And not just throw in “put your image behind it…” I mean how youuuuu did it for real. Thanks….
I did all of what you said and I don’t know how to “drag” the widgets…? I don’t see anywhere to drag them to….
You do that in your WordPress admin panel on the widget page. By “dragging” I just mean putting the widgets in the various widgetized areas.
Sorry you feel “hoed out” but I wanted to write a tutorial that could apply to almost any kind of theme.
FYI, I don’t even use any WordPress widgets in the footer and header of this site, they’re hardcoded.
I’m not sure how much more detailed he could have been. If you’re a web designer and have an idea of what wordpress is, they you would know how to get the rest accomplished. His tutorial was perfect.