How to Create 4 Column Widgetized Footer in Thesis Theme?

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) {
'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 class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
<?php endif; ?>

<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
<?php endif; ?>

<div class="footer_items">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 4') ) : ?>

<?php endif; ?>






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 #footer {
border-top:2em solid #9c9c9c;
background: #eeeeee;
.custom #footer a{
border-bottom: 1px none #cccccc;

/* footer widget area setup */
#footer_setup {
background: #444343;
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;
#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..

{ 49 comments… add one }

Leave a Comment

  • Tanmoy January 12, 2010, 8:33 AM

    I can’t understand why it was not working for me in Thesis 1.6

    • Pascal January 12, 2010, 9:44 AM

      once again you can do the same process. If you got problem again contact via g-talk.

      • Tanmoy May 23, 2010, 6:17 PM

        It Worked. Thanks.

  • Kiwi January 25, 2010, 2:13 PM

    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!

    • Pascal January 25, 2010, 2:43 PM

      #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.

  • BestofBlogger February 18, 2010, 5:10 AM

    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:

    • Pascal February 18, 2010, 7:20 PM

      i saw your site, your footer looking great.

  • Mr Christopher April 18, 2010, 7:04 PM

    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!


    • Suresh April 18, 2010, 9:31 PM

      hai christopher,

      you will get more thesis customization tutorials in our youtube channel

  • Aman April 19, 2010, 10:05 PM

    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.


    • Pascal April 20, 2010, 9:58 AM

      Hi Aman, Thanks for making use of our all thesis & blogging tips.

  • Asrul June 30, 2010, 4:03 PM

    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 :

  • Tera July 24, 2010, 9:22 AM

    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.

    • Pascal July 24, 2010, 2:11 PM

      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.

  • Aditya July 26, 2010, 10:40 PM

    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

  • Glen August 17, 2010, 7:46 PM

    Excellent tutorial! Thanks for the help.

  • Apple August 19, 2010, 4:54 AM

    this is the most informative website on thesis. Thank you!

  • Laura September 2, 2010, 10:34 AM

    It worked! Very simple to do with the instructions. Thank you.

  • JC Maata September 13, 2010, 1:37 AM

    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!!!!

  • salim September 15, 2010, 3:00 PM

    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.

  • Kaushik Biswas September 20, 2010, 4:56 PM

    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!

  • Maricris Yak September 30, 2010, 5:44 AM

    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..

  • Tommy October 7, 2010, 3:25 AM

    Thank you for the excellent videos and code. I have learned a lot from them.

  • Sumon Khan November 2, 2010, 7:57 PM

    This is really a Great tutorial for Thesis users. It’s very helpful for me ! Thanks for share this !

  • Julie @ Inspired to Write November 9, 2010, 9:30 AM

    How would you do this with a different WP theme??

  • Nigél December 7, 2010, 3:33 AM

    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

  • Aditya December 11, 2010, 1:02 PM

    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?

  • Sandy December 22, 2010, 10:27 AM

    This is great! Question… What do I need to do to use this only for my static home page?

    • Pascal December 25, 2010, 11:46 AM

      Contact me via contact form to make use of my services. Thanks.

  • David Curtis January 21, 2011, 6:00 AM

    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).

  • Kristy January 30, 2011, 6:31 AM

    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:

    What changes would I need to make in the code to make the solid-red line span across the bottom of the page?



  • Kevin March 5, 2011, 2:20 AM

    Thanks for your tutorial on the the widgetized footer for Thesis.

    It worked really well!

    Thanks again,


  • Dave Voelker March 6, 2011, 3:45 AM

    Works exactly as I wanted it to. Thanks for your contribution!


  • Spyros March 12, 2011, 5:37 AM

    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

  • Shah Zina May 26, 2011, 3:18 AM

    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.

  • Glee June 16, 2011, 9:36 PM

    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.

  • Matthew October 17, 2011, 1:42 AM

    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

  • Casey November 10, 2011, 1:45 AM

    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?

  • mounir November 15, 2011, 7:13 AM

    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

    • FourBlogger November 17, 2011, 7:19 AM

      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.

  • peter November 18, 2011, 10:29 PM

    For some reason all the widgets are showing up vertically in rows and not as columns. Please advise

    • Suresh November 19, 2011, 12:40 PM

      hai peter,

      Check your custom.css code again.. The problem due to the css code in custom.css file.

  • waqas December 7, 2011, 3:00 PM

    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. )

  • hasan mahmud February 3, 2012, 8:54 AM

    can anyone suggest me how i can place copyright attribution below footer that means below 4 widgeted footer?

  • Tim February 9, 2012, 7:56 PM

    Hi. I am currently redesigning my blog on a test subdomain. I want to have the widgets white with a border box around each widget. I’ve got the white part done, but I am having problems with getting the border to work (I managed to get a border around the whole footer but not the individual widgets).

    I would really appreciate any advice. And I would also like to say a big thanks for all of your tutorials. They really have helped me get the most out of Thesis.

    Cheers, Tim

  • Hans March 1, 2012, 8:17 PM

    Hello FourBloggers,

    I inserted the code you list for the Footer. It works great on Chrome and Firefox, however does not diplay properly on Internet Explorer 8.

    My site is

    I am using Thesis 1.8.2 and the latest Wordpress release

    Am I missing something for IE to read it correctly?

    Thanks in advance,



  • Pete Lucas March 3, 2012, 6:43 PM

    I can appreciate that English isn’t your first language, but it may be advisable to add detailed captions to your video as at times I couldn’t understand you.

    That, or just slow your speech down.

    Other then that, good tutorial.