How to Create Wigetized Footer in Thesis Theme?

Update: 3 column or 4 column footer can be enabled in just a click if you go with our Thesis Smart Skin or Thesis Magazine Skin. Both Thesis Skins are developed by us(FourBlogger). Check FourBlogger Thesis Skins website. And we have listed few Skins for Thesis Theme from other developers.

In order to use these theme more effective we should customize footer because we can add more thing in footer. When you are trying to customize footer widgetization is more preferable because if your widgetized your footer we can add anything in footer and also easy to add widget like recent comments, author biography using text widget, categories, you can also add your entire you tube channel in footer. I previously explained about how to create fixed 3-column wigetized footer.

In this video tutorial deals about how to widgetize your thesis footer by using the side bar widget in thesis theme. These footer widgets are similar to the sidebar widgets available in thesis. By using your css code you can designed your columns whether it is 2 or 3 or4. also if you want you can widgetize entire width of the footer other wise you can widgetize part of the footer area.


To build footer widgets first we need to create widget box in wordpress admin. To do this copy and paste the following code in custom_functions.php.

/***BUILD FOOTER WIDGET ***/
register_sidebars(1,
array(
'name' => 'Footer',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function widgetized_footer() { ?>
<div id="footer_1">
<ul>
<?php thesis_default_widget(3); ?>
</ul>
</div>
<?php }
add_action('thesis_hook_footer', 'widgetized_footer', '1');
/***FOOTER WIDGET END***/

The above code I have used the thesis default sidebar widgets to create our footer widgets. If you are having only two widget boxes sidebar_1, sidebar_2 in wordpress admin use  thesis default widgets(3). If you are having more widget boxes in wordpress admin (example 5) you should replace 3 as 6 in the code thesis default widgets(6).

To paste the above code in custom_functions.php file use ftp.

The path is public_html/fourblogger.com/wp-content/themes/thesis_16/custom/custom_function.php.

Once you pasted the above code, Copy and paste the following code in custom.css file.

/***FOOTER widjet ***/
.custom #footer_area, #footer_area .page{background: #222;}
.custom #footer_area {color: #ccc; padding-top: 0em; text-align:center; border-top: 3px solid #666;}
.custom #footer {border-top:none; text-align:center;}
.custom #footer a:hover {color: #fff; text-decoration: none; }
.custom #footer_1 {text-align:left; border-bottom: 1px solid #333; }
.custom #footer_1 ul.sidebar_list li.widget {text-indent:0; color: #eee; width:23%; margin-right:0%; float:left;}
.custom #footer_1 ul.sidebar_list li.widget h3 {text-indent:0; padding-top:0.2em; color:#ccc; font-size:22px; font-family:georgia;}
.custom #footer_1 ul.sidebar_list li.widget a {color: #fff; border-bottom:0; padding:0.2em;}
.custom #footer_1 ul.sidebar_list li.widget a:hover {color:#ccc; padding:0.2em;}
/***FOOTER END***/

The above css code you want  2 column footer replace widget li width as 47%

For 3-column use 31% , for 4 use 23%. You can fix whatever you want. Also change heading style by modifying items in widget h3. But the above mentioned 3-column witgetized footer article the columns are fixed we should use fixed three columns. The advantage of fixed three column wigetized footer is we can add number of widgets in one single column.

To paste the above code in custom.css file. Use the below path Thesis options/custom file editor/custom.css .

Once you placed the above two code your footer has been widgetized. To see this goto wordpress admin. Select ‘widgets’ under appearance tab.

Right sidebar we are having the widgets sidebar1, sidebar2, and  Footer.

In side the footer widget you can add recent posts,tag and etc by drag and drop the widget  now visit you site which is having widgetized footer. Its looks like the below image.

widgetized footer

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 31 comments… add one }

Leave a Comment

  • Bangaloreloka January 9, 2010, 11:32 PM

    Awesome.. thesis have certainly changed a lot all thanks to the hooks.. adding footer widgets was never to easy few years ago :)

    Reply
    • Pascal January 10, 2010, 12:11 AM

      Yes. you said correctly.

      Reply
  • Chethan January 10, 2010, 12:09 AM

    Yup! widgetized footer gives a Quality look to the WEBSITE..Very Nicely explained in the Video.. Good Work Pascal

    Reply
  • blinkky January 10, 2010, 1:41 AM

    I like thesis theme…Simple and good for SEO….But it’s too expensive for me. Maybe someday =)

    Reply
    • Pascal January 10, 2010, 9:38 AM

      Its Ok blinkky. Thanks for reading.

      Reply
  • BestofBlogger January 10, 2010, 1:55 AM

    Dear friend, i try so many times to add footer, but i can not add properly. May you help me pls?

    Reply
    • Pascal January 10, 2010, 9:34 AM

      Yes. I can help you. Please contact us through contact form.

      Reply
  • Ekawaaz February 8, 2010, 2:52 PM

    I just started using the Thesis theme and this video came in very handy tonight!. Keep up the good work! Actually I was looking for this sort of tutorial..Thanks a ton…Hopefully I will be able to add footer widget but if I get stuck..I will email you Pascal..for help and advise…Thanks once again

    Reply
    • Pascal February 8, 2010, 7:04 PM

      surely i will help you.

      Reply
  • Tony M February 15, 2010, 5:57 PM

    I used a tutorial from Thesis Theme HQ and found this one to be good as well. The thing I had to customize from that one (not yours since I didn’t try) is to add margin: none. Otherwise I was having white space on the outside of the whole footer.

    Keep the tutorials coming!

    Reply
  • travis May 4, 2010, 11:20 AM

    Hi when I go to Appearence > Widgets there are no footerbars to put widgets into. I have thesis 1.7 can anybody help?

    Reply
    • Suresh May 4, 2010, 2:26 PM

      hai travis,

      Give your site name.. have you added the custom functions.php code mentioned in post ? check it once again where it is there are not..

      Reply
  • Nay June 3, 2010, 4:01 AM

    Hi guys,
    I followed your video exactly, but it hasn’t worked for me. I’ve re-tried it loads of times, but I keep getting the same result. I’m using Thesis 1.7 if that makes any difference. Any chance you can help me out please?

    Reply
    • Suresh June 3, 2010, 6:39 PM

      hai Nay,

      Thesis 1.7 in not going to give you any problem ..Give your site name..

      Reply
    • Nigél December 7, 2010, 4:08 AM

      I’m having the same problem. I love the videos too, and that’s part of my furstration in not being able to follow them…lol
      I’m using Thesis 1.8

      Thank you in advance

      Reply
  • Technorotic August 30, 2010, 2:05 PM

    Hi,
    I am also facing problem, I am using Thesis 1.7. Please check it

    Reply
  • Rakesh September 5, 2010, 12:16 PM

    thanks a lot… i was wondering how could i get web 2.0 footer widgets and this article helped.

    Reply
  • Danielle September 18, 2010, 1:23 AM

    Hello
    This isn’t working for me, can you help?

    Reply
  • francis November 4, 2010, 2:47 PM

    hi i wasnt able to put the footer widget nicely.. can you help me?

    i am trying to put 3 column footer widget..

    thanks

    Reply
  • francis November 4, 2010, 2:52 PM

    by the way.. i used your other tutorial and it fit best at my site..

    http://fourblogger.com/create-3-column-footer-for-your-thesis-theme/

    you rock!

    Reply
  • Oren January 6, 2011, 10:54 PM

    Hi.
    i’ve added the code.
    how can i make it a one-column footer ?
    how do i make the ‘links’ i put in the widget to be horizontal instead of vertical like it is now..
    thanks you :)

    Reply
  • wastematerials March 16, 2011, 9:39 AM

    This Code you Publish is Not thesame as in the Video..
    How to make 4 column widget on the Footer area
    Thanks A lot for your Great Tutorials it helps me A lot..

    Reply
  • tunisia live news July 29, 2011, 6:34 AM

    i just want to add 1 widget colon plz help

    Reply
  • Derek September 27, 2011, 5:47 AM

    Suresh-

    I would like to know how you customized your footer. I cannot find that info on your site, but I love your footer. If you could send me that code it would be greatly appreciated.

    Reply
  • Anuj@wpblogtips November 10, 2011, 1:00 PM

    That was a simple code trick, and yet so many people find it difficult. We used tables for so long to get that effect. Thanks.

    Reply
    • FourBlogger November 10, 2011, 5:09 PM

      Glad this post helps, Thanks for using our tutorials.

      Reply
  • Marty December 2, 2011, 10:09 PM

    Hi
    I have a simple question:
    below the footer we have got just one line with “Copyright”, All right reserved, etc.
    On my blog it is on the right side of the page. How to push it to the center of the space?
    and also how to be able to have two lines, both centered?

    thank you

    Reply
  • suman December 11, 2011, 4:08 PM

    Hey dude I put same code but it appears like this. please help me edit it… toptechnology.site88.net/wordpress……..please check it and reply me….it is not like as you said in video…….but it came in right side below and looks very untidy………thank you

    Reply
  • Ferb January 31, 2012, 11:59 AM

    Hi, thank you for the instruction, please take a look of site if you want.

    Reply
  • halisi vinson February 18, 2012, 1:38 AM

    How do I get rid of the bullets next to the items. I moved my blogroll to the footer but the header and the links have bullets next to them. Otherwise I love the ease. Thanks

    the site is http://www.sonsofcovenant.org

    Reply