How To Make Fat Footers In Thesis

Photo by Mr. Right-Click. Feet by Mini, circa 6 months.

If you’ve been on the main site of ABDPBT recently, you might have noticed a few changes. That’s right: I’m redesigning this site again. Maybe someday I’ll get it to the point where this site does everything I want it to do and looks exactly how I want it to look, but I tend to doubt it. In the meantime, come, benefit from my constant futzing with stuff to make it look different. Today, we’re going to talk about how to make fat footers in Thesis.

What is a fat footer? Well, basically, it’s just a footer that’s big enough to allow the addition of some more information. I’ve had fat footers for a while now, but recently updated them. Here’s what you want to do to get some exactly like mine.

First, put this into your custom_functions.php file. This is the stuff that will provide the basic structure of your fat footer, provided you want it to look exactly like mine:

function footer_scripts() { ?>
  <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
  <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURTWITTERNAMEHERE.json?callback=twitterCallback2&count=2"></script>
<?php }
add_action('thesis_hook_after_html', 'footer_scripts');

function custom_footer() { ?>
  <div id="footer_1" class="sidebar">
    <ul class="sidebar_list">
      <li class="widget">
<h3>about</h3>
        <div id="about_div"><img src="http://abdpbt.com/wp-content/themes/thesis-15/custom/images/about.png"><p>THIS IS MY BLOG. WHY DON'T YOU READ IT. Then check out<a href="/about/">my about page</a>.</p></div></p>
      </li>
<li class="widget">
<h3>currently . . .</h3>
<div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul><a href="http://www.twitter.com/YOURTWITTERNAMEhere"><h4>follow me on twitter</h4></a></div>
      </li>

<li class=widget>
<div id="copyright_div">
<h3>Etc.</h3>
<p>All content copyright &copy; YEAR by YOUR NAME for YOUR WEBSITE and licensed for reuse under <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">Creative Commons BY-NC-SA 3.00</a>. All other rights reserved.</p> <p>Page design is a customization of the Thesis theme for Wordpress.</p></div></li>
</ul>  
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');

You can customize the above code by putting in your own website information, and changing the copyright information as needed. You can also put in a different widget altogether for one or all of the sections. For example, if we wanted to feature a “recent posts” widget instead of the twitter division, we would take out this:

<li class="widget">
<h3>currently . . .</h3>
<div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul><a href="http://www.twitter.com/YOURTWITTERNAMEhere"><h4>follow me on twitter</h4></a></div>
      </li>

and replace it with this:
<?php thesis_widget_recent_posts('', 'Recent Posts', '6'); ?>

That would give you a recent post list with six items. If you wanted more (or less) you would just change the number. Similarly, if you wanted to put in a tag cloud, take out one of the widgets above and replace it with this:

<li class="widget">
      <h3>Tags</h3>
        <?php wp_tag_cloud(''); ?>
      </li>

All of this preceding stuff provides the *structure only* of your new fat footers. To get them to look exactly how you want them to look, you will also have to change the CSS. Here’s what I have added to my custom.css file to get my fat footers the way I want them:

/* footer */

/* follow me on twitter box */
.custom #twitter_div {
padding:0.425em; 
border:none;
}
  
.custom #twitter_div img {
float:right;
}

/* other footer box styles */

.custom #footer {
padding-bottom:0em;
padding-top:2em;
padding-left:0em;
padding-right:0em;
border-top:0px double #DDDDDD;
}

.custom #footer p {
font-size:1.0em; 
line-height:1.3em;
}

.custom #footer li.widget p {
margin-bottom:1em; 
}

.custom #footer_1 {
text-align:left; 
color:#ffffff;
}
  
.custom #footer_1 ul.sidebar_list li.widget {
width:30%; 
margin-right:3%; 
float:left;
}

    
.custom #footer_1 ul.sidebar_list li.widget h3 {
color:#ffffff;
}
    
.custom #footer_1 ul.sidebar_list li.widget a {
color:#ffffff; 
border-bottom:0;
}

    
.custom #footer_1 ul.sidebar_list li.widget a:hover {
color:#b20c0c;
}

/* copyright info in footer */

.custom #copyright_div {
padding:0.425em;
border:none;
}

.custom #copyright_div img {
float:right;
}

/* about me box in footer */

.custom #about_div {
padding:0.425em;
border:none;
background:#888888;
}

.custom #about_div img {
float:left; 
padding-right:1em;
}

.custom #footer_area {
background:#888888; 
}

.custom #footer {
border-top:0;
}

.custom #footer_1 ul.sidebar_list li.widget h3 {
color:#FFFFFF;
font-family:Arial;
font-size:1.3em;
text-transform:uppercase;
font-variant:none;
letter-spacing:0px;
}

.custom #footer_1 ul.sidebar_list li.widget h4 {
color:#FFFFFF;
font-family:Arial;
font-size:1em;
text-transform:uppercase;
font-variant:none;
letter-spacing:0px;
font-weight:normal;
float:right;
}

.custom #footer_1 ul.sidebar_list li.widget a:hover h4 {
color:#b20c0c;
text-transform:underline;
}

That’s a lot of code, I know! If you want to play around with things, this is a good way to figure out what each of the different commands changes. Another good way to deal with changing code on your own is to put all this stuff into your custom.css file, and then use Firebug to figure out little things you want to change. Happy hunting!

6 Comments TWEET THIS Share On Facebook EMAIL THIS