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

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">
			<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
				<?php dynamic_sidebar( 'sidebar-5' ); ?>
			<?php endif; ?>

			<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
				<?php dynamic_sidebar( 'sidebar-6' ); ?>
			<?php endif; ?>

			<?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
				<?php dynamic_sidebar( 'sidebar-7' ); ?>
			<?php endif; ?>
		</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; }

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

@media screen and (min-width: 600px) { 
#footer-widgets.three .widget + .widget + .widget {
    margin-right: 1.71429rem;
}

#footer-widgets.three .widget {
    clear: none;
    float: left;
    margin-right: 1.71429rem;
    max-width: 30.85%;
    width: 30.85%;
	}
}

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

109 Comments

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

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

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

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

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

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

  6. Pingback: Make a WordPress website | nothingbutzen

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

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

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

Leave a Reply to Belinda Cancel reply