With the beginning of the new year, I’ve decided that it’s time to step things up here at StudioPress – this includes taking our blog to a higher level. One of the things I want to focus on is helping our users include featured elements into their themes.
Disclaimer: This tutorial was written prior to the release of the Lifestyle and Streamline child themes for Genesis, and was meant as a way to add widgets to the “classic” themes and not the “child” themes.
A lot of folks have seen the widgeted footer area that we have included in the Streamline theme and have asked us how they could add that to their theme. For this example, I’ll be using the Lifestyle theme’s code, but most/all StudioPress themes have similar code so it should work just the same. Keep in mind that it’s always a good idea to make a backup copy of the style.css and footer.php files before trying this.
Step #1
The first thing to do is to register the widgeted footer areas in your theme’s functions.php file. Using the Lifestlye theme as an example, here’s what the code looks like right now:
if ( function_exists('register_sidebars') )
register_sidebar(array('name'=>'Sidebar Top','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Sidebar Bottom Left','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Sidebar Bottom Right','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'468x60 Header Banner','before_title'=>'<h4>','after_title'=>'</h4>'));And here’s what it will need to look like to register the additional areas:
if ( function_exists('register_sidebars') )
register_sidebar(array('name'=>'Sidebar Top','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Sidebar Bottom Left','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Sidebar Bottom Right','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'468x60 Header Banner','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Footer #1','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Footer #2','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Footer #3','before_title'=>'<h4>','after_title'=>'</h4>'));
register_sidebar(array('name'=>'Footer #4','before_title'=>'<h4>','after_title'=>'</h4>'));Step #2
The second thing you’ll want to do is establish the proper style for the widgeted footer area. Because most StudioPress theme’s footer areas are defined as “footer”, I’m going to define the main “div” for the widgeted footer area “footer-widgeted”. You’ll need to add all of the CSS shown below to style.css, but I’ll break them out so you can see what each section is. Make sure if you’re theme’s width is less than 960px, you’ll need to adjust that below.
Main Container Styling
#footer-widgeted {
width: 960px;
margin: 0px auto 0px;
padding: 0px;
}Paragraph Stlying
#footer-widgeted p {
color: #333333;
font-weight: normal;
margin: 0px;
padding: 0px 0px 10px 0px;
}Hyperlink Styling
#footer-widgeted a, #footer-widgeted a:visited {
color: #333333;
text-decoration: none;
}
#footer-widgeted a:hover {
color: #333333;
text-decoration: underline;
}Unordered List Styling
#footer-widgeted ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#footer-widgeted ul li {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 5px;
}
#footer-widgeted ul ul {
list-style-type: none;
margin: 5px 0px 0px 20px;
padding: 0px;
}
#footer-widgeted ul li li {
list-style-type: square;
margin: 0px;
padding: 0px;
}
#footer-widgeted ul li ul li {
margin: 0px;
padding: 0px 0px 3px 0px;
}Widget Headline Styling
#footer-widgeted h4 {
color: #333333;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0px 0px 5px 0px;
padding: 0px;
}Widget Styling
#footer-widgeted .widget {
background: none;
margin: 0px;
padding: 5px 0px 0px 0px;
border: none;
}Widget Columns Styling
.footer-widgeted-1 {
width: 215px;
float: left;
margin: 0px;
padding: 20px 20px 5px 10px;
}
.footer-widgeted-2 {
width: 215px;
float: left;
margin: 0px;
padding: 20px 20px 5px 10px;
}
.footer-widgeted-3 {
width: 215px;
float: left;
margin: 0px;
padding: 20px 20px 5px 10px;
}
.footer-widgeted-4 {
width: 215px;
float: right;
margin: 0px;
padding: 20px 0px 5px 0px;
}Step #3
Lastly, you’ll need to add the proper code to your footer.php file. Most StudioPress themes are coded similar, so this should work. Inside your theme’s footer.php file, look for this code:
<div class="clear"></div>
<div id="footer">
Essentially, you’ll be placing the code below in between the two lines you see above. As a result, you’re code should look like this:
<div class="clear"></div>
<div id="footer-widgeted">
<div class="footer-widgeted-1">
<ul id="footer-widget-1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #1') ) : ?>
<li>
<h4><?php _e("footer-widgeted #1 Widget", 'studiopress'); ?></h4>
<p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
</li>
<?php endif; ?>
</ul>
</div>
<div class="footer-widgeted-2">
<ul id="footer-widget-2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #2') ) : ?>
<li>
<h4><?php _e("footer-widgeted #2 Widget", 'studiopress'); ?></h4>
<p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
</li>
<?php endif; ?>
</ul>
</div>
<div class="footer-widgeted-3">
<ul id="footer-widget-3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #3') ) : ?>
<li>
<h4><?php _e("footer-widgeted #3 Widget", 'studiopress'); ?></h4>
<p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
</li>
<?php endif; ?>
</ul>
</div>
<div class="footer-widgeted-4">
<ul id="footer-widget-4">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #4') ) : ?>
<li>
<h4><?php _e("footer-widgeted #4 Widget", 'studiopress'); ?></h4>
<p><?php _e("This is an example of a widgeted area.", 'studiopress'); ?></p>
</li>
<?php endif; ?>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="footer">
About Brian Gardner
Good looking out Brian, right on time brotha. More of this please.
Thanks Domenick – and don’t worry, there will be plenty more of this.
Thanks for this. it rocks! My only problem I am having is that I cannot seem to get thumbnails to show up on sections of the Church theme. MY fav of all time theme BTW! Freakin awesome! It used to work. But, I had some tech problems and had to start all over again with my wordpress on godaddy. Now I am not sure how to get the thumbnails to work for my posts on the main page. Can anyone help?? Do I need some plug in for it? Also, is there a way to get thumbnails to show on the “blog” type pages for the church theme? I would appreciate some help. Thanks!
oh, and my website is http://www.cjgroove.com for anyone who can help. Again, thanks!
nevermind. got it!
Sorry, I didn’t see this until just now. I’m glad you got it sorted out! In the future, feel free to post on the support forum as well, and we’ll be glad to help out.
grate tip , wanted to add widgets but had some css alignment problem, i hope to solved this now but only after my exams. Thanks Brian.
My footer.php looks nothing like what you stated. Which means I did all the steps and now am stuck… I stuck it in there, hoping, and it shows up in admin/widgets, but it’s not looking right…
Hey Deanna – not sure where you are stuck. I went to your site and it looks like you have the 4 columns of widgets showing.
It took quite a bit of fussing to get them in columns (I had one column with 4 entries for the longest time lol), and it’s not dark like I thought it would be, but I think I can live with it.
I do love your themes
How did you fix that problem as I’ve got the same thing. here’s my url: http://www.trinitaspeople.com also I just threw in some calendars just to check it.
Hi there.
I just inserted all this code into my Church Theme v.4.0 site and get the same problem Deanna did. How did you fix this so the widgets are spread across the bottom instead of stacked in one column., Please help.
Thanks.
The reason I most love Studiopress is that the coding and the structure is so well written and simple to follow.
Modifying themes is a breeze and is far less likely to add problems.
I started my WordPress ‘education’ with Studiopress and they are still teaching me great things.
Now they have Nathan as well. Simply brilliant, can’t wait to get my teeth into Genesis – I am holding off on projects to check it out first.
Thanks, Kirk! Beta is coming *really* soon, so it won’t be long now!
This is highly informative and instructional, thank you for doing this Bryan. This year again my students will be using StudioPress themes which worked well last year.
Thank you Cemal, glad our themes are working so well for your students!
Hi Brian,
I followed the steps stated above. All is well. But the background is not showing. I would like the background colour to be the same as it was before.
How do I do so?
Hi Gopal – just set a background color here:
#footer-widgeted {
background: #FFFFFF;
width: 960px;
margin: 0px auto 0px;
padding: 0px;
}
obviously, changing it to the color you need.
Hi and thx for that tutorial! I try to get it, but i can’t get it working at the Metro Theme. As you can see on my site. Any ideas about that?
Try adding this right before you final closing div:
<div class="clear"></div>Thx! I worked it out:
I made a new div container above the grey footer
#footerwid {
width: 954px;
margin: 0px auto 0px;
padding: 1px;
text-align: left;
}
and put your code in.
More of that Brian!
PS: Looking forward to the Genesis project
Tnx, Brian, this post come just in right time. I’m just doing some redesign of my site, and this will be the part i was missing. Best wishes from Serbia.
Hey Brian! Just want to say thanks for what you do. I’m actually here in Chicago too. Been in network marketing for 5 years and the week I decided that 2010 was gonna be my ‘breakthrough’ year and that I needed a great blog, you showed up!!
Starbucks addict, ey? I work at Sbux for my day job (although not for much longer). If you’re ever in my area we should grab a cup of joe!
Be well, my friend.
Hey Brian – thanks so much for the comments. Where in the Chicago area are you?
Hi Brian,
Great job!
Just in time, because in the last 2 days I’m looking for new spaces in the Church Theme to add new notices to my web magazine.
It’s a pleasure to use a StudioPress Theme, first of all for your excellent customer service.
Thanks and Happy new Year with a lot of new themes.
fabio
Thanks Fabio. Best wishes for a great 2010.
Brian, et al
how about widget code to replace .hpmainleft in Executive so that area can be easily formatted using HTML. Page formatting does not carry through to the front page.
i like the widgeted footer! …AND Studiopress
Brian;
Perfect stuff and the kind of quick info we need. Kudos.
Those types of footers have become popular and adding them to your stuff rocks.
Eric
Hey, was my thread in the support forums the idea behind this tutorial?
I already have a BIG footer in my SP theme but this one looks more scenic and of course, the code framework used will exactly match the themes’ actual coding. Will change to this one..
Uuuuuuuuuuuu…. uuuuuuuuuuuuuuuuuu!!
YAY!
Brian, you are a mind reader! This was my project for this month: “Get full-width footer widget for theme”. I had the big GOOFY grin when I copied over your code and POOF – widgeted footer!
PROBLEMS:
As you can see from my site, I’m close but doggone it – can’t get the green (original) footer to show up below the new widgeted-footer?
And I can’t get that widgeted footer to be a different background color — I must be changing it in the wrong place?
Venti Pumpkin Spice Latte on me!
Anj, just ask for help in the Support Forum.
Hi Brian:
Just starting with WordPress & had your lifestyle theme made into blog above. I have category “Welcome – About” towards bottom half of Home page. Would like to put long teaser there instead of short one. In other words, I’d like to place about half of the complete post there, with picture. Is that possible?
Thanks,
Hal
Yes, just ask in the Support Forum.
Hi Craig:
Went to Support Forum. They require a transaction ID to register. My site was made for me by someone in Europe. Therefore, I don’t have a transaction ID.
But I sure would like to find someone who could answer my question. Can You?
Thanks,
Hal
Of course we can, but we only provide support to our Members.
Hi Brian,
This was awesome, three steps, I LOVE it! Of course, being the newbie that I am, I can’t get it just right. I followed the steps to the T and the widgets are there but instead of being right next to each other, they are right beneath each other. I’m sure it’s something insanely easy, can you please let me know what it is?
Thanks!
Sanaa
Nevermind. I don’t know what happened but it’s like it’s supposed to be. OMG Brian, THANKS FOR THIS!!!
I love the “DO THIS TUTORIALS” –so much easier to follow clear concise instructions.
xoxoxooxox
Sanaa
Hey Sanaa – glad to hear you got it working, I took a quick look at your site, and it’s looking great and love the implementation of the widgeted footer area!
Brian et al,
This is wonderful! My site is a hybrid of two of the old revolution themes which were customized by Rebecca and then I tweaked a bit more. I just love the Studio Press themes!! Just yesterday I finished a customized site (my first solo customization) using Streamline and loved the widget area so much I was wondering how to get it on one of the other themes. Then, I saw this when showing a friend the SP site. Awesome, awesome!
Thanks to you and your team for an awesome product and great customer support.
-Tee
Hey Tee,
That’s so great that you’ve moved on to customizing other sites – I’m excited for you! Be sure to post it in the showcase area of the forum
Hi Brian!
I copied and pasted everything and the only problem is that my columns are above one another instead of being side to side. Did I miss a step maybe?
I would really appreciate your input!
Duuhhhh!!!
Please disregard my previous request for help.
All I did was refresh the page again and bingo-bango. . . everything was where it should be.
Thanks again for all of the valuable resources you provide us.
Great news Bea – glad you got things figured out!
Hi Brian,
I copied and pasted everything and the only problem is that my columns are above one another instead of being side to side. How can I fix this. Here is my url: http://www.trinitaspeople.com/ I tried refreshing many times and using different browsers but… I am a newbie and don’t exactly know what I’m doing yet. Thanks!
Hi David, I can’t see that on your site right now. If you’ll ask in the support forum, we’ll help you troubleshoot the code. Thanks!
Hi there, i have a little problem.
i try to Add a Widgeted Footer Area in News theme, but i dont know why i dont get a full width Widgeted Footer Area, but an 960px wide.
Anyone? pls help
Hi Costin,
Go ahead and pop over to the News section of the support forum, and we’ll help you sort it out
Hi,
the widgeted footer looks great, I installed it, it’s just that it won’t let me add any widgets in the admin panel, what I mean is I can’t drag and drop them in there.
the admin panel does allow me to drag and drop in other areas like the side bar top.
What could it be??
Go ahead and post a topic in the support forum, and we’ll help you work through it
This worked as advertised with my LifeStyle theme. I also changed the background using Rebecca Diamond’s suggestion mentioned in the comments. The end result is quite satisfactory. Thank you.
Brilliant tutorial thanks. Would love the same sort of thing for adding extra widgetized sidebars to a theme.
Hey! Thank you very much for the code. I was searching for it!
Love new footer. Does Church WordPress Theme works?
I love this footer addition to my website, which i’ve customized the appearance to. However i’ve noticed that since i’ve added this widgetized footer to my site (since Saturday), my google analytics reports don’t seem to be registering the “keywords” typed into search engines to get to my site.
In other words, when i look at my google analytics report, it tells me how many visits i received on my site, however it doesn’t tell me what keywords were typed into search engines to get them there. I can’t imagine how this has affected my analytics reports, but it’s been doing this ever since i added this widgetized footer to my site. Saturday, Sunday’s, and Monday’s reports don’t tell me all the keywords people typed in, and this is important for me to know.
For your information, i have my analytics code typed entered into the Lifestyle Theme Options Analytics/Stat Tracker Code box. While i added the code in Step 3 to the footer, i entered it into the space explained, and did not effect the coding for the analytics tracking.
Does this make sense to anyone? Please let me know what you think…
Sounds to me like you wiped out the code in footer.php that places the Analytics/Stats code into the footer.
Suggest you compare your original version of your Theme footer file to what you did when you made these changes.
Please ask future support questions in the Forum. Thanks.
Craig…the code is still there as it should be. Like i said, analytics is properly accounting for all the other site stats other than the keywords. So it’s still working for the most part. Do you suggest i manully put the code in the footer, rather than rely on the Lifestyle Theme Options implementation?
Hi doing this has made my sidebar disappear!! Though the footer now looks beautiful and works great but there is just a blank space where the sidebar was!
Would you be able to help please?
Sure, but we only provide support via our Theme Support Forums, not via comments.
This is great! How can I change the height of the footer if I wanted to?