Thesis Tutorial: Create “Fat Footer” or Widgetized Footer

In this Thesis Tutorial, I’ve included some basic code for creating and stylizing a “fat” footer or “widgetized” footer in a WordPress website or blog that uses the Thesis Theme. In the WordPress Dashboard > Thesis Design Options > HTML Framework I am using the “Page Framework” option, but this will work with the “Full-width framework” option, as well.  Results for colorizing the Fat Footer background will change slightly depending on which option you choose.  Leave your questions in the comments below if you need my help and I’ll see what I can do for you.

 

OK, Here’s the code you need to copy and paste into the thesis theme custom.css file.  I got the code from DIYthemes.com the home of Thesis Theme and modified it slightly to give the footer a background color.   If you want to learn more about CSS code, in general, then you can go to W3schools.com for some free tutorials.  If you want some more specific information about customizing widgets using Thesis Theme, you can watch my thesis theme widgets video tutorial or you can buy the Thesis Theme manual I am selling on this site.

Code for custom.css file

/* START of Fat Footer CSS Code */

.custom #footer {background-color: #FFFFD9;}

.custom #footer-widget-block { text-align:left; overflow:hidden; }

.custom .footer-widgets { width:33%; float:left; }

.custom .my-footer-one {}
.custom .my-footer-two {}
.custom .my-footer-three {}

/* END of Fat Footer CSS Code */

Ok, and here’s the PHP code you need to past into the thesis theme custom_functions.php file.  But, first make sure you always backup the custom_functions.php file before ever touching it or it can ruin your whole day!

Always Backup custom_functions.php file!!!

Code for custom_functions.php file

/* START of FAT Footer */

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Left',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Middle',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Right',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

function my_widgetized_footer() { ?>
<div id="footer-widget-block">
	<div class="my-footer-one footer-widgets sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(3); ?>
		</ul>
	</div>

	<div class="my-footer-two footer-widgets sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(4); ?>
		</ul>
	</div>

	<div class="my-footer-three footer-widgets sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(5); ?>
		</ul>
	</div>
</div>
			<?php
	}
add_action('thesis_hook_footer','my_widgetized_footer','1');

/* End  of FAT Footer PHP Code */

 

Article Written by Jim Landers aka “Jupiter Jim”

 

 

Meet the Author

Jupiterjim
13 comments… add one
  • Donna Merrill Sep 12, 2012, 8:25 pm

    Hey Jim,
    At first I was hesitant to even push that play button because I am all thumbs when it comes to these things. I usually have someone do it for me. But sometimes that holds me back.
    I had to bookmark this page for future reference. You have made it easy for me to understand. Now that is a lot of power in that sentence because I usually need to go over things like this several times before I know what someone is talking about.
    Thanks for making it all make sense. I appreciate that.
    Donna

  • GoWebBaby Sep 14, 2012, 4:41 am

    Thanks Jupiter for your tutorial. This code snippet is really useful for me.

  • Vivian So Sep 15, 2012, 4:43 pm

    hi,

    i am going to do a site similar to this
    only i am doing wordpress theme and plugin that i personally used.

    I wish my php and css skills is ok

    Gosh i feel like i am a baby in web buildig in compare to u

    I have tons of site that is in developing stage
    Lucky I got staffs that work on my behalf 😀

    I guess i am so used to just search for plugin that i have undo my coding practice.

    dismay

    but i am hope i can pull together myself better after visiting your site of which give me a lot of encouragement, in renewing the passion in me.

    hope to keep in touch soon

  • Nile Sep 15, 2012, 11:16 pm

    Great tutorial to share. For a time I was going to implement footer widgets to my site’s template, but decided to try it on specific parts because I do not use the same template for all of my web pages.

    Not everyone knows what to do with footer widgets, but they can be really valuable with the right content within them.

  • Dewane Mutunga Sep 15, 2012, 11:20 pm

    Looks like you’re a wizard when it comes to wordpress and thesis. I know exactly where to come when I need a detailed tutorial!

    Good stuff!

  • Fern Sep 21, 2012, 9:00 am

    wow, you`ve put in a lot of time and effort into this video and tutorial, you obviously know your stuff when it comes to wordpress and thesis.Nicely explained too for non-computor geeks like me.

  • Sarah Arrow Sep 21, 2012, 11:19 am

    Thanks for the code and the tutorial Jim – a post that’s handy and well worth bookmarking – thank you

  • Shelley Alexander Sep 21, 2012, 10:32 pm

    Hi Jim, Thanks for sharing this tutorial and code for the thesis theme on Wordpress. I need to find out what theme my designer use for my blog and see if I can use this.

  • Michael Sep 22, 2012, 2:33 pm

    I tell you frankly (Or Jimly maybe) I wish I had seen your tutorials when I was struggling through learning how to use Thesis when I bought it.

    My life would have been ever so much easier and way more fun. Its a great theme, and I am only running one site on it now, but it is rock solid.

  • Sadie-Michaela Harris Oct 12, 2012, 2:30 pm

    Quality helpful and concise as ever Jim!
    I see that Thesis 2.0 has been released I just shared your tutorial page link today in a Facebook group called /wphelpandshare 🙂

  • Clare@ignitewellness Oct 21, 2012, 8:39 am

    Hi Jim,

    This is so useful and a definite bookmark page. I am excited to see what you write about Thesis 2.0 very soon!

  • Himadri Feb 17, 2013, 1:37 pm

    You are just great when it comes to Thesis theme. Your tutorials are just awesome. As a WordPress blogger i visit your website every now and then to get some new information and tips; Every time i get something new and interesting.

  • Julieanne van Zyl May 3, 2013, 10:12 pm

    Hi Jim, I really like the widgetized footers, a lot of people go down to the end of a blog, and something can catch their eye on those footers. It’s good to have the code for Thesis in a public place, thanks!

Leave a Comment