Blogrolling My Footer

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.