Twenty Twelve – Footer Widgets Tutorial

Adding footer widgets to Twenty Twelve theme, Part Two of a five part series on Modifying Twenty Twelve theme. If you’ve read the first part of this tutorial, we added a second sidebar, created a custom body class and designed a few three column layouts to choose from.

If you’re just now starting this tutorial, feel free to download the free Blank Child Theme to begin creating your own theme. Each section of this tutorial is independent and can be done individually, so you can use what you want of it and in any order.

We’ll be editing three files

functions.php
style.css
footer.php

The first thing to do is to copy footer.php from the Twenty Twelve directory into your child theme folder.

Adding Footer Widget Areas

In the last tutorial we added a new sidebar (widget area), we’ll be adding three more widget areas but this time they will display within the footer area of our theme.
If you’ve done the last tutorial the following code can be placed just before this line

}
add_action( 'widgets_init', 'mytheme_widgets_init' );

If you’re just starting now, simply add it to your functions.php after the opening php tag.

// Register footer widgets
register_sidebar( array(
	'name' => __( 'Footer Widget One', 'mytheme' ),
	'id' => 'sidebar-5',
	'description' => __( 'Found at the bottom of every page (except 404s and optional homepage template) Left Footer Widget.', 'mytheme' ),
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget' => '</aside>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

register_sidebar( array(
	'name' => __( 'Footer Widget Two', 'mytheme' ),
	'id' => 'sidebar-6',
	'description' => __( 'Found at the bottom of every page (except 404s and optional homepage template) Center Footer Widget.', 'mytheme' ),
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget' => "</aside>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

register_sidebar( array(
	'name' => __( 'Footer Widget Three', 'mytheme' ),
	'id' => 'sidebar-7',
	'description' => __( 'Found at the bottom of every page (except 404s and optional homepage template) Right Footer Widget.', 'mytheme' ),
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget' => "</aside>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

This will register three widget areas. Just like the sidebar we added last time, each widget area has it’s own ID. Twenty Twelve has three widget areas with IDs sidebar-1, sidebar-2 and sidebar-3, since the extra sidebar we added used the ID sidebar-4, we’ll continue from there with 5,6 and 7.

The order these widget areas show up in Appearance > Widgets can be changed, but it involves de-registering the default widgets then adding them back in our own order. This also causes issues with a particular full-width body class in twenty Twelve. It can be done, I’ve done it in Twenty Plus Pro, but it’s really more work than it’s worth, so I’m not including it.

Save functions.php and close it. If you check Appearance > Widgets you should notice three new widget areas. Go ahead and place widgets in them, I usually put calendar widgets as they are the widest widgets available and work nicely for testing.

Don’t worry if you don’t see them on the front page, we still need to add them to our template files.

Add Widgets to Footer.php

Open footer.php that you copied to your child theme folder and find the line that reads..

<footer id="colophon" role="contentinfo">

Directly under this line add the following code

<?php 
/* footer sidebar */ 
if ( ! is_404() ) : ?> 
	<div id="footer-widgets" class="widget-area three"> 
		 
		<div class="widget-left"> 
			<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?> 
					<?php dynamic_sidebar( 'sidebar-5' ); ?> 
			<?php endif; ?> 
		</div> 
 
		<div class="widget-center"> 
			<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?> 
			<?php dynamic_sidebar( 'sidebar-6' ); ?> 
			<?php endif; ?> 
		</div> 
 
		<div class="widget-right"> 
			<?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?> 
					<?php dynamic_sidebar( 'sidebar-7' ); ?> 
			<?php endif; ?> 
		</div> 	
	</div><!-- #footer-widgets --> 							
<?php endif; ?>

Save and close footer.php.

This calls each of the widget areas we registered in functions.php. Notice each one uses the same ID as we used when we registered them. Now your widgets should show up on your website, but we still need to style them.

Style Footer Widgets

Open style.css in your child theme and add the following code to it.

/* ===[ Footer Widget Areas ]=== */

.site-info { clear: both; }

#footer-widgets {
    width: 100%;
    border-top: none;
}
#footer-widgets .widget li { 
    list-style-type: none; 
}

@media screen and (min-width: 960px) {
.widget-left {
    float: left;
    margin-right: 3.5%;
    width: 31%;
    clear: none;
}
.widget-center {
    float: left;
    width: 31%;
    clear: none;
}
.widget-right {
    float: right;
    width: 31%;
    margin-left: 3.5%;
    clear: none;
	}
}

The first bit of code simply tells the entire footer widget area to display 100% wide, each widget area within that is 30.85% wide with a 3.7% right margin. This gives us our basic layout, a lot like Twenty Eleven used.

We also placed the CSS within an @media conditional, so the widgets will display like this only if viewed on a desktop.

Next we need to add CSS for IE8 and IE7, below what we’ve just added copy and paste this.

/* for IE8 and IE7 */
.ie #footer-widgets.three .widget {
    float: left;
    margin-right: 3.1%;
    width: 29.85%;
    clear: none;
}
.ie #footer-widgets.three .widget + .widget + .widget { margin-right: 3.1%; }

It’s basically the same as above, but we’ve made the widget areas slightly more narrow 29.85% so they look good in IE.

Since Twenty Twelve includes a homepage template with 2 footer widgets already, we won’t display these ones on that particular template, so using a CSS conditional, we’ll hide them for that page.

/* Hide footer widgets Homepage Template */
.template-front-page #footer-widgets { display: none; }

Your new footer widgets should now look just about perfect, here’s a screenshot of how they should look.

Twenty Twelve - Footer Widgets

There’s one last thing I’ll add to this tutorial, it’s a small fix for the default Homepage Template widgets in IE8.

If you view the Twenty Twelve Official Demo in IE8 you should notice the footer widgets stack on top of each other. They don’t in IE7 or IE9 and 10, only in IE8, so here’s a fix for that. It’s entirely up to you if you want to add it or not.

/* ===[ IE Homepage Template Widget fix ]=== */
.ie .template-front-page .first.front-widgets,
.ie .template-front-page.two-sidebars .widget-area .front-widgets {
    float: left;
    margin-bottom: 24px;
    width: 51.875% ;
}
.ie .template-front-page .second.front-widgets { clear: right; }
.ie .template-front-page .first.front-widgets,
.ie .template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
    float: right;
    margin: 0 0 24px;
    width: 39.0625% ;
}
.ie .template-front-page.two-sidebars .widget,
.ie .template-front-page.two-sidebars .widget:nth-child(even) { float: none; }
.ie .template-front-page .widget-area { clear: both; }

.ie .template-front-page .widget {
    width: 100% !important;
    border: none;
}
.ie .template-front-page .first.front-widgets { 
	width: 51.875%;
    float: left ;
}
.ie  .template-front-page .second.front-widgets {
    width: 39.0625%;
    float: right ;
}

You can download the Twenty Twelve child theme with footer code already added from here Twentytwelve-Footers

You can view the theme so far on Github where I’ll be updating this as the tutorial continues.
I hope you enjoyed this tutorial and let me know how your theme turned out by leaving a comment!

127 thoughts on “Twenty Twelve – Footer Widgets Tutorial

  1. Severino

    Thx dude, it work perfectly. I don’t know why but i tried lot of different skills for add widgetizable footer. I am “just” a graphic designer in this complicated world of developpement.
    Thx you for this nice tutorial!

    1. Zeaks

      Hi Andrea, you did everything right, the reason the footer widgets are not displaying properly is because of the style you added to them, mainly the borders. This can be fixed easily.
      In this section of the CSS

      @media screen and (min-width: 600px) { 
          #footer-widgets.three .widget {
              float: left;
              margin-right: 3.7%;
              width: 30.85%;
          }

      Change width: 30.85% to width: 28.85%; Then for the IE part change

      /* for IE8 and IE7 */
      .ie #footer-widgets.three .widget {
          float: left;
          margin-right: 3.7%;
          width: 29.85%;
          clear: none;
      }

      Change it to width: 27.85%; (haven’t tested the ie part, reduce it more if it still doesn’t fit.)

  2. rgadon5020

    Hi, I followed your second tutorial on adding a 3-column widget area to the footer of TwentyTwelve. From what I see from my dashboard, the changes to footer.php and functions.php in my child theme were accepted. I know I edited ‘style.css’ and also placed that in my child theme folder. Yet, when I visit ‘Appearances/Widgets’ on the dashboard, I don’t see the addition of the footer widgets, nor do I see the ‘style.css’ file associated with my child theme. Can you tell me what I might have done wrong, or accidentally failed to do? site url: https://gardenofyoga.net/wordpress. Thanks.

  3. rgadon5020

    Hi Everyone, I’m a bit frustrated here. I followed Zeak’s instructions from tutorial #2 to set up 3-column widgets on my Twentytwelve theme WP site, and nothing changed. I’ll be more specific about what I did:

    1. Downloaded the Twentytwelve child theme from this blog, and updated it with current information viz. my WP site.
    2. Created a child theme folder in my ‘twentytwelve’ theme folder (../twentytwelve/twentytwelve_childtheme). Inside this folder, I placed 3 files; functions.php, footer.php, and style.css. Functions.php was initially empty except for a ‘php’ tag at the beginning; footer.php was copied from my ‘twentytwelve’ parent theme folder, and ‘style.css’ contained header information that was changed to refer to my present site. It imported the parent ‘style.css’ into the child theme folder.
    3. In functions.php, I added the code that Zeak suggested in his tutorial, and saved the file in the child theme folder.
    4. In footer.php, I added the code that Zeak suggested in his tutorial.
    5. In ‘style.css’, I again copied and pasted in the code suggested by Zeak in the appropirate places.
    6. Result on my site: No change in Appearance>Widgets, nor Appearance>Menus. I don’t see new footer options available to edit like I’m supposed to.

    When I consult Appearance>Editor, I see the added Functions and Footer files in my child theme. They just don’t seem to be having an effect. What should I do to solve this problem?

    1. Zeaks

      If you downloaded the blank child theme there’s no need to create another folder. Just upload and activate the blank child theme, then make your edits to the file through FTP. or the WordPress editor.
      Do not place a child theme folder inside another theme, it must remain in wp-content/themes/YOURTHEMEHERE not inside Twenty twelve.
      Your directory structure should look like this
      wp-content/themes/twentytwelve
      wp-content/themes/twentytwelve_childtheme

      1. rgadon5020

        Zeak, thank you for your comment about placing the child theme directory in the same directory as the parent theme. After correcting for that, the child theme did load on my site. Unfortunately, all the content for my footer piled up on the right side of the page. Not what I wanted. I decided to start over fresh, and downloaded your `twentytwelve child theme`, then edited the files following your instructions in the tutorial. You mentioned that the 3 files for the 3-column footer widget installation were stored at GitHub (url: https://github.com/Zeaksblog/tutorial-theme). The files posted there contain a little more code than what you described in your tutorial. So I copied the files posted at GitHub for the tutorial verbatim, and posted them to my site. The footer widgets now work properly, just as you described. There is one problem remaining: I ended up adding an extra, lefthand sidebar on my site that shows no content, and which I don’t want. How can I remove this unwanted sidebar?

  4. rgadon5020

    Went back and read the Word Press Codex on ‘Child Theme’s’ (for those new to WP, this step is highly recommended). I overlooked an important point about the directory structure of child themes. They must be placed at the same directory level as the parent theme in your /themes folder, otherwise the child theme will not work. Once this is corrected, go to the WP admin dashboard and look at ‘Appearance>Themes’. Choose the child theme to install (you’ll see your name as the author with version number usually listed as 1.0, just what you put in the header of your child theme). Your site may then look a bit scrambled. You’ll just have to adjust the content of your sidebars and footers, and then you should be good to go.

    1. Zeaks

      The theme on GitHub contains the entire tutorial, the left sidebar included.Your best bet is to download the blank theme again, then follow the part of the tutorial you need. You can basically copy and past it all. If you run into problems, let me know by opening a forum post and I’ll have a look for you.

      1. Robert Gadon

        Hi Zeaks, I copied the code for functions.php just as you posted in your tutorial, and now everything is good to go. Thank you for your help, and a big thank you for generating and sharing the code. I’m sure there’s a good reason why this function was left out of the `Twenty Twelve` theme, but it should have been left in as an option.

  5. John Tweedlie

    Hi Zeaks,

    I followed your tutorial here. It is very good, clear and concise. I have a problem though. Once I have followed all of the steps above the widgets are crammed in together in the widget area and not across the bottom of the site content. I have messed around with the CSS for about 4 hours now and just cant seem to figure out what is going on. Any help or advice would be much appreciated. The demo site I am building it on is: Woool

    Thank you in advance.

    John

  6. phil

    Great tutorial, apart from blithely pasting into the parent footer.php file I got it running in a matter of minutes!

    I’ve a couple of questions if you feel you have time –

    1. I have copied and pasted my copyright etc from a twenty eleven site I built previously, and have used html formatting in the text widget, but it’s not responding to an 8px font. Is this because I need to give an rem measure as well?

    2. I’m using the centre widget, but it is sitting at the LHS. If the LHS widget is empty, I guess that’s the default. Can I code my way around it, or should I just create a placeholder image?

    Cheers for your Tutorials!

    1. Zeaks

      Hi Emily, It looks like all of your widgets are in widget area 3 of the footer. Check Appearance > Widgets and make sure there are widgets in all 3 footer widget areas. if there is, then review your code.

  7. Zeaks

    There should be only 3 footer widget areas if you’ve followed this tutorial. Could you paste your code for footer.php and functions.php to pastebin.com and link it. It looks like the site credits are above the footer widgets as well and they should be under them.

    1. Zeaks

      Yeah, if you’re having problems with it, it’s best to try it out following it word or word, then modify it as you like. That way it’s easier to see what’s causing the problem. Adding a fourth widget shouldn’t cause the stacking issue though, the widgets uses a percentage for width.

      It’s difficult to offer any advice, all i can see if your CSS and that looks correct, I’ll take another look though.

      **If you’ve added an extra footer widget, the CSS will need to be updated, mainly this part #footer-widgets.three .widget

  8. Daniela

    Hello,

    Thanks for sharing this. I followed the instructions exactly as in your post, however the formatting is not working properly when using Chrome. All the widgets are stacked on the right side. When I use Safari or Firefox it works great. Do you have any suggestions for chrome?

    Thanks!

    1. Zeaks

      The widgets stack fine for me in chrome, ie and FF. I took a look at your site in chrome and your widgets look fine as well. Did you figure out what the problem was?

      **I’ve updated the CSS for this, there was an issue when placing more than one widget in a footer area that caused it to not align properly. I was unable to duplicate the problem with all widgets stacking on the right though.

  9. Random

    I added widget areas to the footer. Everything works well expect on the pages using front-page template – footer is just empty. Do you have any idea why widgets are not appearing there?

    1. Zeaks

      The homepage template has its own footer widgets so these ones are hidden, if you want to show them, remove the line that says
      /* Hide footer widgets Homepage Template */
      .template-front-page #footer-widgets { display: none; }

      1. Nina

        When showing the footer on the frontpage using the front-page.php template, the widgets are much narrower and looks pretty stupid. Any idea on how to make them as wide as they are on all the other pages.

        It works like a charm on all the other pages, but I also need it to go on the front page:)

        Thanks!

  10. Göran Johansson

    Hello
    Greatings from from Sweden.

    I must say that i really love your tutorials. And i cant wait until the rest of the series come.
    Hope that thay will come soon. You really have helpt me alot.

    // Göran J

  11. Zeaks

    @Nina, the FrontPage template was designed to use it’s own footer widgets, in this tutorial the footer widgets we added are hidden on that template.If you link the page with the issue I’ll take a look.

    1. Nina

      Hi Zeaks,

      Sorry it has taken some time to upload the site to a live server so that you can have a look at what I mean. You can have a look at the footer widget on this site: http://www.advantagereklame.com

      As you can see the footer widget is much narrower on the front page. It looks perfect on all the other pages.

      Thanks
      Nina

      1. Zeaks

        It looks like the CSS for the front page footer widgets is causing the issue. This section here

        .template-front-page-no-title .widget-area .widget, .template-front-page-no-title.two-sidebars .widget-area .front-widgets {
            border-bottom: 0 none;
            float: left;
            margin-bottom: 1.71429rem;
            margin-left: 70px;
            width: 51.875%;
        }

        Try adding this to the bottom of your CSS

        .template-front-page-no-title .widget-area .widget,
         .template-front-page-no-title.two-sidebars .widget-area .front-widgets {
            margin-left: 0;
            width: 100%;
        }

        It may require a bit more style added, but that should expand them on the front page anyways.

      2. Nina

        Thanks Zeaks,
        When adding your code to my CSS file I can see that the footer widgets expand as I want them to, but the front page widgets gets all screwed up, I guess it’s because they all get referenced by widget-area. I have tried to copy out the code that references widget-area and changing it to footer-area but I can’t seem to figure out all the elements I should change.

        Any ideas on what I need to “duplicate” for the footer in order to get it as wide as it should be??

        Thanks
        Nina

  12. Madeleine

    Hi Zeaks,

    I think I followed your tutorial correctly, but I’m having some problems so perhaps not. In the dashboard, the extra widget areas are showing (Footer Widget One, Footer Widget Two and Footer Widget Three). However when I put widgets e.g. calendars in them, nothing shows up on my site.

    I did have some problems when updating the functions.php file. If I copied the entire file and added code, there was an error (unfortunately I can’t remember exactly what it said), so I made a blank functions.php file and this then added the new widget areas. I did the same with the footer.php file, but I’m wondering if this will have made it not work?

    I did not follow the previous tutorial to add a 3 column layout. Does this affect things?

    Any thoughts? I’m a bit of a web design novice, so bear with me!

    Thanks,
    Madeleine

      1. Madeleine

        Hi Zeaks,

        Thanks for getting back to me so quickly. I have actually just managed to sort it. I must have made a mistake in copying the code somewhere, as I started again and it worked no problem. I also set the width of the footer widgets to 100% so that I have them stacked vertically at the bottom, rather than in 3 columns.

        Thanks for the great tutorials!

  13. Matt

    Hi,
    I have tried implimenting this a couple times but keep runnning into the same problem, my third widget is not sitting on the right of the footer but is below the first widget (like it is being pushed over).

    any pointers would be great,
    many thanks
    Matt

    1. Zeaks

      Hi Matt, looks like there’s some padding or something causing the widget to drop below. Reduce the width of the widgets slightly like this.

      #footer-widgets.three .widget {
          max-width: 29.85%;
          width: 29.85%;
      }

      Instead of the suggested max-width: 30.85%; width: 30.85%;, try 28 if 29 still doesn’t fit.

      1. Matt

        Thank you, that worked perfectly.

        One question though, not that its a big deal, is there a way to center each widget within thier respective containers, at the moment the all sit to the left.

        ..but THANK YOU for sharing such information.

        Matt

  14. Zeaks

    Hi Matt, the widgets actually take up the same amount of space, and all the space is used. If you were to center the widgets, the text within the widget would be centered and I don’t think that’s what you want. Each widget is a different width,you could adjust the right widget like this which makes it look slightly more centered.

    .widget.widget_facebook_likebox { text-align: center; }
  15. Zeaks

    @Nina please open a forum post, it’s difficult to help you through comments. I think I might be confused when you’re talking about the front page and front page template. Please explain what template you are using for your index, if it’s a custom template, the front page page template or a regular page template.

  16. Jessi

    Thanks for this tutorial. Very helpful. I used your tutorial to do 4 widgets across the bottom instead of 3.

    I added two text fields into widget 3 and I’m wanting them to stack. However, they are displaying across and making my 4th widget appear under the 2nd widget area. I’ve played around with the CSS, but can’t seem to figure out what I’m doing wrong.

    Any suggestions?

    1. Zeaks

      Hi Jessi, I’d have to see your code, but I noticed you’re widgets are 25% wide, that doesn’t leave any room for margins. Post any code you’ve modified on pastebin.com and I’ll take a look.

  17. Pingback: “My” new theme! | Jennego

  18. Belinda

    Was about to have a go at adding widgets and I saw your post so I followed your instructions…

    I’m using firefox, and the 3 widgets didn’t fit at that width, I had to reduce width a little to stop one getting pushed down. Did that not happen to you?

    max-width: 30.85%;
    width: 30.83%;

  19. Carol Tompkins

    Thanks for getting back to me so rapidly. Unfortunately this doesn’t seem to be working for me. To clarify, I want to turn off the three footers in ALL of the pages except for on the “home” page. I changing the code to say:

    /* footer sidebar */
    if ( ! is_front_page_alt() ) : ?> (….rest of code)

    This was tried since my home page a new front-page-alt.php (template) that has a sidebar.

    Trying ” if ( ! is_page() ) : ?> (….rest of code) ” resulted in the footers being turned off on all of the pages, including my new home page template. Closer to what I want except I need the 3 widgets to show up in the footer of my new “home” page.

    Is there a way to say ” only show widget-area three on my home page (front-page-alt)?

    I’m using your Twenty Twelve Pro as a base but my php skills aren’t the best..

    thanks,
    Carol

    1. Zeaks

      is_front_page would work for the page that is your front page, doesn’t matter if it’s a template or normal blog posts. Open a forum post and show me the code you’ve used in footer.php and I’ll take a look.

  20. Daniel

    Hi,

    I’m having issues with this modification as well. I triple-checked that I’m following the instructions in this post. However, I don’t have the areas to add widgets under Appearance > Widgets. There are the default locations and the 2nd sidebar I added based on another one of your tutorials. The footer.php file is located within my child theme. Could this be a cache issue?

    1. Zeaks

      Hi Daniel, I doubt it’s a cache issue if it’s not showing up in Appearance > widgets, caching plugins only cache the front end usually.
      If you’ve already added a sidebar make sure all your sidebar id’s are unique. If you still can’t see an issue after checking that , open a forum post and use pastebin.com to show me your code.

  21. DrGEN

    Hi!
    thx for the tutorial.
    I made exactly what you said but I only can put one widget in each column. If I put a second one, this is appearing in the next widget area (column).

    Where is my mistake?

    pls help!
    thanks in advance.

  22. Pingback: Make a WordPress website | nothingbutzen

  23. Zeaks

    Try adding this to your CSS, it makes the widgets display properly, but they are not in the proper order from what i can tell. You’ll need to move them around to place them where needed until I figure out what the issue is.

    /* Increase theme width to 1000px */
    footer[role="contentinfo"] {
        max-width: 1000px;
        max-width: 71.4285rem;
    }
    @media screen and (min-width: 960px) { 
        .site {
            max-width: 1000px;
            max-width: 71.4285rem;
        }
    }
    .ie .site { max-width: 1000px; }
  24. Ronnie

    Thanks for the tutorial, works great and exactly what I was looking for. Just one question.
    In the WP widgets admin the widgets are above the main and home one and home two. How can I move the footer widgets last. Thanks

  25. Elise

    Hi,
    I started by pasting the code into function.php (the registersidebar code) and just this had my wordpress site go white. Something I missed out on?
    I would love for this to work as I just finished making a whole site in the twentythirteen-theme only to find out you cant have full width on pages without widgets, a major bummer…

  26. guiliguili

    Hi zeaks,
    I used your advices and it works very well.
    Thanks a lot for this.

    But, I have a little problem I can’t resolve for my footer.
    I put links in the footer : 3 widgets, 3 links zone.
    But each widget contains 2 or 3 links categories.

    In each footer widget, I would like to get the links categories superposed vertically.
    Graphically, I saw this –> [] [] (a link categorie is here represented by []), but I would kilke to see this (see next line)
    []
    []

    Do you have an advice for this problem ?

  27. sai sandeep

    Hi Zeak, I need some help from you.
    i just want to know whether you used any plugin for your widget nav menu.
    if it is a code mail me zeak.
    I just liked it, and want to use on my site, Please Send me the code to my email if it not the plugin.

    1. Zeaks

      It’s coded using Custom menus and the CSS class option. I was going to write a tutorial on how to create a menu like that using Genericons instead but it’s a bit complicated and there’s no real way to automate it. Feel free to view the CSS of this site to see how it’s done.

    1. pandu ari

      If you’re just now starting this tutorial, feel free to download the free Twenty Twelve blank child theme to begin creating your own theme. Each section of this tutorial is independent and can be done individually, so you can use what you want of it and in any order.

  28. hugoc

    Hello

    This fantastic tutorial works terrifically – however all of my widgets are biased to the left. What I need is the three widgets to take up the whole of the bottom area of the widget space, left widget aligning to the left, middle widget aligning centrally and right widget aligning to the right.

    Can this be achieved using the CSS posted here ?

    Obviously , I do not want to centrally align the contents of the boxes just the boxes themselves.

    Many thanks in advance for your help !

      1. Zeaks

        There is a first part to this tutorial. In the first part the site width was increased to 1000px. Your site doesn’t have enough room to display the widgets at 30%, change the width and max-width of the widgets to max-width: 29.85% and that should fix it.

  29. RC

    Hi. Thanks for this excellent tutorial.

    My problem is that when I make these changes to functions.php, style.php and footer.php in my child theme, I get the following error.

    “Fatal error: Cannot redeclare twentytwelve_setup() (previously declared in /home/content/43/12104643/html/mysite/wp-content/themes/twentytwelve-child/functions.php:84) in /home/content/43/12104643/html/mysite/wp-content/themes/twentytwelve/functions.php on line 77″

    Do you have any suggestions?

    Thanks so much.

    1. Zeaks

      It looks like you may have copied the functions.php file from Twenty Twelve to your child theme and it’s causing the duplicate twentytwelve_setup functions.

      Only some functions from twenty Twelve are able to be used again in a child theme. It’s best to create a new empty functions.php file. If you don’t know how to do this you can download an empty child theme with the files already included to start your own. http://zeaks.org/create-a-wordpress-child-theme

  30. Zeaks

    Hi Jason, this tutorial was meant for a child theme. Since you’ve edited the Twenty twelve files you should add all CSS to the end of the original stylesheet. Try that and let me know if it resolves the problems.

  31. Pingback: Footer Widgets Tutorial | My WordPress Blog

  32. Neal

    Just wanted to tip my hat to you Zeaks. An awesome tutorial and everything worked. Nice to find a good source of quality info. The only thing I had to play around with was the width as I hadn’t done the previous sidebar widget tutorial. I also renamed the widgets in the dashboard with left right and center titles to easily identify them.

    Thanks again,
    Neal

  33. AJD

    WP: 3.8.1, Theme: Twenty Twelve.

    After I added the code I’m getting the following error:

    Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘mytheme_widgets_init’ was given in /wp-includes/plugin.php on line 429

    There are no other plugins installed.

    Thanks.

  34. alpinedragonfly

    Thanks for the tutorial. I have a problem, though. I’ve double checked everything three times, and my three widgets all float right, stacked vertically. I checked the previous tutorial and it appears I’m not missing anything you might have added there. My width is already 1024px. Obviously I’m not seeing something… Any ideas?

  35. Beth

    Thanks – great tutorial – I have used a child theme and it it works perfectly.

    I just have an extra wish – I only want to show content in 2 of the 3 widget areas. And I want it to be the first and the last widget. But when there is no content in the 2. widget, the content of the 3. wirdget moves to the middle of the widget area at the bottom of the site. Is it possible to keep the space in the middle without having any content ind the 2. widget?

    Thanks!
    Beth

  36. Pingback: Twenty Twelve – Footer Widgets Tutorial | Jimmy Knoll – Web Developer

  37. Pingback: Twenty Twelve – Footer Widgets Tutorial | Jimmy Knoll

  38. David

    Zeaks,

    I’ve successfully created the setup on a site, but when I add two widgets to each widget area, the widgets do not show up in their respective columns. They move to the right, as if filling rows instead of columns.

    The first two widgets of the LEFT widget are side-by-side instead of vertically on the left side. The CENTER widget’s first item is at the right of the page, and the second item is down below on the far left. The RIGHT widget’s first item is centered in the second row, and it’s second item is at the far right.

    Any idea what I’m doing wrong here? I double and triple-checked your code versus mine and it’s correct. Any ideas?

    1. David

      Actually, I figured it out. Your setup flows the widgets to the right, assuming people will only use three widgets.

      In footer.php I broke up the footer-widgets div into three separate divs, each holding a separate widget area. Then I changed the css so that the footer widgets div had…

      min-width: 300px; (retaining a minimum width for tablets and phones)
      max-width: 30%; (holding down the width for desktop)
      border-top: none;
      margin-right: 3%; (for desktop view)

      That allows multiple widgets inside each widget area, stacking them vertically in columns.

      1. jrubemJackson

        Hi, David
        You said this:

        ***
        In footer.php I broke up the footer-widgets div into three separate divs, each holding a separate widget area. Then I changed the css so that the footer widgets div had…

        min-width: 300px; (retaining a minimum width for tablets and phones)
        max-width: 30%; (holding down the width for desktop)
        border-top: none;
        margin-right: 3%; (for desktop view)

        ***

        How you made it? Did you something else in css? Zeaks presented the code below. I used this code, but my footer stayed with the same problem. Please, show us your code to fix this problem:

        **

        1. David

          Sure. And this is for my site in particular. Here is the code I placed in footer.php:

          And here is the CSS for those:

          For mobile setups before the media queries begin in Twenty Twelve:


          #footer-widgets {
          width: 100%;
          border-top: none;
          }

          #footer-widgets .widget li { list-style-type: none; }

          .template-front-page #footer-widgets { padding-top: 0; }

          And for those inside the media queries for 960 pixels:

          #footer-widgets {
          min-width: 300px;
          max-width: 30%;
          border-top: none;
          margin-right: 3%;
          }

          #footer-widgets .widget li { list-style-type: none; }

          .template-front-page #footer-widgets { padding-top: 0; }

          Hope this helps!

  39. jrubemJackson

    Thank you for your attention, David. Thank you for your site, Zeaks, very good. I was unable to install _ _ three columns footer. I followed step by step tutorial, but it did not work. I’m using twenty twelve theme. If someone who got the three widget columns and can send to my email [jrubem@gmail.com] the code used in the footer.php, functions.php, sidebar.php and css style … thanks.

  40. JB

    I am having the toughest time adding “comments” and “leave comment box” below each new post. If there is a code out there that does not ask for email verification (desirable but not necessary) can someone please send it to my email address – Jollyballs2246@gmail.com.. Zeak thank you for the Twenty Plus Pro theme it has saved me hours.

  41. Marlies

    Thanks for the code Zeaks! I got the footer areas working, and thought everything was fine, until I noticed that the lay-out will be messed up when adding more than one widget to a widget area. Looks like that’s a problem in the code. Any idea?

  42. jimmyknoll

    This tut is kinda bunk dont you think? I mean its greatly written and all but this cant be used on a professional website for a client. I mean your code will only allow for one widget in each widget area. When the client wants to add more widgets to their footer…. then what?

    1. davidborrink

      Jimmy, click on “Older Comments” below and read in the additional comments about how to put multiple widgets in the individual widget areas. I expanded on Zeak’s tutorial to get that done.

      1. jimmyknoll

        oh kool. Thanks, i was looking though but didnt see it before. Dont get me wrong guys… I love Zeaks blog.. His tuts here are excellent . I use them with 2012 still to create quite few nice websites for clients. Thanks Zeak!

  43. Zeaks

    The code has been updated and the footer widgets should stack properly now. I’ve updated the tutorial theme and added a child theme with the above code (links at the bottom). Let me know if you run into any issues.
    Sorry for the delay

Leave a Comment

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

*
*