Update: Now adding 3 column footer in Thesis Theme made easy with our Thesis Skins. Thesis Smart Skin and Thesis Magazine skin both comes with a one click enable option for 3 or 4 column footer. We have listed 17 of the best Skins for Thesis from some third party Thesis Skin developers.
This tutorial show you how to add three column widgetized footer at end of the page. The Footer is very important for evey blogger because when I came across some blogs it gives some overview of your site. So, how can I make it? I tested this code in thesis 1.6. See my bottom of the webpage which I made for the widgetized footer. There is no need for configuration. You can simply create your footer in your own website.
See this video tutorial below. The Downloaded link for footer code is in zip format at the end of the post.
3 column widgetized footer in thesis theme.
1. Login to your FTP (File transfer Protocol).
2.Go to path public_html/yourdomainname/wp-content/theme/thesis_16 /lib/function/launch.php
3. Right click and edit the launch.php
4. copy this below code and paste it in custom_function.php and click save.
/*---------------------------------*/
/* WIDGETIZED FOOTER - 3 COLUMNS */
/* 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
}
add_action('thesis_hook_footer','widgetized_footer');
5. Now go to your wordpress admin panel under the appearance tab click widgets.
6. Now you will see sidebar 1 and 2, footer 1, 2, and 3.
7. Then, go to custom file editor copy and paste the below code into custom.css
#footer{
background: #eeeeee;
}
.custom #footer {
height: 100%;
width: 100%;
border-top:2em solid #9c9c9c;
background: #eeeeee;
padding:0em;
}
.custom #footer a{
border-bottom: 1px none #cccccc;
}
.custom #footer {
text-align:center;
}
/* footer widget area setup */
#footer_setup {
/* widgetized footer background (not footer background) */
background: #444343;
/* 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: left;
/* widget width */
width: 33.3%;
/* space between widgets */
padding-right: 0px;
/* text color */
color: #2361A1;
/* 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.5em;
/* bold or not */
font-weight: bold;
/* uppercase or not */
text-transform: uppercase;
/* space out the letters*/
letter-spacing: 0px;
/* font color*/
color: #ffffff;
/* 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:1.5em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }
8. Then, click save.
9.Now,again Go to appearance tab and select widgets. By default they are so many widgets available. Just drag and drop into your footer. Here in my web I need related post, categories, and archives So Just drag and drop into footer 1, 2, 3, respectively.
10. Now you will see your footer in the bottom of your post.
Note: use FTP to upload the code don’t do it in straight away.
You can also download thiszipfile here.
Do you have any trouble using this code post your comment below.
For more checkout our all Thesis theme tutorials..
Related Tutorials:
{ 86 comments… read them below or add one }
Hi, I added code to launch.php and .custom.css, but nothing changed. I did not understand, what is the problem? I see three widget area in admin panel, but nothing at homepage. May you help me please?
Hi once again do the same process as per our video. If you got any trouble contact via contact form.
when i tried this one i get all the footer columns one below the other? pls check my website sensehow.com and say whats the mistake? pls help
You are the best! i have never seen a blogger helping other bloggers like this! you have implemented it wonderfully in my site yourself….thanks a lot
Thanks for the good words. Best wishes to Sensehow.com
“when i tried this one i get all the footer columns one below the other? pls check my website sensehow.com and say whats the mistake? pls help”
I ran into the same problem, all the widgets and text alligned in the center.
When i checked your site razorlip, there are no widgets in footer. So i could not identify the exact problem. Please put the codes in custom_function.php and custom.css and place the widgets. Then contact us again so that i can help you.
I am facing same problem with marcelino.
Hi Tanmoy,
We have to make small adjustment in custom_functions.php code. Now i did it. So again now copy and paste the codes . It should work then perfectly.
Thanks for notifying through comment.
It works for me now. Thanks a lot Pascal
same problem here, the 3 widgets are one above the other in the central column of the footer
Hi Okapi,
We have to make small adjustment in custom_functions.php code. Now i did it. So again now copy and paste the codes . It should work then perfectly.
Thanks for notifying through comment.
I am having the same problem… they are all lining up underneath each other.. please help..
i saw your site now. it came correctly check your site.
I can see that 3 column footer works for your correctly in your site.
I will help friend. contact via contact form.
Great. This is very useful article.
Hi pascal, you are great in your work, you have sound grip on thesis modification. I am facing a problem in footer widgets. My footer widgets are not covering full width of the thesis theme framework. i leave some space at both sides. please guide me what to do. thanks
For your query i am checking you site, after finishing that process i will inform you.
hai, To enable full width footer go to Thesis design options, select full width frame work instead of page frame work in framework options..
once you selected the full width enabled.. then paste the below code in custom.css file.
.custom #footer_area .page {padding:0px;
width:110em;}
this code you can adjust the width as you need..
Thank you Pascal for your creativity and ingenuity. I love this footer mod and the fourblogger.com customization guide! I think maybe some folks who are having problems with the vertical widget alignment are getting code from the zip file, which is not the same as the code included in the screen shots above. I am having a little problem in that the sidebar widgets are splitting up the very bottom footer info – thesis attribution and wp admin login link? Could you help me figure this out? I appreciate all this help as a very green beginner.
hai woody,
thanks.. I saw your site,
In custom_functions.php file before adding the 3column widgetized footer code.
add the below line.
remove_action(‘thesis_hook_footer’,'thesis_attribution’);
then add widgetized footer code,
at last use the below attribution code in custom_functions.php file
add_action(‘thesis_hook_footer’,'thesis_attribution’);
Once again a great post!
I’ve applied it to my site: http://myfriendshotel.com/blog but there are a couple of issues.
1.) The headers are left aligned but the do not line-up 100% with the widget text content.
2.) The the highlighted links are too dark to read…how can I change the colour to: #fdfad0
Thanks very much!
Pete
hai peter,
for header alignment in footer widget section use this code in custom.css file
#footer_setup .footer_items h3 {padding-left:0.7em;}
for footer links use the below code in custom.css file
#footer_setup .footer_items a:hover{color:#fdfad0;}
Hi Pascal, V lovely website and Great Tutorials. Thanks. helped me V much. 1 Question.
How do I add a sidebar like your ” FOLLOW US”
It looks Great.
Keep up the FAB work.
hai Jean..
for this we have tutorial for follow us in sidebar check out this…
http://fourblogger.com/add-your-social-bookmark-icon-into-thesis-theme/
Suresh – Thank you for the fast solution. It works beautifully!
hey thanks. keep reading our blog. we will put more number of tutorials in future.
Suresh – V thanks Perfect Tutorial.
thanks jean… keep on reading..
Hi Pascal
I’ve just added your 3 column widget footer and wondered if you could take a look at my site.
The new footer seems to clash with the original one – I’m using the Thesis Plat theme.
Can you help?
Thanks
hai chris,
I saw your site you are using full width frame work..
To solve your footer problem do the following two steps
1. add the below code in custom.css file is to fix the footer width similar to content and header.
.custom #footer_area .page{padding:0 2.2em; width:92em;}2. you should place copy right and back to top button code after widgetized footer code.
To show copyright information below widgetized footer..
in your custom_functions.php file above the widgetized footer code add the following code
remove_action('thesis_hook_footer','thesis_attribution');
and after all the widgetized footer code add the following code
add_action('thesis_hook_footer','thesis_attribution');
it will solve your problem..
Hi Suresh
I’ve managed to get the footer to full width, however the columns and text looks too spread out!
Is there any code I can add to make this better?
Thanks again!
hai chris,
use footer area width as i mentioned in the previous comment..
add the below code in custom.css file is to fix the footer width similar to content and header.
.custom #footer_area .page{padding:0 2.2em; width:92em;}
Hello
Check out my site. All looks great except that the code is making the contents of each widget all pile into one line space, instead of putting them line by line.
Should look like this:
Archives:
October 2009
November 2009
December 2009
BUT they end up looking like this:
Archives
October 2009 November 2009 December
2009 January 2010 February 2010
What is the fix please?
hai kens,
I saw your site give your site archives link i cant find out where you placed archives in your site..
in footer widget there is no archives available..
Please disregard my friend, as I discovered some custom footer code and alignment in stle.css that I had forgotten to remove from a prior test.
All is good now.
Your code is great!
hai kens,
keep on reading..
Welcom Fareed. If you are new to fourblogger, check out and subscribe in our youtube channel http://www.youtube.com/fourblogger. There are more than 60+ video tutorials for thesis theme.
Thanks for this tutorial very helpful blog for thesis customization! The instructions for step 1, 2, 3 is not necessary, only need to copy code into custom_function.php and into custom.css ?
The 1,2,3 is an alternate way. If you can do copy and paste in custom_functions.php and custom.css, then the first 3 not necessary.
Thanks for notifying. I will update this in post.
I tried to implement your 3 column widgetized footer. But the widgets are are vertical, not in 3 columns. So I read the comments and answers, and still cannot figure it out. I have put:
remove_action(‘thesis_hook_footer’, ‘thesis_attribution’);
before your custom_fuctions code b/c I don’t want the thesis attribution.
Can you please tell me how to get the columns, instead of verticle widets (rows)?
Thanks for the help.
This is edit of previous post since I forgot to put my URL above before.
I tried to implement your 3 column widgetized footer. But the widgets are are vertical, not in 3 columns. So I read the comments and answers, and still cannot figure it out. I have put:
remove_action(‘thesis_hook_footer’, ‘thesis_attribution’);
before your custom_fuctions code b/c I don’t want the thesis attribution.
Can you please tell me how to get the columns, instead of verticle widets (rows)?
Thanks for the help.
Hi FLG,
Go to custom.css, check your code and add } before these lines
/* 3-COLUMN WIDGETIZED FOOTER – also has php component*/
/*http://fourblogger.com/create-3-column-footer-for-your-thesis-theme/ */
Hi Pascal,
I’m new to your site and I’m quite impressed with the tutorial above so I implemented it on my site which I hope you could take a look.
I just have some few questions thou if you could help, I’ll appreciate it. First, the widget texts are colored gray which goes darker on hover so it’s less visible on a dark background. I was wondering if you could provide a code to change the text’s color and hover color.
Also, the site’s attributes (copyright and links) with a light grayish background appeared be on top of the 3 column widgets so I was wondering if the two could be switched.
Thanks in advance and more power to your awesome blog and Thesis tutorials which are way better than the rest I’ve seen so far. Good job!
hai,
To change the footer link color use the below code this is only to change the link inside the footer widget.
.custom #footer #footer_setup a{color:#ffffff;}this code i gave color code for white. you can change as you like…for hover color
.custom #footer #footer_setup a:hover {color:#008fb3;}change the color code as you like.for footer copyright link color
.custom #footer a {color:#111111;}for hover color
.custom #footer a:hover {color:#234fff;}change the color code six digit number as you like..
Hi Suresh,
I appreciate your help so much. I have one other concern thou, is there a way for the copyright section (the one in gray) be moved right below the 3-column widgets?
hai,
get the copyright code from the footer.php file and place it inside any one of the footer widget…
Hi,
What I was trying to do is to switch their places such that the copyright notice goes to the bottom and the three widgets above it. You might want to check my site re this. Thanks!
hai,
In your custom_function.php code just before the widgetized footer code add the below code.
which is used to remove copyright attribution
remove_action('thesis_hook_footer','thesis_attribution');Now add the below code after the widgetized footer code..
add_action('thesis_hook_footer','thesis_attribution');Hi,
I’m sorry to bother you but the codes changed nothing. I’m currently using a custom footer hook for the thesis attribution and placing this:
remove_action(‘thesis_hook_footer’,'thesis_attribution’); and
add_action(‘thesis_hook_footer’,'thesis_attribution’);
added another footer below the widgets.
hai,
Its ok.. change the custom footer function name instead of ‘thesis_attribution’ in both codes it will work ..
that is give the custom hook function name that you used for copyright footer..
Other wise copy the entire code for copyright footer and paste it below the widgetized footer code..
Hi Suresh,
You’re tips are brilliant! I just copied the entire code for copyright footer and pasted it below the widgetized footer code and it worked.
I’m glad I asked and thank you for your patience. I have bookmarked this post for future reference and I might put up a post linking to this resource once I get the time.
Kudos to you!
Mathdelane
Admin/Editor
@SoftwareCritics
hai,
you can get more thesis tutorial on our youtube channel. made it use full..
Nice one, worked right away. Thanks.
hai,
Thanks. you will get more tutorials in our youtube channel
Thanks Pascal, you really made this simple and crystal clear. Now I can just think about making it look pretty!
Bookmarked for any future reference.
hai Twee,
thanks.. You will get more thesis video tutorials on our youtube channel
I did the footer, but 2 things. It took my custom background away and I don’t know how to get it back. AND how do I make my font bigger?
Thanks
I got the background back, but still want to make the font for the links bigger and change the background color to better fit my site. I’m looking at the code to see if I can get it. BUT I’m not CSS savvy and mess things up!
hai SimonSaysMom,
To change the background color in custom.css code mentioned in the above post just change the color code in .custom #footer setup{background:#444343;}
just change color code #444343 to which color you want.
To change footer link font bigger add the blow line in custom .css
.custom #footer a{font-size: 15px;}
here change the size as per your wish.
Hi Thanks
I changed the color no problem. BUT I tried to change the font, I put the code in that you gave, saved it, but then it took it away. I don’t get that. Below is the section I put the code in.
Thanks!
#footer{
background: #eeeeee;
}
.custom #footer {
height: 100%;
width: 100%;
border-top:2em solid #9c9c9c;
background: #eeeeee;
padding:0em;
}
.custom #footer a{
border-bottom: 1px none #cccccc;
}
.custom #footer {
text-align:center;
}
[I CODE IT IN THIS SECTION] .custom #footer a{font-size: 15px;}
/* footer widget area setup */
#footer_setup {
hai SimonSaysMom,
add the below line at end of the css code
.custom #footer a{font-size: 15px;}
Hi Suresh
I wonder if you can help me with my background image on my site. For some reason, somewhere/somehow the footer code I used has shifted the alignment of my image. Can you tell me how I can change this please? Thank you
hai Nay,
I think footer works fine..
what is your problem exactly which image alignment makes problem….
one suggestion remove the width in header css code .. ie) remove header width:1017px; in custom.css file..
Hi Suresh
I was able to sort out my background image, but the 3 column alignment has gone a bit weird. The heading in my first column is at the edge of the page, with a big space until column 2. I didn’t make any changes to the code. Can you tell me how to make my footer widgets in the correct alignment please?
hai Nay,
In your custom.css code
inside #footer-setup .footer-items h3{ add below code here}
Use the below code
text-align:center;
Thank you Pascal. This worked perfectly!
Have you put the CSS code inside custom.css?
Hey Kenneth,
As we are working in our new membership site launch, we could not reply you in time.
After couple of days, we will launch the site. You can take part in that membership site and
we will help you in your needs.
Excellent!!! Thank you VERY much. Works fantastic without any problem, and no brains on my part. Appreciated.
Hi there,
Just wondering if it is possible to change the width of each widget instead of same width. For example, I want the left and right widget take up only 20%, and the center widget 60%. Can I do so? If so, could you please teach me how to alter the css in order the achieve above effect.
Thanks so much for your time and help. I really appreciate it.
Thanks for the great tutorial. Worked like a charm for me. I’d like to figure out how to separate the text boxes a bit from one another. I’m sure you’ve probably already addressed it in one of your other replies, so I’ll keep looking…
Great tutorial. This should be on the Thesis forums. Thank you.
I’m having the same problem with the code where my columns are stacked on top of each other, I’m afraid I don’t know enough to solve the problem myself. Any help would be appreciated.
thank you
Can anyone help me out?
I’m using Wordpress and I want to change the background of the footer i.e. by uploading background image from the backend. How can I do it?
I tried using the add_custom_background() function but it changes the background of whole body. I want particularly for the footer.
Thank you
Chintan
Hi,
I love this. However, it doesn’t show the headers on my widgets. Is there any way to fix it?
Hello,
This is a great easy tutorial, thank you. But when I do it, my sidebar 1 and sidebar 2 lose their widgets, and will not display them when I add new widgets. Do you know how to fix this?
Thanks,
Jason Marshall
Hi there
I have done as you said but ended up with two full page widgets and a third below. What am I doing wrong?
Thanks
Jeremy
i jused your code, but i cant fix the Widget widht via custom.css
any idea?
Hi,
I was wondering if there is a way to change the size of each column.
Thanks.
hell yeah, you kick ass! Thanks! Worked perfectly on my thesis install.
Hi….Great tutorial and i reckon it’ll work great, but i’m stuck on the first stop adjusting the PHP file….Do i have to change the file attribute to let me write in it?….I was going to change it to 666 but, it says that it’ll be open to the public.
sorry i forgot to mention that my file attribute is currently set at 600.
Thanks
keep the custom_functions.php file as 644
cache folder as 755 and layout.css as 666.
Thats all.
Thanks
Pascal.
Hi,
I have encountered an error on the code above. Try to put a txt html on each footer widget and you’ll notice that from 3 column, each footer will be placed one below the other. it will be a great help if you can help me with this. Thank you very much!
{ 1 trackback }