La inspiración para este tutorial viene de un tuit que recibí con comentarios para el tema RS12 que pronto saldrá a la venta.
Aunque el pie de página con widgets no se incluyó finalmente en la versión del tema RS12, decidí escribir este tutorial para mostrar a la gente cómo añadir exactamente un pie de página con widgets en tu tema. En esta guía, aprenderás:
- El código HTML y CSS necesario para producir el pie de página widgetizado
- Cómo añadir etiquetas de plantilla de WordPress de uso común como marcadores de posición
- Cómo widgetizar el pie de página y colocar widgets en su interior
Va a haber mucho código en este post, así que si te apetece, sigue leyendo…
Usaré el tema de WordPress Green Rays como ejemplo en este tutorial. Por el momento, el pie de página sólo tiene un mensaje estándar de “copyright” y créditos.
El HTML
El primer paso es añadir el código HTML. Digamos que vamos a tener tres secciones diferentes en el widgetized footer con listas de Most Recent Posts, Monthly Archives, y Daily Archives. Colocaremos este código HTML encima de la línea “copyright” actual.
<div class="footer-item">
<h3>Publicaciones recientes</h3>
<ul>
<li><a href='#' title='Post destacado'>Post destacado</a></li>
<li><a href='#' title='Citas en bloque'>Citas en bloque</a></li>
<li><a href='#' title='Cómo funciona la etiqueta 'más'>Cómo funciona la etiqueta 'más'</a></li>
<li><a href='#' title='Ordenar o desordenar'>Ordenar o desordenar</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archivos del mes</h3>
<ul>
<li><a href='#' title='Marzo 2008'>Marzo 2008</a></li>
<li><a href='#' title='febrero 2008'>febrero 2008</a></li>
<li><a href='#' title='Enero 2008'>Enero 2008</a></li>
<li><a href='#' title='Diciembre 2007'>Diciembre 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archivos diarios</h3>
<ul>
<li><a href='#' title='7 de marzo de 2008'>7 de marzo de 2008</a></li>
<li><a href='#' title='9 de febrero de 2008'>9 de febrero de 2008</a></li>
<li><a href='#' title='4 de enero de 2008'>4 de enero de 2008</a></li>
<li><a href='#' title='22 de diciembre de 2007'>22 de diciembre de 2007</a></li>
</ul>
</div>
<div class="clear"></div>
Básicamente este código pone cada “widget” en un div. Dentro de cada widget hay un encabezado y una lista desordenada con enlaces. Sí, ya sé que los enlaces no van a ninguna parte. Más tarde reemplazaremos esto con etiquetas de plantilla de WordPress. Esto es lo que tenemos hasta ahora:
El CSS
Como puedes ver, esto no se ve tan bien sin ningún estilo CSS. Añade el siguiente código a tu hoja de estilos.
.footer-item {
float: left;
anchura: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}
Lo que hace este código es flotar cada elemento de pie de página a la izquierda, lo que básicamente significa que pueden estar uno al lado del otro. El ancho se establece en 33%, lo que da suficiente espacio para tres elementos de pie de página en una sola fila. También hay un poco de relleno añadido debajo de cada elemento de pie de página. La segunda pieza es sólo el relleno de las listas de 15 píxeles a la izquierda.
Ahora puedes ver que el HTML y el CSS están empezando a encajar. Esto es lo que deberías tener hasta ahora:
Código WordPress
Por el momento, tenemos un montón de enlaces HTML vacíos, sin código real de WordPress. Reemplacemos las listas de Entradas Recientes, Archivos Mensuales y Archivos Diarios con las etiquetas de plantilla equivalentes de WordPress. Reemplace lo que tiene actualmente con lo siguiente:
<div class="footer-item">
<h3>Publicaciones recientes</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Archivos del mes</h3>
<ul>
<?php wp_get_archives('limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Archivos diarios</h3>
<ul>
<?php wp_get_archives('type=daily&limit=4'); ?>
</ul>
</div>
Los parámetros deberían ser bastante autoexplicativos, pero si no estás seguro de alguno de ellos, intenta buscar wp_get_archives en la herramienta de búsqueda de etiquetas de plantillas de WordPress. Recuerde, sólo estoy usando las etiquetas de plantilla wp_get_archives() como marcador de posición. Las cambiaremos por otros widgets de WordPress más adelante, después de widgetizar el pie de página.
Widgetízalo
Para esta sección del tutorial, tomaré prestadas algunas partes de mi tutorial anterior sobre widgetización de temas.
El primer paso es registrar las “barras laterales”. Para hacer esto, simplemente reemplace el contenido actual del archivo functions.php con lo siguiente:
<?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' => 'Pie de página',
'before_widget' => '<div class="footer-item">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
Ahora iremos a sidebar.php y sustituiremos la etiqueta condicional de la barra lateral dinámica actual por esto:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
Con esto:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) : ?>
Ahora vamos a ir a nuestro archivo footer.php y envolver los elementos de pie de página en su propia etiqueta condicional respectiva barra lateral. Justo antes del primer div “sidebar-item”, añade lo siguiente.
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>
Justo después del último div “footer-item” de cierre (y encima del div “clear” que hemos añadido antes) añadiremos lo siguiente:
<?php endif; ?>
Bien, ahora nuestra barra lateral y pie de página deberían estar widgetizados. Vamos a probarlo añadiendo algunos widgets en el pie de página. Añadiré un widget de Blogroll, un widget de Comentarios recientes y un widget de texto. Esto es lo que debería parecer:
Conclusión
Bueno, esto es lo básico para añadir un pie de página con widgets a tu tema. Puede que quieras añadir reglas de estilo separadas para otros tipos de widgets como el calendario o la caja de búsqueda. Esto probablemente no funcionará con todos los temas, como el tema RS12 por ejemplo, ya que tenía un pie de página no expandible.
Si por casualidad alguien quiere el tema actualizado de Green Rays, puede descargarlo aquí. De esta manera se puede ver dónde exactamente he añadido el código. También se puede comparar con el tema original.
Espero que os haya gustado el tutorial. ¿Vas a añadir un pie de página con widgets a tu tema? ¿Hay algo en el código que usé arriba que harías diferente? Preguntas, comentarios, sugerencias y críticas son bienvenidas, así que siéntete libre de opinar en los comentarios.
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.