Jan
18
Blogrolling My Footer
Filed Under Blogging, Tools and Tutorials, Wordpress | 11 Comments
A couple posts ago I wrote about at-a-glance features that help me get a quick sense of what's going on with a blog. For the next few posts I'm going to chip away at adding some of those features to my own blog. My first target will be some sidebar links devoted to comments and commentators. In order to shoehorn them in, more widgety sidebar space will be required. I'll either need a second sidebar or a smaller blogroll.
I don't want a smaller blogroll. I think that having a generous-sized blogroll acts as a resource base for readers and gives insight into my values by showing sites that I admire. If anything, I want room for a bigger blogroll, without losing any more sidebar real estate.
One solution is to move the blogroll into the footer.
Bigger Footers Are On The Rise
- BBC UK Beta has an extended footer area that contains a site-map style directory.
- NetSquared, an entity that helps nonprofits utilize the Internet's community-building power, also uses an extended footer area. NetSquared uses the footer to repeat the header's horizontal top level navigation links, with the addition of sub links. There is no blogroll.
- BloggingExperiment.com also forgoes a blogroll. Blogging Experiment reserves most of the sidebar for ads, using an extended footer for "Recent Comments," "Most Commented," and "Top Commentators."
What I have in mind is a little different. Even when I add advertisements and more "static" content I'll be keeping the blogroll.
Moving my blogroll to a larger footer area won't just open up some sidebar elbow room. It will also give some separation between on- and off-site links, something that may be a kindness to users like myself who are wary of mixed on- and off-site links.
On the other hand, a footer blogroll may not be recognized as a blogroll, because blogrolls are traditionally expected to be vertical and appear in the sidebar. Also, when I see a lot of links in a footer I expect spam. I'll need to make sure that my footer-blogroll is clearly labeled and neatly structured - unlike spam.
Moving a Blogroll From Sidebar to Footer
A trip to the WordPress Codex taught me that there are two non-depreciated template tags that will make a list of blogroll links, get_bookmarks and wp_list_bookmarks.
The template tag get_bookmarks has lots of yummy features that allow the user to retrieve the bookmark information directly. I went with wp_list_bookmarks, because it seemed more convenient to leave categories and whatever up to the various possibilities available at Dashboard > Blogroll. If I want to later, I can change the way my blogroll links are sorted by adding configuration to wp_list_bookmarks.
Using wp_list_bookmarks is as simple as it gets. Pick a place to put it, in my case within footer.php, just above existing footer links. The output will be list items. Surround the list items with ul tags for an unordered list, and assign an ID to the ul for styling the whole kit and kaboodle. I named my ID "blogroll."
<ul id="blogroll"><?php wp_list_bookmarks(); ?></ul>
This is the output:
<ul id="blogroll"> <li id="linkcat-2" class="linkcat"> <h2>Blogroll</h2> <ul> <li><a href="http://www.url.com/">Link</a></li> <li><a href="http://www.url.com/">Link</a></li> <li><a href="http://www.url.com/">LInk</a></li> </ul> </li> </ul>
Styling a Footer Blogroll
In my current theme, applying clear: both to previously existing footer content was the best way to keep my new blogroll container ID from squeezing to one side. Your mileage may vary, depending on how your theme is laid out and your css defined.
I gave the container ul, #blogroll, a width that allows for a little space to the left and right. Floating #blogroll to the left allows however many columns of list items will fit inside to line up next to each other.
#blogroll { width: 760px; float: left; text-align: left;}
Assigning width:100% to #blogroll ul spreads the inner ul to the full width of the outer #blogroll container. Using margin:auto for both left and right margins assures that the left and right margins of #blogroll ul will be the same and meet the outside edges of the 100% width, without needing to apply a specific pixel value.
#blogroll ul { width: 100%; padding: 0; margin: 5px auto; }
Now that we've laid out our containers, applying list-style-type: none to #blogroll li will get rid of the bullet before each list item. Next, give a consistent width to all list items under #blogroll ul li, set them to display: inline and float them to the left.
#blogroll li { list-style-type: none; #blogroll ul li { width: 25%; display: inline; float: left; }
Fine Tuning
I didn't include most padding and margins above because everyone's theme and preference will be a little different. I'll add that using a little margin and padding between the bottom of the blogroll and the top of the footer links will create a natural space for a divider line. I used a two pixel border that is the same color as the border between my sidebar and text content.
Coordinate the look of a footer blogroll with that of sidebar links is a nice touch for headers and links
#blogroll h2 { color : #ce0000; font-size : 1.6em; font-family: Times New Roman, Sans-Serif; font-weight: bold;} #blogroll ul li a { color: #507AA5; text-decoration: none;} #blogroll ul li a:hover { color: #507AA5; text-decoration: underline;}
End result: a pretty new blogroll and lots of wide open side bar. Next up I'll get widgety in my new side bar space.
Tags: 101 Posts
Comments
11 Comments so far
‘Blogrolling My Footer’ – doesn’t that make it a ‘SockRoll’?
For the 99% of visitors who will never make their way that deep in the page – it does require scrolling
– perhaps a ‘Show BlogRoll’ link (with a subsequent ‘Return to Top’ companion) would aid usability.
Some other meandering thoughts:
* Are 15 ‘recent topics’ necessary?
* And where is the list of ‘most popular’? I will happily promote ‘Grown Up Soul For the Inner Child’ with it’s delightful ’search tech stuff makes me horny for communication’ paraphrasing of Gilda Radner.
* how about ‘previous’ and ‘next’ topic links? Make it easy for your fans to read along…
Nitpicking over for now – keep up the good work and great writing.
Well, I started with five recent posts and more enthusiasm for writing about design than making time for design, and then my favorites were going to slip out of view. I upped it to 10, 11, 15…
“Most Popular” is definitely on my to-do list. Also skiplinks, recent comments, images for the blog drawn with my very own colored pencils… As long as I can think up ways to write about it I hope it never ends.
Thank you for coming by and commenting about my sock drawer aka footer. I hope you found something good in there.
‘I hope you found something good in there.’
Not a smelly one in the bunch – although I notice that there is an uneven number of said socks…and a few rather ?vibrant! colours…
Just for you and Adrian Monk, there is now one more sock in the drawer.
I’m even steven.
Elizabeth, how did you put the blogroll in even columns? Is there some PHP code or something else?
Thanks.
Yura, check my CSS example for li width, and you will wonder why you didn’t think of it, or at least that’s how I felt when iamlost helped me see the light.
Hrmm. I wonder if there’s any way to have 4 columns, not have them wrap at each 4th entry. That’d make reading it much simpler.
Yura, do you mean to have the columns be a-z up and down? I don’t know. I suppose you could make four separate categories, one for each column.
The one that I’m curious about using right now is ordering them by what was most recently updated.
Yes, I do mean sort them alphabetically up and down. This problem isn’t WP specific. And creating extra categories isn’t an elegant solution =)
Now that’s a problem to have. I don’t know anything about PHP/WP coding, so I’m afraid I can’t help here.
I don’t “know” PHP/WP coding, but I have been enjoying taking it for a ride now and then. It’s been a fun exploration that will continue. I’m having fun with the outlet of blogging about it here.
Hello, I envy your footer
I tried to copy the code to my theme but it didn’t work out like yours. The blogroll has moved to the footer but I couldn’t find a way to customize it like you did here. My first question is, aside from calling wp_list_bookmarks code, where should I put the other codes? Is it in the footer as well or in the sytle sheet? Sorry I don’t know anything about php coding