A widgetized footer gives a professional look to your blog. The footer area is handy where you can put a collection of important information. When a reader finishes reading one of your blog posts, he/she is most likely to scroll down to see your footer.
A footer is certainly not a place where you would put something that would beg reader’s attention. It is because a footer is probably the last thing a reader could see or a reader would even just leave your site without seeing it.
So the chances that the matter in the footer get attention are very low. But the importance of footer should not be taken lightly. As I said earlier, it gives a professional look and it is also a place where you can give your readers a chance to explore your blog more indepth. It all depends on what your provide in the footer.
Thesis theme which provides awesomeness to a WordPress blog, can be customized easily to add a footer.
If you use this code your footer should look like this
In this post I am gonna tell you how to make a widgetized footer. As I always say, do a backup of the custom_functions.php and custom.css files before editing. And, do not edit directly from the WP dashboard, use a FTP service. I use FireFTP, a firefox extension.
Add the following code to custom_functions.php
/*3 Column Widgetized Footer*/
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Footer ' . $number,
'id' => 'footer-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '
<h3>',
'after_title' => '</h3>
'
));
}
}
/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
<div id="footer_setup">
<div class="footer_items"><!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?-->
<!--?php endif; ?--></div>
<div class="footer_items"><!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?-->
<!--?php endif; ?--></div>
<div class="footer_items"><!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?-->
<!--?php endif; ?--></div>
</div>
<!--?php<br /--> }
add_action('thesis_hook_footer','widgetized_footer');
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Footer ' . $number,
'id' => 'footer-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '
<h3>',
'after_title' => '</h3>
'
));
}
}
/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
<div id="footer_setup">
<div class="footer_items"><!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?-->
<!--?php endif; ?--></div>
<div class="footer_items"><!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?-->
<!--?php endif; ?--></div>
<div class="footer_items"><!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?-->
<!--?php endif; ?--></div>
</div>
<!--?php<br /--> }
add_action('thesis_hook_footer','widgetized_footer');
For styling your footer you need to add the following code to custom.css file. This code will give you a footer that looks like the footer in this site.
#footer{
/*The grey background behind the footer*/
background: #CCC9A6;
}
.custom #footer {
height: 100%;
width: 100%;
border-top:2em solid #CCC9A6;
background: #CCC9A6;
padding:0em;
}
.custom #footer a{
/*The black line that separates the content and the footer*/
border-bottom: 1px none #cccccc;
}
.custom #footer {
text-align:center;
}
/* footer widget area setup */
#footer_setup {
/* widgetized footer background (not footer background) */
background: #FCF9CD;
/* widget padding */
padding:1.5em;
/* margin at bottom of widgets */
margin-bottom: 25px;
/* do not change this! */
overflow: hidden;
}
/* widget item setup */
#footer_setup .footer_items {
/* contents alignment */
text-align: center;
/* widget width */
width: 33.3%;
/* space between widgets */
padding-right: 0px;
/* text color */
color: #000000;
/* do not change these! */
display: inline-block;
float: left;
height: 100%;
}
/* widget item headers http://adwordsshop.com/wp-admin/admin.php?page=thesis-file-editor*/
#footer_setup .footer_items h3 {
/* font size */
font-size: 1.25em;
/* bold or not */
font-weight: bold;
/* uppercase or not */
text-transform: uppercase;
/* space out the letters*/
letter-spacing: 0px;
/* font color*/
color: #5A0A0A;
/* padding under header text */
padding-bottom: 3px;
/* border under header text */
border-bottom: 3px none #ffdf00;
/* distance between border and widget text */
margin-bottom: 5px;
}
/* do not change these! */
#footer_setup .footer_items ul li { list-style:none;
font-size:1.4em;
line-height:2.0em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }
/*The grey background behind the footer*/
background: #CCC9A6;
}
.custom #footer {
height: 100%;
width: 100%;
border-top:2em solid #CCC9A6;
background: #CCC9A6;
padding:0em;
}
.custom #footer a{
/*The black line that separates the content and the footer*/
border-bottom: 1px none #cccccc;
}
.custom #footer {
text-align:center;
}
/* footer widget area setup */
#footer_setup {
/* widgetized footer background (not footer background) */
background: #FCF9CD;
/* widget padding */
padding:1.5em;
/* margin at bottom of widgets */
margin-bottom: 25px;
/* do not change this! */
overflow: hidden;
}
/* widget item setup */
#footer_setup .footer_items {
/* contents alignment */
text-align: center;
/* widget width */
width: 33.3%;
/* space between widgets */
padding-right: 0px;
/* text color */
color: #000000;
/* do not change these! */
display: inline-block;
float: left;
height: 100%;
}
/* widget item headers http://adwordsshop.com/wp-admin/admin.php?page=thesis-file-editor*/
#footer_setup .footer_items h3 {
/* font size */
font-size: 1.25em;
/* bold or not */
font-weight: bold;
/* uppercase or not */
text-transform: uppercase;
/* space out the letters*/
letter-spacing: 0px;
/* font color*/
color: #5A0A0A;
/* padding under header text */
padding-bottom: 3px;
/* border under header text */
border-bottom: 3px none #ffdf00;
/* distance between border and widget text */
margin-bottom: 5px;
}
/* do not change these! */
#footer_setup .footer_items ul li { list-style:none;
font-size:1.4em;
line-height:2.0em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }
I have added comments regarding to what colors refer to which part of the footer inside the styling code.
Once you have pasted this and saved the custom.css file, go to Widgets from your WP dashboard. You will find options to add widgets to footer 1, footer 2 and footer 3. In my footer I have used text widgets to put some recommendations, important posts and a little text about me with my photo.
So that’s it. Let me know if you have any questions or comments.
What? You haven’t got Thesis Theme yet? Click here to get this rocking theme and rock the Blogosphere! Problogging Success runs on this Awesome Theme.
|
Don't be a newbie blogger anymore!
Download your FREE Ebook combo and start your journey as a Problogger
|
|
|
We hate spam just as much as you
|
Article by JaneSheeba
+Jane is the founder of Problogging Success. She is an expert blogger, consultant, freelance writer and blog designer. Don't forget to get your hands on two FREE Ebooks she offers.
Jane has written 271 awesome posts for Problogging Success.
{ 22 comments… read them below or add one }
Love the code, Jane - cost me a pretty penny to get mine and here you are helping everyone with this awesome customization!
Ana
Hi Ana,
Customizing Thesis was not in my mind until I took it as a challenge to do it myself for this blog. I tweaked (major tweaks) this blog’s design 4 times after installing Thesis. I know that’s pretty bad. But I learned a lot in the process. It is true that I learned things the hard way. But I don’t mind helping my readers out. I recently added the category Thesis customization to Find All Answers.
Thanks for stopping by and I am glad that you liked this post. Got your email. Will get back to you.
Cheers,
Jane.
Jane Sheeba recently posted..7 Ways to Implement the 10 Minute Rule
Glad I found your link. I’m teaching myself Wordpress right now and these kind of tips are invaluable.
Great blog too. I like the combo of Social media stuff with Real Life. My advisers have been telling me to keep things to one topic, but that’s not really who I am. I like how you have integrated things.
Thanks Denise. I am embracing more than one topic at this blog now. Let me see how it goes. So far too good
Seems I am like you too 
Thanks for stopping by.
Jane.
Jane Sheeba recently posted..6 Reasons why Couples Argue and What to do About Them
What a fabulous tip Jane! And it doesn’t look too difficult. Think I’ll go and play around with it now and see if I can manage not to break anything!
Danielle McGaw recently posted..Your Opinion-Your Link Here FWWP
Good luck to you Danielle!
Jane Sheeba recently posted..Should You Be Organized In Order To Be Productive
thanks Jane! to be honest I was not aware of this customization in Thesis, although this is my platform too. I simply use the AddtoFooter plugin, which of course is far poorer than what you are presenting here. Definitely I ‘m going to use this coding.
steven papas recently posted..World Of Warcraft Collector’s Edition Review
Hi Steve,
It is not a surprise or a shame that you didn’t know about this customization. Indeed, much of the Thesis customizations are poorly known. I have dug some of them out when I try to change something at my site and I have been amazed at times. Thesis gives us much room for our creativity.
Jane.
Jane Sheeba recently posted..5 Must Have Cool Thesis Customization Tips
Nice post … thanks for your this sharing.I am seeking for this information from a long time and now it helps me a lot……
And I wish I was you! You’ve obviously worked hard to earn it! Cool blog….
When I paste that code in to custom_functions.php in thesis 1.8 I get this error message for line 46 ‘name’ => ‘footer’ . $number, Parse error: Syntax error, unexpected “=”,expecting’)’
Do you know how I can fix this?
Hi Geoffrey,
I have updated the code. Let me know if it works now.
Jane.
Jane Sheeba recently posted..12 Blog Promotion Tips For Newbies
Great. Good work…. I customized it and made a widgetized thesis footer for my blogger blog
Sahil recently posted..Why i Wont Stumble Your Page
Well done Sahil; so you are a tough geeky guy huh?
Jane.
Hi Jane, you’re an inspiration! I’m going to teach myself some php one day
Great job!
Ileane recently posted..How to update WordPress manually via FTP
Ileane,
Thanks for stopping by. I was zero with php when I started this blog (around 8 months ago). And now I can’t imagine that I have designed this blog myself.
It was fun learning.
Cheers,
Jane.
Jane Sheeba recently posted..12 Blog Promotion Tips For Newbies
Jane, this is … WOW
Thanks so much for providing such an incredible resource for us Thesis users!
Actually, I wanted to ask you - you said you did all the customisation yourself - well I want a few things on my blog looking how you have them looking here -like the full width header and the frames around the posts, just to name a few and I was wondering what you would charge to help me with it?
Thanks Jane, this is awesome!
Alex recently posted..The Jury’s Still Out on Traffic Generation
Jane,
This is an incredible resource that you have provided for all Thesis owners and I personally cannot thank you enough for putting this post together.
I actually notice a lot of features of your blog that I would like on mine and I would seriously like to talk further with you about what it would cost to help me with that.
Thanks again Jane, this really is a brilliant post!
Alex recently posted..The Jury’s Still Out on Traffic Generation
Hi Alex,
Sure. Just send me the details of the types of customization you need via the contact form. We’ll talk.
Cheers,
Jane.
Jane Sheeba recently posted..SEO For Targeted Traffic In And Out Of Your Blog
Hi jane,
I did everything what u say but i’m encountered with the error. When i was added codes, page was white.
Where is problem can u help me ?
Serdar, the code is somehow spoiled (I’m trying a fix) - meanwhile please replace > in the code with > and try. Please have a backup of the file before you change anything. Let me know how it goes.
Dear jane,
firstly thanks a lot for answer my question. I did like you said but the results did not change still having the white screen. and I realize that getting the same error in other topics like ” Customizing Archives Page in Thesis”.
i’m using thesis theme 1.8, i’m editted with Notepad++ custom_functions.php and custom.css . I dont know where i did mistake if u could help ı would be glad …
{ 4 trackbacks }