3 column responsive footerThe site has adopted Yet Another Theme. This time, it’s one of the core WordPress themes, TwentyTwelve.  I’ve added a responsive, three column footer widget area.

Download a zip file containing footer.php, style.css and functions.php: SDS_2012 theme
updated 2012-12-29 to use the more correct form of starting PHP code, <?php

This modification is best implemented as a child theme. What’s a child theme?  Read this article from the WordPress codex: http://codex.wordpress.org/Child_Themes

  1. hello,
    I am thinking about using the twenty twelve theme, but I need three footer areas similar to the three of twenty eleven. but there are none. I see that you have it. can you explain me how you did this?
    I am not an expert…
    Thank you…
    Best
    Paul

    • Hi, Paul.

      I made my own theme (sds_2012) as a child theme of TwentyTwelve and copied the theme’s footer.php file over, then edited it to add the new footer areas. There are probably typos below, so download the .zip file from the parent message to be sure you get a working example.


      <?php
      /**
      * The template for displaying the footer.
      *
      * Contains footer content and the closing of the
      * #main and #page div elements.
      *
      * @package WordPress
      * @subpackage Twenty_Twelve
      * @since Twenty Twelve 1.0
      */
      ?>
      </div><!-- #main .wrapper -->

      <div id="footerwidgets">
      <div id="footer-left">
      <ul>
      <?php if ( !function_exists('dynamic_sidebar') ||
      !dynamic_sidebar('Footer Widgets Left') ) : ?> <li> <?php endif; ?>
      </ul>
      </div>
      <div id="footer-middle">
      <ul>
      <?php if ( !function_exists('dynamic_sidebar') ||
      !dynamic_sidebar('Footer Widgets Center') ) : ?> <li> <?php endif; ?>
      </ul>
      </div>
      <div id="footer-right">
      <ul> <?php if ( !function_exists('dynamic_sidebar') ||
      !dynamic_sidebar('Footer Widgets Right') ) : ?> <li> <?php endif; ?>
      </ul>
      </div>
      </div>
      <br />
      <br clear="all">
      <footer id="colophon" role="contentinfo">
      <div class="site-info">
      </div><!-- .site-info -->
      </footer><!-- #colophon -->
      </div><!-- #page -->
      <?php wp_footer(); ?>
      </body>
      </html>

      Then, in the child theme’s style.css file, I added the CSS to put them side by side:


      #footerwidgets {
      width:100%;
      }
      #footerwidgets p {
      padding-bottom: .5em;
      }
      #footerwidgets li, #footerwidgets p {
      padding-bottom: .5em;
      font-size:80%;
      line-height:1.1em;
      }
      #footer-left {
      width:30%;
      float:left;
      padding-right:2.5%;
      }
      #footer-middle {
      width:30%;
      float:left;
      padding-left:2.5%;
      padding-right: 2.5%;
      }
      #footer-right {
      width:30%;
      float:right;
      padding-left:2.5%;
      }
      .site-content article {
      border-bottom:none;
      }
      @media only screen
      and (max-width:481px) {

      #footer-right, #footer-middle, #footer-left {
      float:none;
      padding-left:0;
      padding-right:0;
      padding-top:1em;
      width:100%;
      }
      }

      Finally, to create the Widget areas, I added this to functions.php in the child theme:


      <?
      if ( function_exists('register_sidebar') )
      register_sidebar(array(
      'name' => 'Footer Widgets Left',
      'id' => 'left-footer',
      'before_widget' => '',
      'after_widget' => '',
      'before_title' => '<h3 class="widget-title">',
      'after_title' => '</h3>'
      ));

      if ( function_exists('register_sidebar') )
      register_sidebar(array(
      'name' => 'Footer Widgets Center',
      'id' => 'center-footer',
      'before_widget' => '',
      'after_widget' => '',
      'before_title' => '<h3 class="widget-title">',
      'after_title' => '</h3>'
      ));

      if ( function_exists('register_sidebar') )
      register_sidebar(array(
      'name' => 'Footer Widgets Right',
      'id' => 'right-footer',
      'before_widget' => '',
      'after_widget' => '',
      'before_title' => '<h3 class="widget-title">',
      'after_title' => '</h3>'
      ));
      ?>


      Be sure to work in a child theme so any upgrades to the theme won’t wipe away your work.

        • Neither of your sites loads for me. However, if by “my link”, you mean the link to the zip file that contains the files for the footer, yes, it works. It’s not a complete child theme – it’s some pieces you’d use in your own child theme. BTW, these days I’ve switched to using the Underscores base theme.

          • 2012 is a good base for a responsive theme. The thing I find about responsiveness is that you have to find one and stick to it and get your thinking wrapped around the way it works. So, for example, if the theme is truly “mobile first”, the media queries become based on a set of increasing minimum screen sizes (min-width), with the defaults set at the smallest screen size. Don’t find yourself trying to mix media queries with mid-width and max-width settings or you’ll rapidly get confused. As I mentioned, these days I build my own themes from underscores (http://underscores.me/). It’s somewhat responsive. I like starting here because I prefer to add stuff rather than dig through 2012 and figure out what I need to disable to make things work the way I want. Each time I use it, I try to add some new feature, so it becomes a serial learning experience.

          • // Please remove my May 30, 2013 at 3:34 pm comment there was a wrong in writting.//

            Thank you very much for your so fast reply. previously I mentioned about functions.php: SDS_2012 theme but my writing was not clear. I am now able to download it. I try several time before but could not be able then. I am basically find a good theme for free. I want to use suffusion theme but that was not responsive in mobile. Can you please suggest me best free theme for wordpress? Thank you very much again. Recenty I buy my domain name
            ProHint.COM and BDMOZ.COM .How much good these domain name?

  2. Hi sstern,
    Thank you very much for your help – I think i did everything according to your advise, however I dont find the widget areas footer-left, -middle and -right among the widgets-areas. The only areas that exists in twenty twelve is Second Front Page Widget Area, First Front Page Widget Area and Main Sidebar…
    How do I fill the created footer areas?
    Best
    Paul

    • It’s the functions.php file that puts the widgets on the Appearance -> Widgets page. Make sure you name the widget areas exactly as they’re defined in footer.php. If you’re using a caching plugin, be sure to empty the cache after updating the php files.

  3. Please help! I followed all your instructions, changed the names to match etc. But I have never used php before and I think that is the problem. They are all over to the left? Any ideas? Thanks

  4. Hi Steven,

    thank you for the article. I added the footer-widgets in my blog , too.
    But the inside an ” is causing markup validation errors, so I left the “” out in the footer-php.
    It still works great…

    Best,
    Daniel

  5. I actually got it to work in the end. I just spent some time fiddling! Very good now I am very happy. I have another question.

    I would like to remove some of the white space around the bottom and top of my page. Is this possible and do you know how to do it? Thanks for all your help with the footers.

    • Sean: The best way is to use a dynamic CSS tool and start tweaking stuff. I use Chrome as my browser and use the built-in developer tool. I’d first try playing with any padding values for the #page div.

      • I use firebug for Firefox to help me locate the div. I’m finished my site for now. I’m really happy with it. You can see what I did with the footer background now. Thanks for your help.

  6. Steven,
    I want to thank you for your generosity in posting this code. It seems to me that you have repaired a glaring oversight by the WordPress developers. I was looking at the 2011 theme footer code when I stumbled upon your solution.

    It made my day.

  7. The code works great thanks!
    Was wondering how i can force the footer to stay at the bottom of the page, even if the page is empty so that you can scroll down.

    thanks for the code!

    • One way is to set a minimum height in the CSS for the content area above the footer. I think that looks good if a lot of the pages have short content and you don’t want the height noticeably changing unless there’s a lot of content.

  8. Michael: It looks like your footer already has multiple widget areas. If you want to add more, I suppose you could add them either right above or right below the “footer-bottom” span. Nice site, by the way. My only suggestion would be to make your contact information more prominent. Your phone and email address are in light gray on a medium gray background in a relatively small font. Given the design, the easiest and least disruptive choice might simply be to change the font color of the contact info in the footer areas to #fff.

  9. Hi sstern I think you have misunderstood me this website is my own website and only a example for the sticky footer. The footer example that you share is not sticky do you have a idea how to make it sticky.
    Because I test the twentytwelve theme on my computer locally (xampp) and added your example sds_2012.zip how can i make it sticky. I hope you understood me. Thank you for your quick response.

  10. gets an error like this:

    ‘Footer Widgets Left’, ‘id’ => ‘left-footer’, ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘
    ‘, ‘after_title’ => ‘
    ‘ )); if ( function_exists(‘register_sidebar’) ) register_sidebar(array( ‘name’ => ‘Footer Widgets Center’, ‘id’ => ‘center-footer’, ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘
    ‘, ‘after_title’ => ‘
    ‘ )); if ( function_exists(‘register_sidebar’) ) register_sidebar(array( ‘name’ => ‘Footer Widgets Right’, ‘id’ => ‘right-footer’, ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘
    ‘, ‘after_title’ => ‘
    ‘ )); ?>

    can u help me plz?

    • I think you’re copying the code from the page, because there are all sorts of HTML conversions. Use the Zip file to download the actual PHP files. Also, your PHP configuration may not accept < ? as the invocation of php snippets. Check the code and replace < ? with < ?php. Sorry for the sloppy coding.

      Note: There should not be a space between the angle and the question mark.

  11. Hello Steven,

    I’m fairly new to wordpress and I don’t know very much about coding. I tried your SDS_2012 theme and it works great at adding the footer widget area but now my sidebar is gone.

    How do I add the footer widget area and keep the right sidebar?

    Thanks!

      • Yes, I did. Silly me, I just now noticed that the existing widgets on my blog were moved to the left footer widget area after I installed the child theme. I dragged them back to the main sidebar and now everything’s okay!

  12. Paul works perfect, thanx for posting the files and tutorials. I would like to have a “Front Page” with 3 widget columns (instead of WP’s default of only two). Seems like your same code could be recycled into a 3 widget column front page template. Wondering if there would be any differences or necessary adjustments?

  13. Hi Sstern,

    Very useful child theme you made.
    Is there anyway i can get the 3 column footer to work only on the frontage, as in the original theme?

    Dorthe

    • It seems to me that you’ll need to edit footer.php and test whether the current page is the front page using “is_front_page()”.

  14. I too would like to have the 3 footer areas as it was in the Twenty Eleven theme, but other than that at the moment at least, I would like to keep everything else unaltered.

    The set up for the footer area, is that the only changes that you have incorporated with your child theme that you have supplied the download link to?

  15. Mike McNamara says:

    Hi Steven, Just a short comment to thanks you for your code for the footer for the Twenty Twelve theme. All sorted and running

  16. autsch, i’ve put thes files from the .zip into a child theme. footer.php & functions.php came directly from the zip.
    The CSS Lines are now at the end of the child style.css (this was an complette copie from the parent – brand new)
    Unfortunetly the widgets are hidden?
    Any Tips for me??

    • Oli – what’s your web site? There’s no need to copy the complete CSS from the parent theme — it should be included with an “@” reference at the top of the child theme’s CSS. Finally, which template type did you use for the pages on your new site?

  17. heatherlongpre says:

    I followed your instructions, which seemed simple enough, and am getting a “fatal error” that reads:

    “Fatal error: Cannot redeclare twentytwelve_setup() (previously declared in /home/content/92/10529992/html/wp-content/themes/eta-theme/functions.php:52) in /home/content/92/10529992/html/wp-content/themes/twentytwelve/functions.php on line 77″

    I noticed you said something about using the caching widget, however I’m not able to even access my widgets, getting the same error from the WP control panel as well.

    So I tried to upload the original, un-modified php files, and I’m still getting the error! Can you please help!? I’m working on someone else’s site and I think I just brought the entire thing down somehow….

    thanks in advance!

    • Time to back out the changes you made! You may need to wrap the stuff in functions.php inside a function and hook it appropriately by looking at what functions.php and the original theme files area doing.

      When you uploaded the “original” files, did you first remove the changes you made?

  18. Thank you for making this available. I have an issue with the footer widgets style. The font style is different than other text widgets. How do I make the widgets follow the default style sheet?

      • Thank you for the reply. It turned out I had to copy the font-size and line-height from the Twenty Twelve theme stylesheet , i.e.:

        #footerwidgets {
        font-size: 13px;
        font-size: 0.928571429rem;
        line-height: 1.846153846;
        width:100%;

  19. Hi, I’m in a little situation here. I’m trying to change the background color of the footer area but when I’ve tried editing the css on #colophon it only changes the bottom part and not the whole footer area. What I would like to do is completely change the background color of the footer area so that it’ll be set apart from the content area of the page.

    Thanks.

  20. THANK YOU!
    I have been working on this for over an hour now. I tried many many tutorials. I tried to make my OWN widget area, use other peoples…. but nothing worked.

    This is the only one I have found to work effortlessly. The joys of copy and paste. This makes the theme work for me. You did such a great job, so thanks again!

  21. Hey! Thank you very much for this theme! I copied the content of the zip file into my child theme but i also have the problem that all oft the widgets appear on the left side!

    Anything missing`?



    • Check both footer.php and the css to make sure that the new widget areas actually appear in the footer *and* the CSS locates the footer widget area at the bottom of the page.

  22. Hi sstern,
    Something that I did is wrong because I receive an error when I want to visit my new site (no problem if I go back to the original functions.php). I did the following:

    1. I uploaded the footer from sds_2012 to the Child Theme (without any modification)
    2. I added the style (sds_2012) to the CSS of the Child Theme
    3. I copy the the content of the functions.php and pasted to the end of the original functions.php (without any modification) and uploaded to the Child Theme.

    What is wrong? Thank you!

    • You can’t just upload without modification. You’ll have to merge the CSS into your child theme’s CSS, merge the PHP into functions.php, and make sure the comments and function calls in the PHP file match your theme’s name. What error did you get?

      • SStern, I am thinking of your your code as well but need to understand exactly what i need to do before i start changing anything. at the moment apart from the function.php, i have a style.css and footer.php in a child theme.

        My understanding is that i need to add the code from your style file to the end of the code in my style file in the child theme and do the same with the other files?? (adding the code to the end of the code in my files)

        however i see you state to merge the codes. Can you explain that a bit further please.

        thanks in advance

        • Sam, you’ll have to look at your functions.php and see where the code fits in. If you have a function that creates widgets, then paste it in there. In footer.php, you’ll have to add the HTML to put the footer stuff in the appropriate location — it may be before the colophon, within another div, or sort of stand alone. The CSS gets copied somewhere into your CSS.

  23. Thank you so much! I’ve been looking everywhere for a tutorial like this! I’ll be sure to share the heck out of it!

  24. Hi, this is great, thank you! Is there any chance you will update this to feature a simple / editable one-line footer underneath these very-useful three columns?

    • The proof is left to the student. Hint: If it’s really one line and you don’t need it editable by the user, just edit footer.php and put it there. If it needs to be a widget, add one more stanza to the add widget code, one more div to the list of footer divs, and in the css, set the width to 100% and use “clear: both;”.

  25. How would I go about making this into a four column footer? I just need four text boxes displayed for our office locations addresses.

    Thanks

  26. I’m using twenty twelve theme. The sidebar disappears on the photo attachments, when you click on a photo that’s in a gallery. What can be done to keep the side bar when viewing the photos indiviaually?

      • Steven, thanks so much for the prompt reply. My site as it appears online is still the one that I constructed via just dream weaver and FTP upload. I have been in the process of converting the whole site to WordPress.org and am not done with all the pages. My server allows me to configure it all and then when all the pages are done, post the whole new site (with the WordPress.org version) with one click of the mouse. So all that said, yes, the problem is not yet visible to the public. I need the sidebar to remain at all times, even when people are looking at the individual images of the photos (my artwork) in the galleries. I have my whole bibliography on my sidebar and I want viewers to be able to click on whatever review or publication easily at all times. But the sidebar disappears when viewing individual photos attached to galleries. I’m wondering if there’s a plug in of some kind of photo gallery that does not do that. I can send you images of the screen so that you no what I’m talking about. Thanks again for your quick response.

        • I use the Jetpack (or Thin Jetpack) plugin to handle the galleries. As your site is very image oriented, you may want to look into other gallery plugins, but I think Jetpack does a pretty good job.

          • Do you know if the Thin Jetpack galley keep the sidebars visible when viewing the individually attached photos? I guess I could just check for my self and I will now! Thanks so much for the tip! We will see!

  27. Hi Paul,

    I’ve been searching answers to create a three-column footer and then your post came to rescue. I downloaded and installed your files. They worked like a charm! The only issue I have is the three widgets stock up on top of each other as a single column. How do I make the adjustments to make the widgets line up side-by-side?

    • Check the CSS and make sure that the CSS as I specified it is actually appropriate for the way you hooked this into your site. There may be class or ID conflicts or you may have missed or added a character when merging my CSS into yours. Use the Developer Tools (F12 key) built into Chrome or your favorite tools in Firefox to see what CSS is in effect on your page.

  28. Hello, The boxes do appear for me but they don’t look great.

    1: The header for the left box is all the way to the right ..against the edge of the template. How can I indent the headings?
    2: Hot can I increase the font size for the headings?
    3: When using a text widget the text doesn’t wrap in the widgit aread ..it continues to infinity on the top line

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>