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

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

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

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

  4. Pingback: Footer Widgets Tutorial | My WordPress Blog

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

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

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

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

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

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

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

          <!-- #footer-widgets area four--> 
          <!-- #footer-widgets area five-->
          <!-- #footer-widgets area six-->
          <!-- #colophon -->

          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!

        2. David

          Okay, my footer.php code didn’t get posted above. I’ll try again. Here is the footer.php code….

          <!-- #footer-widgets  area four-->
          <!-- #footer-widgets area five-->
          <!-- #footer-widgets area six-->
          <a href="http://artsandletters.biz" rel="nofollow"></a>
          <!-- .site-info -->
          <!-- #colophon -->
  12. 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.

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

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

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

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

*
*