As a follow-on from Thesis full-width headers 101 this is a bit about styling your footer in the Thesis theme.
Footers are a bit easier than headers because we don’t have the two separate elements (title and nav) to deal with. Yay!
Full-width framework
When you’re in Full-width page layout (as per the Design Options page) the HTML footer structure is,
- div#footer_area
- div.page
- div#footer
- p (with attribution info)
- div#footer
- div.page
Default Thesis footer
Style background colour with CSS
So to get a background that spans the full width of the page you simply give the #footer_area a background in custom.css (and remove the double border, which becomes out of place very quickly).
.custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;}
.custom #footer {border-top:0;}
Full-width Thesis footer with background
That’s pretty much it! Unless you would like to add some extra information to your footer as I’ve done on my blog and Simply Blog.
Footer on simplyblog.net
Footer on kristarella.com
Adding extra footer content
The way I like to add info to the footer is the same way that it appears in the sidebar. I.e., in a div with the class sidebar, an unordered list with the class sidebar_list and list items with classes widget. That way the lists and text should have the same formatting as the sidebar and fit in nicely with the theme.
Add the following to custom_functions.php.
function custom_footer() { ?>
<div id="footer_1" class="sidebar">
<ul class="sidebar_list">
<li class="widget">
<h3>About</h3>
<p>Hello, this is me, and this is my blog. I like blogging, Thesis and teh intawebs.<br/>
<a href="/about/">Read more on my about page</a></p>
</li>
<?php thesis_widget_recent_posts('', 'Recent Posts', '6'); ?>
<li class="widget">
<?php wp_list_bookmarks('title_before=<h3>&title_after=</h3>&category=2&category_before=&category_after='); ?>
</li>
<li class="widget">
<h3>Tags</h3>
<?php wp_tag_cloud(''); ?>
</li>
</ul>
</div>
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');
You’ll notice it almost fits with the style, but everything is right-aligned, and the widgets aren’t next to each other. Also, if you’ve got a coloured background the text is a bit light. So, you can add the following to custom.css.
.custom #footer_1 {text-align:left; color:#333;}
.custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:left;}
.custom #footer_1 ul.sidebar_list li.widget h3 {color:#222;}
.custom #footer_1 ul.sidebar_list li.widget a {color:#444; border-bottom:0;}
.custom #footer_1 ul.sidebar_list li.widget a:hover {color:#111;}
Thesis footer with background and widgets
That’s about it. You can replace the insides of <li class="widget"> </li> sections with whatever you want in your footer!
I love questions, so ask away!
{ 8 trackbacks }
{ 100 comments… read them below or add one }
Hey Kristra
Excellent work! Your tutorials are clear and helpful! Keep up the great work. Thanks for sharing your resources and tips. :)
That’s pretty simple. I reckon these Thesis guys should have you putting their tutorials together, certainly nice and easy to work through with the layout you’ve put together.
If I want to replace the links in the footer just adjust the links and code in the php. functions file? okay, what if I want to change or show more pics from flickr on my social page? I want to replace two of the links in the footer. Thanks in advance for the help.
-Miguel
Thanks guys!
Mat, I’d be happy to, but as long as no one is paying me to do anything I figure I’ll just keep creating traction on my own blog, as well as reasonably regular visits to the forums. ;)
Miguel, for your footer the links are all generated from WordPress link categories. So if you want to add or remove links the best way to do it would be through the links manager. I.e. the Social ones are in a category called social, same for ‘worth a read’ and the popular ones are in the post category ‘Popular’, you need to add or remove posts from that category. As for showing more thumbnails from Flickr, try uploading more photos, you’ve only got 6 on there and they’re all showing.
Chiming in, thanks for the clear and great write up :)
That was awesome!!
I’ve been looking for something like this for awhile. Can’t wait till I have a bit of free time, to try it out on my site.
This is great! Thank you so much. Just a couple of problems . . . my text won’t wrap around photos in the footer and the font sizes are off. Is there some code I’m missing?
Also, can you tell us how to style our comments like yours?
THANKS!
Hey Jenn,
To wrap text around images float the image. For that image in my footer I gave it a class of profile and in custom.css
.custom #footer img.profile {float:left; margin: 0 0.5em 0.25em 0; padding: 0.2em; background-color: #eee; border:1px solid #ddd;}Feel free to take a look at my custom.css. The section that deals with comments is marked as such. If you have further questions about it or want me to write a more detailed post on it, let me know.
If you have the time can you look at my site, I have tried to follow the directions but I am not sure how to add a list under “book reviews” that is in my footer. Also if you know how do I align left the “about Me” and the titles on that same line.
Thank so much for this tutorial.
Laurel,
Use
.custom #footer_1 {text-align:left;}or if you only want the headings on the left.custom #footer_1 h3 {text-align:left;}.Cheers :)
Thanks for all the info you’ve posted! I’m wondering what widget/code are you using to call twitter in the footer of your page?
I’d like to do something similar, but don’t really understand enough php to second guess what you’ve done.
Hey John,
You’re welcome!
The Twitter code is from Twitter itself. It took me a while to find that page, it’s not advertised very well. If you follow the instructions for the HTML widget you should get there.
Great! Thanks so much!
Ahh, just what I was looking for :) Thanks a lot for the tutorial. It was very easy to follow and has allowed me to make a few changes that I wanted to. Thanks a lot.
Cheers, Alex and John! Very happy to be of help. :D
Thanks for all the helpful information you provide! Would you happen to know how to get rid of the “Wordpress Admin” link that appears in the footer? Thank you:)
Steve — You’re welcome!
The admin link is an option on the Thesis Options page.
Got it! Thanks!
Would you happen to know how to alter the Thesis theme to keep the home page static? I’d like to use this theme for a website. I haven’t been able to find an example. Thank you:)
Steve — The functionality to make WordPress use a page as the homepage has always been under Settings > Reading. However, check out the new version of Thesis that came out last night. It has a whole slew of new homepage settings.
Great tutorial Kristarella. Useful tips that are super-easy follow.
Still needs a bit of tweaking, but the footer I’m using at DIYninjas is based on this tut and I’m lovin’ it.
Cheers Mitch! I’m loving how DIYninjas is shaping up, so great to know that you found this useful! I really should add in the info about widgetizing it… maybe I should do a new post about widgetizing the whole theme.
And thanks back at you for the feedback! Tutorials here are sweet – in part that’s what I love about Thesis though, it’s so simple to share code as a community.
Extremely helpful. I’m very grateful for your posts on the Thesis forums, too.
Thanks so much for this! I now have a 3-column footer on my site! Next to tackle features and teasers. You don’t have any more tutorials up your sleeves, do you?
Cheers Mary. What else would you like a tutorial on? I can try to write one. ;-)
Maybe not so much a tutorial as a guide on how to use the new features feature and the new alternate page?
Mary — by “feature” do you mean the feature box? I can’t promise anything at this point, but I’ll definitely look into those things and see what I can do.
Yes – feature box. I’ll look forward to it! Thanks again!
Thanks for the info.
I have a related ( I think) question. I simply want to put the RSS feed that I have as a widget in my sidebar into a single page with nothing but the feed. It seems like it would be relatively simple to do, but I can’t find a post on how to do this anywhere – in the thesis forums or out. Any help would be much appreciated.
JdeG — I’m not really sure what you’re asking. Do you just want to put a link to your RSS feed on a page, or do you want to embed the feed in a page?
I’m currently using the widget named ‘RSS’ – I’m using this widget to display an rss feed from another source – not my site’s rss feed (could be any external rss feed). I have it working in sidebar 2, but what I want to do is create a single page with the feed displayed in the main content area. I only want this on a single page. Does that make sense?
Basically I want the RSS widget in the main content area of a single page instead of in the sidebar.
Thanks for your response.
JdeG — Ok, I get you… No, it’s not really related at all ;-)
There’s a few different ways that you can try to go about it.
thesis_hook_custom_templateorthesis_hook_after_postand by adapting the widgetise media box tutorial.function exclude_posts() { if (is_home() || is_front_page()) { query_posts($query_string'&cat=-58'); } } add_action('thesis_hook_before_content', 'exclude_posts');Hi Krista,
I am trying to implement a couple of fixed floating boxes (simmilar to the ones you have for tweets and rss) to act as footer and meta control for the page. Unfortunatly I am getting quite confused and though I am able to see some code using firebug I still cannot get it implemented in my blog. Would you be able to do a tutorial on these?
Thanks.
Thanks Krista
I ended up using SimplePie. Here’s the function I created:
function mega_feed() {
if (is_page(’Page Name Here’)) { ?>
<?php
}
}
I can’t figure out how to style it properly, but I’m just happy to have it working for now. Thanks for your help.
askewmind — I’m not exactly sure what you’re asking. If they’re in the footer, then they’re not really floating. Do you mean you want to replace the footer contents with floating boxes or just place some kind of floating menu to the side?
Hello Krista,
Sorry if I was not clear. What I meant is that I wanted to make floating boxes fixed in a position to contain the menu and maybe some other options (akin to your twitter and rss boxes). Initially i was considering to add those in an extended footer, thus the misunderstanding :-p
Thanks in advance.
askewmind — I’ll certainly think about how I might do that. My floating boxes don’t actually work in IE6 and I’ve hacked them so the site isn’t too ugly in IE6. I’ll need to think about that if I’m able to write about them.
Thank you so much for this post Krista! It is really helpful.
I have another question for you. I am trying to create a second navigation bar in the footer that matches the styles of the top nav bar. Including the current page styles, etc. I want the second nav bar to have different links than the first. Check out my site and you can see my attempt.
Any tips would be greatly appreciated. Thank you!
CJ, looks good. I would remove the
border-bottomfrom#footerand give itborder-top:0;.Thanks for checking it out, I actually need to clarify my question a bit.
I have the two nav bars now, but I want the one in the footer to follow the same rules as the nav bar in the header. For example, in the header, the tab of the current page you are on changes color. How can I make the same thing happen in my footer navigation?
Thanks for the help!
Oh okay. CJ, you need something like this code on the forum that uses conditional tags to assign the active classes.
I just got Thesis template but I am really struggling :o/ As dumb as it sounds I can’t even find the area that I am supposed to use to put things in side bar 2? Sidebar 1 has been fine since I’ve used widget but now I want to drop things into sidebar 2 like adsense and things but I just kind find where to put it without killing my site! Help!
rowena, it’s not really a Thesis thing, it’s a WordPress behaviour that you go to the Widgets admin page, select Sidebar 2 from the dropdown box on the right, click show next to it and then add widgets.
Hi Kristarella
Thanks for reply! It’s not the widgets I’m having trouble inserting, its anything that is like code or script – for example I got some code for ’sitemeter’ and some code for ‘adsense’ but I don’t know where to put it for it to show up in the sidebar…
rowena, usually that stuff can go in a text widget, but otherwise you would use the
thesis_hook_before_sidebar_2orthesis_hook_after_sidebar_2hooks.thanks, in what order and how do I combine them with the code I am using ti get it to work? I keep getting syntax errors.
rowena, is the code you want to put in Sidebar 2 just HTML and javascript? If so, put them in text widgets. If not, you need to create a function and then use the hook, if you don’t know how to do that Sugarrae’s tutorial will probably help you.
Hi Krisa,
Nice work.
Little question. How can i add javascript in de head section of html. I don’t know wich hook(before, after) i have to use to do this?
Thx in advance and keep up the good work.
I appreciate it.
Mike, use the
wp_headhook to insert stuff into theheadsection of the page.Thx for the fast reaction Krista. I found another solution meanwhile: add_action(’thesis_hook_after_title’, ‘javascript’);
mike
x
I need a bit of help with my footer Krista..(killer job with the tuts btw)
Specifically, I have set up the widgets(?) to be About, More Recent posts, Tags and BlogRoll.
1. I cannot(after trying almost everything I can think of) seem to change the font colour for the text under About. Also, I need to get it like normal text(starts with a capital letter) not capitalised throughout. Weird because I have pasted it as normal text in custom functions. I also want the text to be the same size as the text in the other widgets(?) but that doesn’t happen so I’ve settled for H6. For now. The colour also is a disaster….too dark, I need it to be #666666. It also starts a space below the rest of the widget’s text. In short , it’s a disaster.
2. Is there any way I can get More Recent Posts to read as simply Recent Posts?
Cheers,
Nash
Nash — any element using an “h” is a header element and in the sidebar headers have
font-variant:small-caps;applied to them. You probably want to wrap the about text in<p>...</p>instead. If you do that you might want to add.custom #footer li.widget p {font-size:1.1em; color:#666;}to your CSS, which will also fix the colour.You can only change the “More recent posts” if you edit the core widgets function in Thesis. What it actually does is show the most recent posts after the posts on the homepage, because there’s no point showing the posts that people have just looked at. Then on other pages it shows the most recent posts (see it changes if you go to the about page or somewhere else). The title reflects that.
Hey Krista,
Thanx for the assist, almost have the footer nailed down… :-)
Is there any way to remove the underlining on the Read more on the about page link and make it the same colour as the About heading in the footer?The on-hover bit is fine….
Also, is there any way to get the nav_menu in the footer but above the copyright notice?
Nash — where you have
.custom #footer_1 ul.sidebar_list li.widget aaddtext-decoration:none;.You can put the nav bar in the footer with
add_action('thesis_hook_footer','thesis_nav_menu',2);, but note that it’s not valid code because you now have two things using the same ID.ul#tabsin both the header and footer.Marry me? :-P
Thank you so so very much….it’s amazing how you can intuitively shift between colour casting and drop down lists!
A bit more help on this….
Have realised that as time goes on my footer will get very fat with the addition of more and more tags…
How do I?
1)Get my recent posts to follow in successive lines and have a dotted underline below each line?As in, I want the dotted line to run the length of the column not just the length of the post. Kinda like a dotted line border.
2)Replicate the dotted line effect for the tags and blogroll?
3)Display only the 50 most-used tags at any point of time and keeping all of them of the same size?
Sorry for the repetitive trouble…
Nash — Looks like you have 1 sorted out. And it should work for the blogroll too. You can’t do it with the tags unless you make each tag go on a new line. For only displaying 50 tags you need to use the wp_tag_cloud function with the number parameter.
This is really very helpful…
Let me make changes and come back to u. :)
Hi Krista,
Thank you for such a great tutorial. One small issue with mine though. Any idea why my footer is showing the vertical right sidebar divider through the footer? It doesn’t seem to do it on the homepage, but all the other pages do??? I want the divider, but want it to act the way it does on the home page. You can see my site at wesellberks.com
Bill — one of the
<div>tags in your multimedia box does not have a corresponding</div>so all of the</div>tags after that are mismatched and your footer winds up inside#content_box. It’s not on the homepage because you’re using a video there, not the custom code.That’s awesome! That div snuck in there some how. Thank you for your help!!!
Hi Krista, Thanks so much! Even for an amateur coder like me you made this tutorial doable! I just have a couple of questions…
I use one of the Thesis backgrounds, and after I put in your codes in the custom_functions.php & the custom.css files, now my background shows all over instead of just around the edges (the content/header/sidebars used to be white). Any ideas on how to get the white back?
Also, how do I get a photo down in the photo w/ my About Me blurb like Miguel’s on simplyblog.net?
OH, one more, how do I get a “back to the top” button like you have? :)
Thanks SO much!
Nicole — if you change the CSS you had for the background from
.custom #page { background: #fff; }to.custom .page { background: #fff; }and then add.custom #footer_area .page { background:none; }after that, it should be right.To put a photo in, add a URL to an image in an img tag within the widget.
The back to top link links to an ID on the page. So add a link something like
<a href="#header_area">Back to the top</a>.Thanks so much! Also, this may be elementary, but how do I edit the wording of the “powered by thesis” blurb in the footer?
TQ for this cool tips.
do u know how to make the nav bar text to small cap or normal?
Hi Kristarella, one more quick question that I hope is an easy one. I notice that the footer attributions at the very bottom of the footer are all in one long horizonatal line in firefox, but are several lines in IE7. (actually, it appears the attribution area in IE is confined to the last column in the footer instead of spanning all the way across the bottom of the footer. Is there an easy fix for this?
Bill — use
.custom #footer p {clear:both;}Thanks you again Kristarella! That’s perfect!
Hi Kristarella,
I find your posts really helpful.
I am NOT using a fixed width header (am instead using Rick’s method of adding a clickable header image, which you linked to here).
Can I still activate full-width framework, in order to deploy a full-width footer? Or will this mess up the layout? I linked to my blog from my name above.
Thanks in advance for any suggestions! I am not well-versed in php, but grateful Thesis — and its wonderful community — allow me to muddle through.
nobugs — I don’t think switching to the full-width framework will effect the things currently on your blog.
Thank you again!
Hi Kristarella. Like Nicole in comment #62, I had problems with the background color after I tried to add the codes for footer background. I followed your instructions and got the white back on the pages, but have lost the container border colors. At this point, I’ll leave the footer white but I would like my borders back.
I also tried adding the footer hook in custom hooks but saw no change. I have a footer action that already adds my copyright info etc. and removes the thesis hook footer. Do I need to remove that hook in order to use your code? And do I need to add “add action” before your code?
Thanks so much for your great tutorials!
Lisa — What are you actually trying to achieve? You don’t have to use the full-width framework to add the extra footer content, so if you still want the page borders to encompass the footer to, use the page framework (learn more about the difference in my recent screencast on the full-width framework).
The footer function I’ve provided is independent from any others and its contents will get inserted before other footer functions you have. There is already an
add_actionin the code I provided, you don’t need another one unless you didn’t copy that bit.Hi again Kristarella. I am close but not quite there! I saw your instructions for wrapping text around an image in the footer, but how do I classify my image as a “profile” img in order for the css to work? The footer looks great by the way — thanks so much!!!
Lisa — to add an image with a class use the HTML
<img class="profile" src="http://www.example.com/image.jpg" alt="" />If you’re not really sure what I mean I recommend perusing W3Schools or Tizag for some basics on HTML (or XHTML) and CSS. :-)
Thanks so much. It worked like a charm!!!
So today I go searching for a quick tut to tweak my Thesis footer.. I don’t know why I even bothered with Google, just should’ve come straight here.
The tutorial couldn’t have been easier to do, now I just need to customize it all.
Hi and thanks for sharing this info. I was looking all over to find out how to adjust the footer of Thesis. You helped me a lot and I just love the outcome :)
Thank you for this info! I finally got my footer looking nice and cool :-)
Appreciate it!
Hi, another great tutorial and it’s looking good on my blog (http:MyFriendsHotel.com) – Thanks!
Just wondering if there’s an easy way to find out the correct names of “Widgets” – eg: a Text widget with Blip.fm embed – so that I can change the footer content from the default ones in your tutorial.
Cheers,
Pete
Peter — I don’t think you can just call widgets as functions, but if you want to widgetise your footer put the following code in custom_functions.php (not inside a function, just by itself).
register_sidebars(1, array( 'name' => 'Footer', 'before_widget' => '<li class="widget %2$s" id="%1$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' ) );Then replace all the hand-coded widgets in the footer function with
<?php thesis_default_widget(3); ?>. Then you can add the “about” stuff as a text widget from the admin section and use the killer recent entries widget and so on.Thanks alot for your tutorials !
How do I move my navigation outside the page like on http://www.kristarella.com (all the way at the top)?
Cheers !
Yvon
Yvon — you need to use the full-width framework. :-)
Thanks for this great tutorial! I’m currently experimenting with your code on my offline server and it seems to work. I also want to use my own widgets in the footer (some of them are in sidebar 1 and I want to move them to the footer) but I can’t figure out the code you gave to Peter (comment 81). Can you please give a more detailed example please? I’m also looking for the correct name of each widget. Thanks!
Serge — In WordPress 2.7 you need to just remove the widgets from Sidebar 1 (click ‘Edit’ and then ‘Remove’) and then add them to the “Footer” sidebar (select ‘Footer’ from the dropdown and click ‘Show’). If they are text widgets you might have to copy out the contents first into a plain text file and then copy it back in.
If you’re using WP 2.8 I’m not sure what you need to do because I haven’t had a chance to install it yet. I think you either drag the widgets from sidebar 1 to the Footer or to inactive widgets and then the Footer.
There is nothing to really figure out in the code I gave Robert, you just copy and paste it into custom_functions.php and it registers a new sidebar.
Thanks for your response! I use Thesis 1.5.1 and WP 2.8 but I can’t find that option ‘Footer’ from the dropdown menu…
In the meantime it seems that the “Footer” sidebar is activated. However, after I moved some widgets to the Footer, I can’t seem to activate them. I’m not a developer, so the codes are beyond my knowledge. Can you show some code examples using for instance the blogroll widget, category widget, etc… Thanks!
Sorry for the lack of response Serge. I was waiting to see if I got a chance to test it on WordPress 2.8, but I still haven’t yet. I haven’t looked at the new widget interface at all.
Glad the Footer area is showing, to have a look at using the widgets panel try this WordPress 2.8 video. Widgets are at 1:15min. If they don’t work like that then I’m not sure, I’ll have to test it more thoroughly.
It seems to work now, I reread your comment #81 and replaced my existing code with the php line you provided, that part wasn’t clear to me. But now my widgets are showing in the footer. Thanks!
I will have a closer look now how to finetune the layout, if I have some further questions I will pose then thoruhg the comments.
Another question if you don’t mind: some pages I added to my nav menu don’t have any sidebars; on these pages I also don’t want to show the widgets in the footer. Which code do I have to change? Thanks!
Hello. Great tut. I’m relatively new to this, especially the php stuff, so…I was looking for the answer in comment 81, however the last bit about replacing the hand coded stuff…where exactly am I putting the <?php thesis_default_widget(3); ?> code? I tried where I thought it should go and ended up with a parse error.
Help?
Also, I found the twitter widgets, but am looking for a clean version like yours, did you add some code to theirs? Care to share? ;-) Thanks so much!
I seemed to have gotten it to work. I had to re-upload my custom_functions file, did the same thing and it worked. Not sure why I keep getting parse errors when I try to do things.
Anyway, new question, the custom.css changes I made to put a background color in the footer area doesnt seem to be doing anything. I was hoping to add a background pattern in this area and have it tile.
But was going to try to get the color to work at least first. :-(
Also, how to I left-align these?
Sorry for all the posts…
Kristarella.
Is it somehow possible to have a footer that takes the entire width of the page but in page framework? My design must be page framework (I need to include my header id in the same color as my content id all this while having a different background color)?
Serge — If you wrap the code that is inserted into you footer with,
if (!(is_page('PAGE NAME') || is_page('OTHER PAGE NAME'))) : FOOTER WIDGETS CODE endif;of in the context of the code in the post it would be,
function custom_footer() { if (!(is_page('PAGE NAME') || is_page('OTHER PAGE NAME'))) : ?> ... <?php endif; } add_action...then it will not show up on those pages. The exclamation mark means “not” and the double pipes (||) means “or”. So it says “if not PAGE NAME or OTHER PAGE NAME do this footer widgets code”. You can read more about these WordPress Conditional Tags on the codex.
Robyn — try
.custom #footer li.widget {text-align:left;}to align the widgets left.Karim — If you watch my video on full-width frameworks you should be able to see how you can make the full-width framework look like the page framework.
You need to use the full-width framework, but give
#header_area .pageand#content_area .pagethe background that you would have previously given to#page.I’ll be damned.
I was sure I read every character on your site. Bloody hell it’s brilliant! (in other words, it worked!)
(no edit button sorry!)
Quick question. I’m trying to add text (or menu links) in my footer but they keep aligning right. I’d like them in the middle of the footer, at the center of the page. I guess it’s because thesis_hook_footer is on the right side but is there a way to move that in the middle?
Karim — The text in the footer is aligned right. Wrap your menu items in a paragraph or div with a specific class, e.g.
class="footer-center"then use CSS like.custom #footer .footer-center {text-align:center;}.Hey Kristarella,
I like the footer tutorial. However, I would like to put three such things under my header before the content
like this. What would be the best action? Thanks for the tutorials.
Hi K.D. If you want to add it below the header instead you would just change the hook you use from
thesis_hook_footertothesis_hook_after_header.