from: http://zeaks.org/tutorials/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.
If you’ve done the last tutorial the following code can be placed just before this line
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.
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.
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.
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.
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.
I hope you enjoyed this tutorial and let me know how your theme turned out by leaving a comment!
Gilmon D. Bernal
Twenty Twelve – Footer Widgets Tutorial
1 Reply
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' ); // 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>',
) );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"><?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; ?>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 ]=== */
#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 {
float: left;
margin-right: 3.7%;
width: 30.85%;
}
#footer-widgets.three .widget + .widget + .widget { margin-right: 0; }
}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.7%;
width: 29.85%;
clear: none;
}
.ie #footer-widgets.three .widget + .widget + .widget { margin-right: 0; }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; }
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 ;
}I hope you enjoyed this tutorial and let me know how your theme turned out by leaving a comment!
Gilmon D. Bernal
