The 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
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.
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.
Thank you very much …
I got it now…
Thank you very mutch. It works!
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
Sean: Feel free to email me your PHP code and CSS. There’s probably a mismatch somewhere in the DIVs. email: webmaster@sterndata.com
Yes, that`s right,
div id=”footer-middle”>
You forget a “<" But other than that it works!
Thanks! I had to do a lot of editing because WordPress doesn’t have a “code” mode. I guess I missed that one.
Which page is that typo at? I’m having the same issue with everything being left aligned.
If you download the .zip file, you should be OK. Make sure you have have the div names matching the names used in your CSS.
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
Ooops, some uls and h3s missing in my comment…
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.
Glad to know about about twenty twelve theme. Good post.
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.
Thanks a lot for the tutorial!
Landon
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.
Brilliant, simple, keep up the good work!
Twenty Twelve sticky footer how can i place the footer to the bottom of my page and 100% with for example see my own page http://www.pixelportal.de.
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.
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.
I guess I’m not understanding what you mean by “sticky”.
So here is what i mean the footer sould fixed on the bottom of the page see example here
http://optimwise.com/create-a-sticky-footer-for-wordpress/
I see what you mean. You should probably start by moving the footer widget div to the bottom of the footer.php file, below the call to wp_footer. Then, follow the guide in the article you cited or check here: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Did u mean after this line all dynamic sidebars like left center and right.
I think you’re going to have to do some experimenting with the location and of the DIV and the CSS that (tries to) stick it to the bottom of the page.
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.
Ok but this was the reason why i ask you maybe you have a idea how to place my footer to the bottom of the page I’m not so familiar with css.
Michael: It can be done, I’m sure. In fact, I’m thinking it might be useful for a site I’m working on. When I work it out, I’ll post something about it.
Thank’s for your time. I would be glad to hear from you again. If I find a solution before i will come back to you.
Thanks, this is the thing I was looking for in Twenty Twelve.
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!
Did you set it up as a child theme? Is the sidebar gone or pushed somewhere? What’s the URL for your site?
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!
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?
I think it may require a little tweaking of the templates but, otherwise, I don’t think it would be a big deal.
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()”.
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?
Yup. That’s the only change for this particular example.
Hi Steven, Just a short comment to thanks you for your code for the footer for the Twenty Twelve theme. All sorted and running
Hey Steven, Works like a charm! Thank you for your efforts
Excellent!!! You solved my problem
Thanks a lot!
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?
Thanks a lot! Works great, you’re a hero
Thanks! Very useful!
Pingback: Wordpress twenty eleven – Schnell ein Child Theme und einen Widget fähigen Footer hinzufügen | PIXELTUNES
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?
Great. Thats easy. Thank you!
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?
In the style for the footerwidgers, add “font-family:xxx ” to match the font family you’re using on the rest of the site.
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%;
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.
by the way this is the website I’m working on, http://www.cebushowroom.com
In the css for #footerwidgets, add “display:inline-block;”. This will effectively change the height of the div to the height of its elements and allow you to assign a background color.
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!
Pingback: Wordpress twenty eleven mit Responsive Footer | gepaddelt und verpixelt
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.
Pingback: Wordpress twenty eleven – Schnell ein Child Theme und einen Widget fähigen Footer hinzufügen | Oli Test Blog
Thank you! Tried for a long time to figure it out but had lots of problems. Got it working – don’t quite understand it all but I will soon I hope. Thanks again.
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?
Thank you sstern!
I did a mistake withe the functios.php, now is working fine.
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.
Thanks for the information.
Worked perfectly first time, just what I wanted.
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!
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;”.
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
In the functions.php, add another stanza for a 4th widget. In footer.php, add another block. In the CSS, change the widths to 20% each to allow spacing.
Perfect! Thanks. How about centering the text in the boxes and changing color/font?
Thanks again
Dude — do the CSS. It’s not hard.