Update: If you are looking for getting done the 4 Column footer in Thesis Theme then one of our Thesis Skins help you for sure. Enabling 3 or 4 column footer is just a click away with FourBlogger Thesis Skins. You may also take a visit in these 17 Premium Thesis Skins developed by some third party developers but note that these skins has nothing to do with your 4 column requirement.
In this tutorial I will explain about 4 column widgetized footer. I already explain about 3 widgetized footer. In thesis theme, you can set your widgets easy. Here, this is widgetized footer for 4 columns. There is no restriction to add number of widgets in any columns. In thesis theme customization, by using widgetized footer you can simply drag and drop your widgets at any time.
Watch this video tutorial below:
Add this code to custom_functions.php
Use FTP path or go to custom file editor and paste this below code.
/*-----------------------------------------*/
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
$sidebars = array(1, 2, 3, 4);
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_footer1() {
?>
<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 class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 4') ) : ?>
<?php endif; ?>
</div>
</div>
<?php
}
add_action('thesis_hook_footer','widgetized_footer1');
Now go to wordpress admin panel and click Appearance then select widgets.
In the right side you will see Footer 1, 2, 3, and 4.
Add this code into custom.css
/* CUSTOM.CSS */
.custom #footer {
border-top:2em solid #9c9c9c;
background: #eeeeee;
padding:0em;
text-align:center;
}
.custom #footer a{
border-bottom: 1px none #cccccc;
}
/* footer widget area setup */
#footer_setup {
background: #444343;
padding:1.5em;
margin-bottom: 25px;
overflow: hidden;
}
/* widget item setup */
#footer_setup .footer_items {
text-align: left;
width: 24.5%;
padding-right: 0px;
color: #2361A1;
display: inline-block;
float: left;
height: 100%;
}
/* widget item headers */
#footer_setup .footer_items h3 {
font-size: 1.5em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
color: #ffffff;
padding-bottom: 3px;
border-bottom: 3px none #ffdf00;
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; }
Now Go to widgets in admin panel then drag and drop your widgets into left column and click save. For e.g. in Footer 1 you can add 1, 2, or more widgets into first column but it will appear one after the another. The same thing is happened for all Footer.
see the screenshot below:
Share your experience in comment section. For more checkout our all Thesis theme tutorials..
Related Tutorials:
{ 45 comments… read them below or add one }
I can’t understand why it was not working for me in Thesis 1.6
once again you can do the same process. If you got problem again contact via g-talk.
It Worked. Thanks.
Great tutorial. I for the life of me can’t find the CSS code to change my link color. I’ve tried
#footer_setup .footer_items a:active{}
#footer_setup .footer_items ul :active{}
#footer_setup .footer_items ul li a:active{}
Can you offer any tips? Thanks!
#footer_setup .footer_items ul a { color:#111}
#footer_setup .footer_items ul a:hover { color:#ff0000}
copy this code and paste in custom.css. as per your wish you can change the color code.
Finally, i can add 4 widgetized footer to my thesis. Thank you very much. And one interesting thing i could not add 3 widgetized footer.
You can look here: http://www.bestofblogger.net
i saw your site, your footer looking great.
Thank you very much
It is very nice to find a WordPress “how-to” article that actually works. Thanks very much this was helpful and I have my 4 column footer widgets now!
Chris
hai christopher,
you will get more thesis customization tutorials in our youtube channel
Hi there,
I am so glad I found this website, thank you for all your tips.
They are excellent. Congratulations on your beautiful site.
Keep the tips coming.
Cheers,
Aman
Hi Aman, Thanks for making use of our all thesis & blogging tips.
Hi, nice tutorial. By the way I’m having a problem though. It works but how do I move the copyright note under the footer?
Here is my site :http://www.myphotoshopdesign.com
Hi! pascal,
How do i restrict the four column widget to show up only on the index page of the site. What do I need to chnage in the code you mentioned above for the custom_functions.php file
Look forward to your reply
Thanks for your great tips.
i will do any single thesis theme customization issue for $5. if it is ok for you, i will send my paypal id after paying money, give your site details i will do it.
It doesn’t work for me! All the widgets show on top of each other and not side by side. I am just sick of trying to add a footer to my blog. No one of them work! I liked your concept of adding 4 different footers but sadly it doesn’t work for me and I cant figure out wats wrong
Excellent tutorial! Thanks for the help.
this is the most informative website on thesis. Thank you!
It worked! Very simple to do with the instructions. Thank you.
Thank you so much fourblogger programmers for the great help in terms of showing techniques in enhancinh thesis theme. I’m so grateful to have found your site. It’s my first project though. I started making my blog 3 months ago but had to stop for awhile since I got stuck and got discouraged of what i’ll have as a topic for my blog. I then chose aan anime blog since it is of my interest. now I have a very nice footer that didn’t even take me 1 minute to install. Thank you very much fourblogger. I’ll always look up to your site if ever and hopefully my site would also turn out a success.
Keep up the good work… 999google thumbs up!!!!
Hi,
This is a great tutorial. I have applied it to a site I am currently working on. In column 2 and 3 of the 4 column footer I have added 2 custom menus. The problem I have is, they get their property (color, font, size etc) from nav-menu. I was wondering how I can overwrite this and make sure I can set their font and color and background myself and make them appear in one line.
Any hint in this regard is highly appreciated.
Thanks Pascal, this worked for me. I was searching since morning, I found you in 2nd page of Google results today. All the sites in 1st page didn’t work for me, your way worked as wonder
Thanks again!
Hi, thanks for the tutorial. For some reason, my footer widgets are aligning vertical rather than horizontal (it’s a one column rather than a 4 column footer…)
I’ve copied pasted both custom_functions.php and custom.css without any changes. But I’m having this problem..
and i’m using thesis 1.7
Thank you for the excellent videos and code. I have learned a lot from them.
This is really a Great tutorial for Thesis users. It’s very helpful for me ! Thanks for share this !
How would you do this with a different WP theme??
I am a newbie, and I am using Thesis 1.8 and cannot get the code to work. I think that I am following the instructions correctly. Could there be anything else I need to activate in Thesis “SITE”or “DESIGN” options?
Thank you in advance!
Any help is appreciated
I finally got it to work. The styling works only when I paste the CSS code in layout.css and not in custom. Even though my custom stylesheet is enabled in design options.
Any suggestion?
This is great! Question… What do I need to do to use this only for my static home page?
Contact me via contact form to make use of my services. Thanks.
Hello and thank you for this – I’ve got all kinds of ideas for this area now on this and some of the other Thesis Theme sites I own. One idea is to add square or rectangular rotating advertising banners via the text widgets – which gives me another idea. If four widgets can be added to the bottom, what about the top under the banner / nav menu? Four rotating square ads might look good up there too – or just maybe have one horizontal rectangular sidebar on top to add a different kind of banner – flash or something entirely different from the default “choose an image” that’s built into Thesis now.
Not sure how much work it would take to do something like that but it’s another idea for how to make Thesis even more flexible.
Thanks again! – Check out my footer (click my name).
Thank you! I am attempting to make the solid color bar at the top go across the whole page, like my header. I’m trying to figure it out here on one of my sites:
http://www.mypetsavings.com/international/
What changes would I need to make in the code to make the solid-red line span across the bottom of the page?
Thanks!
Kristy
Thanks for your tutorial on the the widgetized footer for Thesis.
It worked really well!
Thanks again,
Kevin
Works exactly as I wanted it to. Thanks for your contribution!
Dave
fantastic tutorial. it helped the functionality of my website a lot. I just want to know how I can change the colour of links that appear black when I hover the cursor over them.
Many thnx
That was awesome!!
I’ve been looking for something like this for awhile. Can’t wait till I have a bit of free time, to try it out on my site. i have tried this code in my website. please suggest me further improvement.
Hello fourbloggers!
I’ve implemented the codes and they worked well. I’ve one problem though, how do I design the hover for links in the widgetized footer? I used style=”text-decoration: none; ” to remove the underline for the links in the footer, however I cannot design the hover such as underline and hover color.
How can I do this? Please help.
Thanks for the great tutorial. I would like to ask you how I may move the footer widgets above the footer line that contains the copyright info? By default when I added the footer widgets, they appeared under the footer text. Thanks
Thank you so much for the tutorial! I’m definitely going to buy your book, this is all beyond me lol! I put the 4 column footer in on my site, but how do I get it to stretch all the way across like my header does and like your footer does?
Hello
i didn’t find the custom.css file in my theme , i’m using Estore theme. !!
please help to get throught this thanks guys
and alsome tutorial
This tutorial is only for Thesis Theme. Not other themes having such custom.css files. Based on your theme, this 4 column footer coding will change more complicated.
For some reason all the widgets are showing up vertically in rows and not as columns. Please advise
hai peter,
Check your custom.css code again.. The problem due to the css code in custom.css file.
i have a issue plzz tell how to remove above footer diythemes link
the link is
(Get smart with the Thesis WordPress Theme from DIYthemes. )