kristarella.blog

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Blogging / Thesis footers 101

Thesis footers 101

by

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)
Default Thesis footer
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_area .page {background:transparent;}
		.custom #footer {border-top:0;}

Update 19 Feb 2010: Edited the above CSS to add the line .custom #footer_area .page {background:transparent;}, which is needed since the introduction of the new colour Design Options in Thesis 1.6.

Full-width Thesis footer with background
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 simplyblog.net
Footer on kristarella.blog
Footer on kristarella.blog

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');

Update 2nd Nov 2009: To turn this into a widgetized footer area check out the code in comment 151.

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

Reader Interactions

Comments

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

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

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

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

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

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

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

  10. 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 πŸ™‚

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

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

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

  16. 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:)

  18. 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:)

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

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

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

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

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

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

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

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

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

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

    • You could make a widgetised page area using thesis_hook_custom_template or thesis_hook_after_post and by adapting the widgetise media box tutorial.
    • You can use a plugin such as FeedWordPress and fetch RSS feeds as posts into a certain category, exclude that category from your homepage with something the code below and link to the category page to show posts (you’ll probably need to exclude the category from your feed too). 
      function exclude_posts() {
   if (is_home() || is_front_page()) {
      query_posts($query_string'&cat=-58');
   }
}
add_action('thesis_hook_before_content', 'exclude_posts');
    • Try Darren Hoyt’s solution.
    • Try SimplePie.

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

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

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

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

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

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

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

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

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

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

  45. rowena, usually that stuff can go in a text widget, but otherwise you would use the thesis_hook_before_sidebar_2 or thesis_hook_after_sidebar_2 hooks.

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

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

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

  50. Thx for the fast reaction Krista. I found another solution meanwhile: add_action(‘thesis_hook_after_title’, ‘javascript’);
    mike
    x

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

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

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

  54. Nash — where you have .custom #footer_1 ul.sidebar_list li.widget a add text-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#tabs in both the header and footer.

  55. Marry me? πŸ˜›

    Thank you so so very much….it’s amazing how you can intuitively shift between colour casting and drop down lists!

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

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

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

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

  61. That’s awesome! That div snuck in there some how. Thank you for your help!!!

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

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

  64. Thanks so much! Also, this may be elementary, but how do I edit the wording of the “powered by thesis” blurb in the footer?

  65. TQ for this cool tips.
    do u know how to make the nav bar text to small cap or normal?

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

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

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

  73. 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_action in the code I provided, you don’t need another one unless you didn’t copy that bit.

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

  75. 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. πŸ™‚

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

  78. 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 πŸ™‚

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

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

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

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

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

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

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

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

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

  92. 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. πŸ™

  94. 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)?

  95. 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 .page and #content_area .page the background that you would have previously given to #page.

  96. I’ll be damned.
    I was sure I read every character on your site. Bloody hell it’s brilliant! (in other words, it worked!)

  97. (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?

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

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

  100. Hi K.D. If you want to add it below the header instead you would just change the hook you use from thesis_hook_footer to thesis_hook_after_header.

  101. Hello~

    Since WP’s latest update, something is up with my footer. Any ideas? It seems to no longer be listening to the style code and is just in list form, n0 columns, nothing….HELP!?!

  103. Hi! Great job on the footers tutorial – thanks!

    Probably a really dumb question, but I can’t see the answer to my question in your footer tutorial or the thesis docs. I’ve purchased the developer’s edition, specifically so I can remove the “Get smart with the “Thesis WordPress Theme…” attribution link. Yet, I can’t find where/how to easily remove it. Any pointers would be appreciated. Thanks.

  106. Oh no πŸ™ I’d be happy to work through it with you.

    I think there must be an error in your custom.css that’s preventing some of it from being rendered. The only error I can see is:
    body.custom { background: url('http://greendollarreport.com/subscribersarea/wp-content/uploads/2009/08/Hidef-Green_Grass_Blue_Sky_Bliss.jpg'); repeat}
    The semicolon should come after the word “repeat”. However, I just tried to fix that in Firefox and it didn’t fix it…

    It sort of looks like your whole custom.css is being ignored, so have you got the option on the Thesis Options page checked where it says to use the custom stylesheet?

  107. I tried the semicolon moving before as well. I will just leave it the way it should be. Yes, i am not sure why it is ignoring my custom.css. It is checked to be included in Thesis options. I cannot get my background to show up either, and I have the exact same code on another blog and it all works fine. So I am lost.

    Here is the code I have for the footer:
    /*Custom Footer*/
    .custom #footer_area {background:#8ec341; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer {border-top:0;}
    .custom #footer_1 {text-align:left; color:#fff;}
    .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;}

  110. This is all the custom.css modification I have made. As stated, the background is not working, not sure any of it really is now. …
    /*Header Buttons*/
    #return-link { margin-top: -3px; margin-left: -1px; float: top }
    #rss-link { margin-top: -3px; margin-left: -1px }

    /*Custom Background*/
    body.custom { background: url('http://greendollarreport.com/subscribersarea/wp-content/uploads/2009/08/Hidef-Green_Grass_Blue_Sky_Bliss.jpg') repeat;}
    .custom #page { padding: 2em 1.9em; background: #fff; border: 0.1em solid #629084; border-top: 0; }

    /*Custom Footer*/
    .custom #footer_area {background:#8ec341; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer {border-top:0;}
    .custom #footer_1 {text-align:left; color:#fff;}
    .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;}

  111. No, there’s nothing else wrong with your CSS file. The problem is that there is no body class of “custom” on your site, which makes me think that there must be something in custom_functions.php or somewhere else that is changing the behaviour of the body class. I noticed that on the home page you have two classes: “home” and “blog”, but not “custom”. So while it would be best to figure out what is interfering with the custom class if you remove every instance of .custom from your CSS, it will probably fix most of the issues as well.

  112. Here is the code in the custom_functions.php file:
    /*Custom Footer Widget*/
    register_sidebars(1,
    array(
    'name' => 'Footer',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => ''
    )
    );
    /*Footer Code*/
    function custom_footer() { ?>

    <?php }
    add_action('thesis_hook_before_footer', 'custom_footer', '1');

  113. I must be doing something wrong, but copying and pasting the code, the recent posts don’t seem to show up. shouldn’t they be within ? however when i wrap it up in that it it makes a space for it, but still no recent posts are retrieved… weird.

  114. Lon — Did you try to paste some code without encoding it in your comment? I don’t really know what you’re asking. All I can say is that pasting the whole function under adding extra content into the bottom of custom_functions.php should result in a bunch of widgets in the footer. It only needs to be wrapped in <?php tags if you have unnecessarily ended the PHP environment in your custom file.

  115. Hey Kristarella, thanks for the response. I’m really not sure what was going on, i tried a straight copy and paste and the about me widget showed up, and the tag cloud worked, but nothing at all showed up for the ‘recent posts’ section.

    I ended up going with http://www.fergusweb.net/codin.....get-areas/ creating 3 separate widget-able areas to get the same effect.

    Thanks anyways though, i’ll probably revisit it when i need to again, i think your way would’ve been a lot cleaner.

  116. Hey Lon, okay that is weird that one in particular didn’t show up… maybe the function name has changed since I wrote this… you know it looks like that is the case. I think it might be called thesis_widget_recent_entries now.

    Yeah, I’m not down with making 3 separate widget areas for the footer, it is overkill. You can widgetise what I’ve got above. Instructions are in a previous comment.

  117. You rock Kristarella, that was it! Is there somewhere that lists all the latest native thesis function names?

  119. This is the changes to the php file…(sorry tried to post before and it didnt seem to go through…)

    /*Custom Footer Widget*/
    register_sidebars(1,
    array(
    'name' => 'Footer',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => ''
    )
    );
    /*Footer Code*/
    function custom_footer() { ?>

    <?php }
    add_action('thesis_hook_before_footer', 'custom_footer', '1');

  120. Robyn — Sorry! Both your comments got caught in spam. There’s nothing there that suggests to me that it would be breaking the custom body class.

    Seems perhaps there is something awry with the Thesis settings (there were some hiccups on previous upgrades when there was problems with database encodings that Chris couldn’t pick up on his tests.

    If there’s nothing else in the custom_functions.php that would affect the body classes (it’s not the footer code or the custom.css file that’s the problem, it’s that the body element in the HTML has no class called “custom” so all the styles in custom.css are not being used), I would first try unchecking the option to use the custom stylesheet, save the options, then check it again and save the options. If that doesn’t work to restore the custom body class you might have to delete all the settings and restore them. To do that I:

    • Take screenshots of the settings so I know what I had before
    • Paste delete_option('thesis_design_options'); delete_option('thesis_options'); into the bottom of custom_functions.php
    • Load the site once (it could look askew, don’t worry)
    • Then visit the Options pages and restore your settings

    That last one is only a last resort as it will delete all your Thesis options. I can see what the problem is, but from here I can’t diagnose it further.

  121. kristarella
    great tute, but i have a couple problems.
    recent posts widget doesn’t show up.
    how do i get the info i want into the footer widgets, like put the tags in etc.
    also i would like pages in the footer instead of the side bar.
    and how do i put my thesis affiliate link in place of the default one?
    thanks, ron

  123. Wow — thanks so much for posting these tutorials! Awesome!

    I’m probably missing something obvious, but how do I view your custom.css file? I clicked the link you posted and it took me to a ‘page not found’ error page. And can I use the same comment style you have here for my website?

    Also, how would I add a graphic/form for people to join a mailing list (like at this website: http://www.therebelution.com/) to the footer area?

  124. Nicole — I’ve upgraded theme a few times since that link. My current CSS is probably here.

    You can imitate my comment style if you want to.

    You would need to sign up for a mailing service (Aweber or MailChimp are two popular ones) and they usually give you a form via javascript or HTML that you can insert on your page. To make it graphical like that you would use background images, or possibly inline images… it kind of looks like they might have used Dreamweaver to build the form structure with images.

    I would suggest installing Firebug and checking out my Firebug video tutorial to inspect that sort of thing. It’s one of the best ways to figure out CSS.

  125. thanks,
    i have one more question
    if you look at my footer you can see that the widgets are pushed over to far right
    how can i bring them more left

  126. Hi (response to #120),

    So I tried to uncheck the css option and redo it, that didnt work…so, i have a question about deleting the settings:

    Will it delete the css file and php file options only, or the options panel and open hook plugin settings, too?

  127. Ron — they are towards the right because there is an extra empty widget on the left.

    Robyn — it won’t delete the OpenHook stuff, it won’t delete the contents of custom.css or custom_functions.php, it will reset all of the options on the Thesis Options and Design Options pages, or more accurately it will delete them and the defaults will be reinstated.

  128. Tried that (#120), actually have the delete opttions code in there now and it looks exactly the same, all the options are the same..its doesnt seem to have done anything…:(

  129. Ok, first time I did it in the css file instead of the php…but i now did it as you said, and redid all my options, still no background and the css file is being ignored largely…so I am lost.

  130. Robyn — If you have access to phpMyAdmin you can delete the Thesis options rows directly from the wp_options table and reset them that way. I’m afraid I can’t hypothesise any further as to how to fix your site. All I can say is that the custom body class is not being used and I don’t know why, but suspect the options in the database are corrupted somehow.

  131. Robyn — Ok, if resetting the options happened, but hasn’t fixed it then I still think there is something screwing with the body classes. How is the class “blog” being applied to the body (see image)?

    Safari

  132. Could it be something from my host. The WP application is something my webhost offers free with hosting, but I have other WP’s installed on this host and they work fine…
    http://www.faithfulspouseclub.com/blog

    Other than that, I have no idea…I have OpenHook changes in effect, but they make no mention of body classes. These are all the changes I have made.

    Btw, thanks for all your help troubleshooting this!

  134. Is there a way to use background graphics and to do your footer using openHook rather than the stylesheet and functions files? It seems to be listening to that plugin.

  135. Robyn — No, I don’t think it’s your host. I just think that for some reason the setting under Thesis Options > Design Customisations > Use Custom Stylesheet is not being detected properly. You might be able to work around it by copying the middle of the function and pasting into the OpenHook Footer box and You could put <link rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/thesis_151/custom/custom.css" type="text/css" media="screen, projection" /> in the header scripts box on the Thesis Options page. Then remove all the .custom from your custom.css file. The the styles should work.
    I would probably try upgrading to Thesis 1.6b first and see if that fixes it, then try that other stuff.

    Ron — Cool! Glad we could get it sorted.

  136. Hey Kristarella, just wanted to thank you for this tutorial. I’m new to WP and coding and this has been a great help. I messed up my php and managed to lock myself out of my wordpress admin, but once I got that fixed things seem to be working well. Thanks again.

  137. Hi Kristarella — I just installed Thesis 1.5.1. Unfortunatley, I cannot get the Permalinks to work. Applying “Settings -> Permalinks -> Custom Structure -> /%category%/%postname%/” produces “The page cannot be found” errors for all of my pages and posts. If I select the “default” option (i.e. ?p=123) it works fine. Am I missing something? Thanks for any help you can provide:)!

  138. Steve — you need to make sure that WordPress can write to the .htaccess file when you change the permalinks and also if you’re on a Windows server, they can be pretty retarded when handling URL rewrites, you might have to check it out with your host.

  139. Thanks Kristarella! I checked and apparently I’m on an “older” hosting plan ColdFusion 7 which unfortunately does not support IIS Mod-Rewrites. I’d have to “upgrade” my plan ColdFusion 8 for this to work. However, that may cause my code to break. That stinks! Any known workarounds or suggestions? Thanks!

  140. Steve — That sucks. No, I don’t know of any workarounds for getting pretty permalinks to work. Is it causing a problem regarding the footer tutorial above or for any code I’ve given? I can probably find a fix to get code to work, but not for the whole site to have better permalinks.

  141. Hello Kristarella,

    Thanks for the tutorial.

    I’d like to have four columns in my footer as in your example, but your original code displays everything in a single column, ie stacked.

    Also, I’d like to have three columns be just text, which I can edit easily, but I’m having a hard time inserting the Meta widget.

    What am I doing wrong?

    Thanks,

    P.

  143. Thanks so much for the speedy response. It may be too late on a Friday night, but I don’t quite get it. I inserted the register code from comment 81 like you say by itself, but where do I insert the code referred to at the end of comment 81:

    “Then replace all the hand-coded widgets in the footer function with [that php code]. ”

    What exactly in the original code does that php code replace?

    And what’s the code to insert the meta widget in the footer?

    Thanks!

  146. Hi, it’s all crystal clear what you’ve written, thanks.
    But I’m having a hard time on this one:

    .custom #footer {border-top:0;} makes the double border invisble, right? Right.

    But where (location, which file, maybe wordpress itself?) is responsible for that?
    Because I want to make all the lines that divide the collums, etc – invisible.

    Thanks!

  147. If I found this one earlier, I wouldn’t ask… πŸ˜‰

    https:\/\/”www.”kristarella.blog/2009/02/how-to-use-firebug-for-css/

    Thanks, informative presentation.

  148. I read through but maybe my english is not good but what is the final code for footer widget? I tried some but not working, thanks

  149. Tinh — What are you trying to acheive? A footer with HTML you can code yourself or a widgetised area that you can drop widgets in using the WordPress Dashboard?

  150. I think, I need a widgetised area, say 3 columns so I can drag/drop. I am bad at coding so, the first one may be challenging me. Thanks

  151. The code you need pasted in custom_functions.php is:

    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>'
    )
);
function custom_footer() { ?>
	<div id="footer_1" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(3); ?>
		</ul>
	</div>
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');

    The CSS you need is exactly as-is at the bottom of the post.

  152. Jonathan — Glad you found the Firebug video. It’s worth noting that Thesis 1.6 has a design option in the dashboard to hide all the default borders, so you might want to hold off until 1.6 is available, if you haven’t done it all already.

  153. Thanks but unfortunately this does not work, after insertion into custom_functions.php, my blog displays as a blank page, no thing, is there anything missing in the code?

  154. Tinh — Nope, just tested it and there is nothing wrong with it. Make sure you’re copying all of it (including the final semi-colon) and that you’re not pasting it in the middle of another function in custom_functions.php; I find it easiest to go the the very end of the file, hit enter a couple of times and paste it there.

  155. I particularly like the design you had with the background image in the footer with the dirt and the seedling.
    I am trying to replicate a similar look and have a few questions:
    Is the image a transparent PNG?
    How do you get it to “occupy” the same space as the text. I’ve tried by adding to footer_area in custom.css but not working.

  156. Ron — Yes, it was partly a transparent PNG. I found an image that I liked the dirt in and I made a repeating image ut of it by taking a section of the dirt, cutting the image in half and moving the left side to the right and vice versa and blending the middle edges together. So, the two outer edges match up because they were originally next to each other and the middle is blended. That I used in #footer_area with the background repeat on repeat-x and then the plant shoot was a background of the #footer and was transparent at the bottom to go on the dirt properly.

  158. If you have another function called custom_footer then it will conflict and you should change the function name. If not I can’t say much more without seeing your file. You can paste your custom_functions.php in Pastebin and share the link with me if you want to.

  160. Tinh — You do already have a function called custom_footer. So, in the code that I gave you change the two instances of “custom_footer” to something else, e.g., “footer_widgets” and it should be fine.

  161. Hey thanks for the article. How do you display your all categories in the footer (full width footer, with child category without ul, li. You can check the example at Shoutmeloud.com). I am currently designing my theme but I am unable to show the category child properly, it always shows unordered list. Have a look at my work. http://img81.imageshack.us/img81/2360/foottg.jpg (footer. 3 column footer, filled with only 1 column). http://img515.imageshack.us/im.....ewlook.jpg (sidebar). Let me know your opinion about the design πŸ™‚

  162. I couldn’t add a background image to my footer. As a test I added
    .custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer {border-top:0;}

    to custom.css, and got nothing. Where should I be adding the “footer_area” ? I tried adding it using the OpenHook plugin as well.

  163. Ron — Are you using the full-width framework (Design Options page)?

    Ricky — That site does have the categories in an unordered list, but it’s just styled so the list items are floated left and form columns.
    footer-shoutmeloud.com
    Hard to get an impression on a design from just a couple of chunks of it πŸ˜‰ Make sure you leave enough breathing room (padding and margins) for readability. Colours look like a good choice.

  164. Thanks, I got it. But the code for foot area background seems conflict with my background code then it does not work

  165. Tinh — I don’t know what conflict you’re referring to; it seems to be working fine on your site. It’s impossible for me, when writing a tutorial, to predict how people might have already customised their blog so I have to assume that users have some knowledge of integrating CSS and HTML. If that’s not the case I recommend Tizag tutorials.

  167. Dear Kristarella,

    Could you please write a tutorial on how to make the comment area like yours, I know it is unique and you might not want to share but I and many others really love to have this πŸ™‚ Thanks in advance

  168. Tinh — I’d rather not because that would imply I’d like people to copy and paste my styles, where as I’d much rather people found inspiration in my styles, but made their own. Perhaps check out my Firebug tutorial to learn how to investigate CSS and see how certain CSS works.

  169. Hi Kristarella,

    I loved the footer tutorial, very helpful!!! Quick question this isn’t really footer related…how do you get the avatar in your comments for your picture and others? I having trouble finding that so I might as well as you, cause I like this one the best!
    Thanks

  171. One more thing I realised…I copied both as you listed above, but when I’m on the home page only three of the widgets show and then when you click a post all four show. How can I fix that so they all show on the home page?

  172. Justyn — I think it’s because one of the widgets is a Recent Posts widget and it doesn’t show on the home page because you’ve only got 6 posts on your blog so far & there’s no point showing a list of recent posts on the homepage when all the posts are already on the homepage.

  174. Kristella,

    Thanks for your tutorial. What kind of code would be needed to have a list of pages and any way to specifically identify the pages?

  175. Greetings!

    This was very helpful. Thank you.

    The custom functions used in your example work well, but I would like to add things like my category list and such, my blog roll (which I call “Good Links”) and so forth. Somewhere on the net I think I once say a list of function php code like the following that you used: Do you know of such a list?

    I attempted to do what you did with the tag cloud, but with my blog roll, but so far my code is not too pretty….

    Thanks so much!

  177. My need is very simple and I tried to follow the Thesis Footer 101 link to see if that offered me the basics but the link is broken.

    a) How do I place some simple content (not widgets just some styled text) before these two lines that automatically appear in the thesis theme footer?

    This site runs on WordPress using the Thesis Theme
    WordPress admin.

    I managed to insert my text after these two lines by editing the footer.php file in the thesis theme folder.
    But I gather it is better to use the custom_functions.php approach.

    I understand a little bit of PHP code but really…I’m just copying and pasting and then changing the things that I understand. I understand all the CSS parts. When I want to do something completely different…I just don’t exactly understand the logic involved in the add and replace actions. So I’ve had no luck concocting a function that inserts my simple styled text.

    Next question: How do I move, restyle, or replace those two lines.

    For one thing, if I’m going to have that on the bottom of my thesis themed site, I’m going to replace the link with my thesis affiliate link .

    I like the style you have on your http://simplyblog.net/ site….right at the bottom after your own footer content and restyled.

    e.g. Can I somehow use remove_action to remove that part of the thesis footer and then add_action to insert a new style.

    Your tutorials are helpful. Would be even better if sometimes you include not just the what but the why for those of us who are not as experienced.

  178. Gigi — You can replace the entire contents of the function with whatever you want to be in the footer. All of the code in this tutorial will be inserted before the thesis attribution. If you mean before footer altogether you should use the hook thesis_hook_before_footer. An almost complete list of hooks is on the DIYthemes site.

    You might also want to have a look at the footer category on the DIYthemes Answers blog, which should give you some direction on adding & removing things in the footer and styling it. For a general introduction to PHP, try the Tizag PHP tutorials. I found them quite useful when trying to grasp the syntax. Also, for a run down on using hooks in Thesis Sugarrae’s hooks tutorial might be helpful. I dislike two things about that tutorial: it dumbs things down such that it no longer uses PHP terms and language, which means you might not recognise things you’ve already learnt about when you read about them elsewhere, and it has some poorly formed code in it, but lots of people have found that tutorial very useful.

    I tried to follow the Thesis Footer 101 link to see if that offered me the basics but the link is broken.

    What link is that?

    Your tutorials are helpful. Would be even better if sometimes you include not just the what but the why for those of us who are not as experienced.

    Sometimes I do include the why of things (my most recent post about javascript has a lot of why, which in the end didn’t get read by people who just want to copy and paste!). I probably didn’t explain a lot in this post because I wrote it just when hooks first came into Thesis and almost everyone had read Sugarrae’s post and the general vibe of the community didn’t seem to need it as much. I think now that Thesis and the community has grown so much, some of these initial topics need to be revisited.

  179. Thank You Thank You for such a prompt reply.
    I shall check out the references you’ve supplied.

    The broken link that I was referring to is on this very page…. look below the trackback count
    (as I am reading this it says there are 13 trackbacks) below that count there is a list of links. The sixth one down reads Thesis Footers 101 …..kristarella.blog and I thought it might have additional info…but it’s broken.

    Thanks again

  180. Gigi — Ah okay. Thanks for that. The trackbacks are usually records of links coming in from other sites and occasionally links from another post on this site. That one is from another site, so I guess they deleted that post or something.

  181. Hi Kristarella – what would be the modification to the above tutorial if I wanted 3 widgets only that were archives, cats, and recent posts? Sorry, I don’t know PHP and I’ve been fumbling through this with no luck.

    Appreciate it, and sorry to add to the hundreds of others that have asked for help :-).

  184. Chris — I understand πŸ˜‰ The comments have gotten a bit extensive on this post. Just updated the post to point to the comment with the widgetizing code, so hopefully it will be easier to see from now on!

  185. Just like to say – great guide Kristarella, I have a question though.

    How can I get 2 widgets in one column?

    I’ve gone for a 4 column design, (from left to right box 1-4) box 1 I want archive (in drop down menu) and search widgets, box 2-4 just my own text.

    Thanks in advance

  186. Rob — I’m not sure it’s the most elegant way of doing it, but without adding another widetised area and floating one left and one right, you could instead add your widgets in the order “box 4, 3, 2, Archives, Search”. Then float them right instead of left. With all the CSS the same as in the post except floated right that should visually provide what you’re describing.

  187. I am trying to get a dual bar across the bottom in my footer with a drop shadow styling. I created a png file that I thought would work, and put it with a repeat-x. As you can see on my site, the png looks choppy and it hides behind the footer. I’m sure its a simple tweak, but I’ve looked all over this post and others trying to figure it out. any help would be appreciated.

  188. Ben — The choppiness is purely the image; the shadow starts to fall off at the edges. Try cropping it to 5px right in the centre of that image and it should be ok. You might also need .custom #footer_area .page {background:transparent;}.

  189. yeah, I tried cropping it to no avail. photoshop must do something weird with the edges of the file.

    But THANK YOU for the transparent code. what is the .page tag indicating in that?

  192. I tried what you said about floating it right, it looks as I want in Firefox but Google Chrome is rendering it all incorrectly πŸ™

  195. Thank you for this great post.
    Ok dear sir i would like to add pictures in front of catogory, as added in kristarella.blog footer.
    How to add such type of pictures.
    Thank you

  197. hey thanks kristarella.!!
    loved it, its awesome..i will use it …!!

    can you give the codes for related posts with a custom background image just below the post..!!!

    thanks….!!

  199. Hello Kristarella-

    First I would like to thank you for the fantastic tutorials you provide–as well as I admire your patience handling all of our questions!

    That being said–I have been following along with your blog/site/tuts for a couple of weeks now–and have been fumbling my way around through the customization basics by trial and error. Yet, I have avoided leaving a comment here (or other places i.e. the DIY Thesis forum & other Thesis-users tutorials) until I felt it was absolutely necessary. At this point I feel it is–I’m ready to rip all the hair out of my head!

    My primary issue: My custom widgetized footer is *not* showing the ‘Recent Posts’ widget on my home page–but it *is* showing up on all the other pages I created. I looked on Firebug to see what was going on–and my home page only shows a list of 3 widgets–yet the other pages show the list of all 4 that you specified in your example. I cannot for the life of me figure out why this is happening … ?

    Please note I am clearly a novice at this.

    To reference: Here is my “test site” I’m using for now until I learn all of this correctly to transfer over to a new site.

    Also, I have the Thesis Open Hooks plugin installed. I’m not sure if that’s causing my issue or not…If that’s the reason for my inconsistencies then I would rather uninstall it–and do everything directly in my custom_functions.php & custom.css folders.

    Please help?! :/ Thank You in advance!

  200. Lindsay — The Recent Posts widget shows the most recent posts not listed on the page that you are currently on. So, if you have a total of 10 posts and 5 are showing on the homepage and your recent posts widget is set to show 5 posts, posts 6-10 will be in the content of the page and posts 1-5 will be in the recent posts widget (because there’s usually no point listing posts that are already listed on the page). If you had 15 posts and 5 shown on each page, the home page would have posts 11-15, the widget would have 6-10 etc. I would guess that you don’t have enough posts to overflow from the home (or blog) page yet so they’re not being listed in the widget on the blog page.

  201. Ok, so it was as simple as that? Oops. Ok, thank you for your quick response. Earlier I tried to add another test post to see if I could resolve that issue–but I guess I didn’t add enough. I will take note of that.

    I think my primary issue is then is that I’m trying to make my ‘home’ page a home page & not a blog page. Is there a simple answer to that? I just want to have a simple layout as my home page (header, content (not posts), sidebars, footer)–and my blog page to be a *separate page (in the nav bar)*. Similar to the way it is set up on my site here

    That way all my recent posts from my blog will show up in my widgetized footer on the home (and every other page…)

    Does this make sense?

  203. Lindsay — You should be able to make the home page a non-blog page and show the recent posts widget. I would think that the case I was talking about would only happen on the main blog page, whether that be the home page or another page as you have used. If you’re using a static home page the widget should still show up? I couldn’t see the widget on any of your pages, so I was guessing at the problem assuming you had deactivated the widget until you figured it out, because I have seen what I described happen before.

  204. Hi Krista,

    I’m new to WordPress & Thesis and you are a godsend. Thank you.

    I’m trying to style a full-width footer using CSS–but I messed it up as you can see here: http://hutsonresourcegroup.com/wordpress/

    How can I fix this?
    This is the CSS I added to my custom.css file:
    .custom #footer_area {background:#2a4c59; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer {border-top:0;}

  205. Mary — I imagine that you could have had a problem with the page background colour, fixed with .custom #footer_area .page {background:trasnparent;}, but I can’t see a problem with your footer now.

  206. Thanks so much for this! What if I wanted the footer to be the Full Width of the bottom of the page? What would I need to do? Thanks!

  208. Thanks so much for that line of code… I’m using the Thesis Theme for WordPress…. should I place this in my custom.css file? If so, where?
    Currently my custom footer code in there is:
    .custom #footer_1 {text-align:left; color:#FFFFFF; background:#043846;}
    .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:#FFFFFF;}
    .custom #footer_1 ul.sidebar_list li.widget a {color:#FFFFFF; border-bottom:0;}
    .custom #footer_1 ul.sidebar_list li.widget a:hover {color:#FFFFFF;}
    Any help would be greatly appreciated, thanks so much again!!!!

  209. Ed — Yes, it would go in custom.css. Anywhere in the file (as long as it’s not in the top commented section) is fine, but right above that block of CSS you have shown is a sensible place to put it as the CSS you’ve shown would be for stuff that is inside the element that I have shown.

  211. Kristarella,

    Thank you so much for putting this great tutorial together, it’s helped me so much! I do have a quick question for you… we’ll, hopefully it’s quick for you to answer.

    How did you create the footer_widget_area div that you have? Is there a Thesis hook you used to insert this at the level you did? Am I missing it?

    I tried the thesis_after_content_box and thesis_before_footer, but it’s still getting inserted within the content_area div or footer_area div.

    My goal is to have a footer widget area like you have that allows me to insert widgets. The code you’ve provided is excellent, but I’m wanting to put it all together to have a dedicated footer widget area like you do.

    Thank you for your time and hard work!
    Bryan

  215. Merry Christmas Kristarella – I hope you’re having a good Christmas down under!

    Thank you for your tutorial, it’s great to find people willing to help the likes of me – a newbie in the world of blog customization and Thesis.

    When using the above code you gave for customizing the footer style background with CSS in full width page layout, I keep getting an unwanted block of white (very annoying!) and the double line border doesn’t seem to want to disappear.

    The coding I’ve put in is: .custom #footer_area { background: #404040; padding: 0.5em 0; border-top: 1px solid #691616; }

    I’d be grateful if you’d look at the code, check our site and share some wisdom.

    I hope to hear from you soon.

    Thanks
    Nic

  217. Hello Kristarella,

    A Happy New Year to you and your visitors!

    I’m finally tweaking my footer widget, following your instructions and some comments, but I still have some questions because I’m not a programmer. On this printscreen I made some notes: http://farm5.static.flickr.com.....2673_o.jpg

    1. The inside of the red rectangle should be also white. Which code do I have to implement and where?
    2. Can I change the double line into a single line, and move the double line to the bottom of the page, just above my copyright/disclaimer footer?
    3. Can I stack two smaller widgets in the same column?

    A part of my CSS code:
    /*——*/
    .custom .page {background: #fff; }
    .custom #header_area .page {background: url(‘../../../images/header.jpg’) no-repeat; height: 100px; margin-top:1em; margin-bottom:-1.95em; }
    .custom #footer_area .page {margin-bottom: 1em; height: 25px; }
    .custom #header {border-bottom: 0; }
    .custom ul.menu {border-bottom: 0; }
    /* .custom #content_box.full_width { background: none; } */
    /* .custom .full_width #content { width: 930px; } */

    /*——*/
    .custom #footer_1 {background: #ffffff; font-size: 1em; text-align:left; color:#333;}
    .custom #footer_1 ul.sidebar_list li.widget {background: #ffffff; 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;} */

    A part of my custom_functions.php:
    function custom_footer() { ?>

    ‘Footer’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    )
    );

    Thanks for your help!

  218. Some of my code from the custom_functions.php doesn’t appear:

    function custom_footer() { >

    }
    add_action(‘thesis_hook_footer’, ‘custom_footer’, ‘1’);

    register_sidebars(1,
    array(
    ‘name’ => ‘Footer’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”

  219. Hi kristarella
    Thank in advance for this. I have been trying with no success to use the widgetized version of the footer.

    I keep getting this syntax error message that points me to line 52:

    Parse error: syntax error, unexpected ‘}’ in /home2/socialig/public_html/wp-content/themes/thesis_16/custom/custom_functions.php on line 52

    and line 52 is basically this: <?php }

    What might the problem be?

  220. Serge — Answers to your questions are below.

    . The inside of the red rectangle should be also white. Which code do I have to implement and where?

    I don’t know. I can’t tell just from a screenshot. It must have to do with either a background colour or padding that’s been added via custom_functions.php to sections other than the footer area.

    2. Can I change the double line into a single line, and move the double line to the bottom of the page, just above my copyright/disclaimer footer?

    Sure. In custom.css add .custom #footer {border-top:none; border-bottom:3px double #ddd;}

    3. Can I stack two smaller widgets in the same column?

    Yes. You can either create two widgetised areas and float one right and one left or you can try what I suggested to Rob in another comment.

  221. Marvin — The error means that it didn’t expect to find a closing curly brace in that position, which means that you’re probably missing some other PHP syntax before that, possibly a semi-colon to end the line previous or an endif; or endwhile or something like that.

  222. Great tutorial! Is there a way to make one wider than another? In other words, I want 2 that are one size, then a 3rd that is 300-400 px wide. Is it possible to have different widths?

    Thanks again!

  223. Darren — Yes, most widgets will have a unique ID or class that you can use to specify different widths. View the source of your page or use firebug to figure out the ID or class to use. An example is the Recent Snippets widget in my footer: it has a unique ID of “rss-2”.

  224. Once you find the ID, how do you modify it? I searched in both custom_functions and custom.css and couldn’t find it???

    Thanks!
    -Darren

  225. Darren — Add a line in custom.css something like .custom #rss-2 {width:300px;}. Or if you’ve used the CSS in the post, after the line

    .custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:left;}

    add

    .custom #footer_1 ul.sidebar_list li#rss-2 {width:46%; margin-right:2%; float:left;}

    to get that one widget to take up the space of two.

  226. Is there anything different to consider with Thesis 1.6? I’m not having any luck using the supplied codes to generate the wigetized fat footer for my site.

    http://www.adamingstudio.com

    I had page framework set, but switched to full width with background color thanks to the new interface options in 1.6. But when I add the updated PHP from comment 151, I get nothing. So, am I adding that to the current PHP in the original post? I’m just a bit lost is all.

    As always your help is amazing and I’m grateful.

  227. Correction. I got it to work, but I wanted a custom background image for the footer. That’s working…sort of. It cuts the top of the image off and puts it on the bottom. I’ve played with the CSS and haven’t found anything.

  228. Adam — The default for any background, if not otherwise specified, is to repeat horizontally and vertically, so that’s what’s happening, the footer is taller than the background image and it gets repeated.
    In those cases I usually set the background to repeat-x and the background position to left bottom and make the background colour the same as the very top of the image so that shows through the gap, or if it look better you can set the position of the image to the top and have the colour at the bottom of the image show through. You can see all the background properties on the w3Schools site.

  229. repeat-x was indeed the key. Thanks for the link to the W3 School. Great resource.

    I appreciate your willingness to help so much. May I call you a genius, or will that make you hide your face in embarrassment like your gravatar?

  230. Adam — Hehe, thanks. I think the hands over face thing is a bit of shyness left over from when I was younger and the internet felt like a more dangerous place (not that it is less dangerous now, I’m just less naive, I hope). πŸ˜‰

  231. Hi Kristarella.

    I’m working on tweaking the footer code you’ve provided. I’ve looked at the codex for other things to put in the footer (I don’t want my long blogroll in there, for example). While I don’t want to widgetize the footer, I do want to put things in there from my sidebars which are in my sidebars through the help of a text widget. Various RSS feeds, for example, and just a graphic or two. I’m not really great with code, though, so this may be obvious, but…how do I do that? You use class=widget; how might a person just dump in some boring HTML (img links to whatever) or an RSS feed?

    Also, I’ve been trying to get a color in the background as well as remove the lines, etc. That’s not happening, and I’m wondering what might be the problem. That, however, is less pressing than the question above, if I’m limited to one question. πŸ™‚

    Thanks for your help. I appreciate what you do here.

  233. Hi Kristarella!

    May I ask what Twitter plugin you use for your footer? The one at the Twitter website has way too much extra stuff on the top and bottom. πŸ˜›

    And thanks so much for providing all this help and info! It is beyond appreciated!

    -Nicole

  234. Julie — For the border you’d need the CSS in custom.css .custom #footer {border-top:0;}. You can try adding a background colour to that .custom #footer {border-top:0; background-color:#fdd;}, but that will have a white border around it because of the #page and #container elements. If you want to avoid that you need to use the full-width framework.

  237. Hi Kristarella,

    Thank you so much for all of your codes, I am clueless to how to build a website, but thanks to you I am managing to create a very nice one. Thank you so much!
    I used your code to create a 3rd sidebar, and it works great! I had been looking for a side bar that was the full witdh of my site and I was happily surprised that the 3rd bar ended up as such. However, I realy only want to have the 3rd one and delete the other first 2. I managed to do that by choosing the no sidebar option when creating a page in wordpress. So that all worked out very well, but now is my question, is there a way i can edit your origional code for the 3rd sidebar so that it only shows on my homepage (static page) so that when I choose the no sidebar option for my other pages I end up with non on those. I am sorry if my question is hard to follow.
    Thanks you so much

    Claudia
    The Netherlands

  239. Thank you so much, I have tried a few places of where to place the is_front_page() code. However, I am so brand new to this that I am just not quite sure where and how to place it. That said, though I am following the tutorials on Tizag as I saw you recommended in some of your posts, am determined to learn this.
    Thank you for taking the time answering my questions.

  244. Hi kristarella

    I dont have any specific question to ask but I simply could not resist complimenting you. It is absolutely awesome to note that how politely and to the point you have answered to all the comments from Nov 2008 to Feb 2010. I must say, you have extra-ordinary patience and talent. Thank you for the tutorial.

    Regards
    Meetul Jain

  245. Hi Kristarella,

    I would like to add my own content in my footer, no widgets but I woud like them spaced out and arranged like the widgets i.e in 4 columns.

    What part of the code would I have to change to do this? I would have to replace/remove the widget parts?

    Many thanks πŸ™‚

  246. So, total newbie question. The DEFAULT framework for Thesis 1.6 is PAGE, not Full Width. The beginning of your tutorial says something about framework. Can I proceed in PAGE framework or do I need to make a change?
    To recap: 1. drop .custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer {border-top:0;}
    into my custom.css
    and 2. drop the appropriate code in comment 151 for a wigitized footer into custom functions and I’m set?

    Also, I see that you wrote this 2 years ago, I’m assuming this will still work on a Thesis 1.6 fresh install?

    Thank you!!!!!!

  247. Meetul — Thanks very much πŸ˜‰

    Lee — In this case you can use the widgets in the original tutorial as content wrappers and put whatever you want in there. That’s essentially what the first “about” widget is. If you replace the wordpress functions with paragraphs it will be plain content however you like it. E.g.,

    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>
			<li class="widget">
			<h3>Another thing</h3>
				<p>Ooh, a second content area.</p>
			</li>
			<li class="widget">
				<h3>My 3rd content spot</h3>
				<p>Even more stuff</p>
			</li>
			<li class="widget">
			<h3>Final footer space</h3>
				<p>Whatever you like in between the footer tags</p>
			</li>
		</ul>
	</div>
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');

    Marty — You can use the custom function that I provided in the page framework, no problems. You would not use the CSS that you quoted though because #footer_area doesn’t exist in the page framework. You would use the code from comment 151 and then use the final CSS in the post to make sure the widgets line up horizontally rather than vertically. This would result in a widgetised footer inside your page (not full-width).
    Yep, it works with Thesis 1.6.

  249. Thank you! I’m ALMOST THERE! as you can see at http://www.martinrayvaughan.com, the layout is looking right but I’d like to either A. Change the footer background color or B. Use a an image (but if I use an image, what would be the best width/height?).
    You are so kind to be helping us newbies!
    Marty

  250. Marty — Nice!
    The total width of your footer is 759px. You can add a colour with .custom #footer {background-colour:#ddf;}. You could try using the little curve shadow from the header and mirror in the footer perhaps.

  251. Ugh..ok, thank you for being patient… I am going to donate to your cause…

    This is exactly what I have in my custom.css regarding this little upgrade:

    .custom #header #logo a { display: block; height: 120px; width: 780px; background: url(‘http://www.martinrayvaughan.com/wp-content/themes/thesis_16/custom/images/newbanner2.png’) no-repeat; outline: none; }
    .custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
    .custom #header #tagline { height: 0; }

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

    When I added .custom #footer {background-colour:#ddf;} at the end (using a nice shade of grey for my color), nothing happened. I noticed that I don’t have the:
    .custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer {border-top:0;}
    because it doesn’t exist in the page framework? Remember, I’m an idiot…

    ps__I would also like to discuss a 1 hour skype phone call fee with you if you do that sort of on-the-fly consulting.

  252. Great help on my footer issue – thank you so much.

    The only problem I cannot seem to resolve is the background. I want the whiet box to be the same green as the outer area.

    Can you please help?

    Thanks

  253. Marty — Try adding .custom #footer {background-colour:#ddf;} just before the line .custom #footer_1 {text-align:left; color:#333;}. It should definitely work…

    I can do Skype consulting. Email me, I need to book a couple of days in advance so I can set the time aside.

  255. Awesome! After I changed Colour to Color πŸ™‚ since I’m stateside. One last thing… it looks much better with a darker background, but it would TOTALLY rock if it spanned the entire page and not just my Content + Sidebar width… ideas?

  256. That works – but it needs to be in Full Width otherwise it becomes all white. Can I keep it green in Page Framework?

    Thanks

  257. Marty — Ah geez, my bad! Yeah, “colour” doesn’t work in CSS, even in Australia! To span full-width you must use the full-width framework like the start of the post suggests. Got a video on it that you should check out. Switching to full-width should not break your existing customisations (as the video will demonstrate).

  258. Donna — Not sure I understand what you’re after, but I’ll attempt to answer what I think the question might be: If you don’t want a full-width footer you would add the background colour to .custom #footer_area .page instead of .custom #footer_area.

  259. Ok so I switched to full width and you’re right, no surprises in my design.
    So now I would add
    .custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer_area .page {background:transparent;}
    .custom #footer {border-top:0;}
    “somewhere” in my custom.css, right?

  260. Obviously I am missing something, I switched to Page Framework and the footer background is all white. I want it to be the same green as my header.

    Here is my custom.css what did I do wrong?

    .custom #footer {
    border-top:0;
    font-size:12px
    background:#94c073
    background-colour:#94c073;
    }
    .custom #footer_area.page {background:94c073;}

    .custom #footer_1 {text-align:left; color:#94c073;}
    .custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:right;}
    .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;}
    .custom #footer {background-colour:#94c073;}

    Many thanks

    Donna

  261. Marty — Yep! Personally I would put it in between the header styles and existing footer styles because I like to keep my stylesheet in the same order as the HTML, but it doesn’t really matter.

  262. Donna — Oh! You’re in the Page Framework now… Okay, as I mentioned to Marty #footer_area doesn’t exist in the page framework, so you can delete the line .custom #footer_area.page {background:94c073;} altogether.

    The reason the #footer CSS isn’t working is because you don’t have semi-colons separating all the different style attributes. Change it to:

    .custom #footer {
border-top:0;
font-size:12px;
background-colour:#94c073;
}

    FYI, you shouldn’t need a font-size in there because you can change all the font sizes in the Thesis Design Options πŸ˜‰

  264. Donna — Glad you caught that! I saw the semi-colons, but not the “colour”, although, just “background” would have worked too if it weren’t for the semi-colons.

  266. Hi Kristarella,

    So I’m trying to take the powered by word-press footer off my site.

    I did the normal .custom edits and it’s still there… I can even do you suggestions and its still there.
    What am I doing wrong?

    Thanks,

    Jeff

  267. Jeff — There is no “powered by WordPress” message by default in Thesis. The only default messages are “Get smart with the Thesis WordPress Theme from DIYthemes.”, instructions for removal are on the DIYthemes Answers blog. There can also be a “WordPress Admin” link, which can be turned off in the Thesis Options under the Display > Administration options.
    Any other messages would have to be added (and therefore removed) manually via custom_functions.php, or the Footer Scripts box on the Thesis Options page, or the Thesis OpenHook plugin if that’s installed.

  268. Thanks for the reply! =)

    This is all I have in the custom_functions file:

    <?php

    remove_action ('thesis_hook_before_header', 'thesis_nav_menu');
    add_action ('thesis_hook_after_header', 'thesis_nav_menu');

    remove_action('thesis_hook_footer', 'thesis_attribution');

    And the footer scripts I have my Google analytics code.

    But its still there… What could it be?

    My site is muscle-balance-training.com/blog

    Thx

    Jeff

  269. Jeff — That footer is either inserted by a plugin or your footer.php has been edited manually (I think). Check footer.php in the Thesis theme folder and if it’s not that try disabling plugins.

  270. I checked my footer.php in the html folder of thesis. Not there.

    I disabled all my plugins… Reloaded my page… Still was showing..

    How weird is that?

    Jeff

  271. I figured it out!

    I did not have a footer.php in the root directory of the thesis folder, but had a custom footer.php

    It by default went to my WP default theme. i.e. the original blue theme that comes with word-press.

    So I deleted all my themes besides thesis to make sure, and sure enough… But that did not fix the whole problem, it still had some gibberish in the footer.

    I copied the footer.php file from the customs folder and put it in the root folder of thesis, and viola!

    Working great now!

    Thanks for all your help as well! =)

    p.s. did you know your site was down for a few hours last night?

  272. Jeff — Glad you could fix it up!

    No, I didn’t realise the site was down. Thanks for letting me know. I just checked on my host’s support page and it turns out my server had power supply issues. It should be alright now I think.

  273. Thanks for all of your awesome help! WTH though? Whenever I change the hex color on this footer…the dang thing jumps up on the page…I’d really like for it to be all the way on the bottom like yours…Is this no good for 1.6?

  274. Jack — Nope, it’s fine with 1.6. I don’t know what would do what you’re describing. Could you be deleting more than just the colour when you change it? I would have to see it in action to know what is going on.

  275. Sorry…I don’t know if I included the URL earlier…it’s at dwbfh.com/wordpress

    I’m fairly certain I am not deleting more than just the color…

  276. Once again…my apologies. I am trying it now and it is working just dandy. I believe it was a conflict w/ the Chrome browser I was testing on earlier…

    Thanks for your quick reply! Good Day!

  277. Hello,

    I’m trying to add this customized footer with content but every single different coding I’ve tried, the widgets just stack on top of one another. I have no idea how to get them into columns. Even coding that I’ve used with separate footer sections to move content into still stacks the widgets. Any suggestions?

    Thanks!

  279. Okay…i’m back…it’s doing it again. If you check out the website, the footer only is at the bottom of the content, not held on the bottom of the entire page.

    I’d appreciate any input!

    Thanks!!

  280. Jack — Oh! Didn’t quite know where you meant the footer was jumping to. That’s actually normal behaviour: the content of a web page is only as big as it needs to be, so if the page content is shorter than your browser height then the footer will not be below the content, but not necessarily the bottom of the browser.

    If you plan to have more content on the page then it’s not such a big deal. If you think you will have some shorter pages then you’ll need to try a sticky footer. These two methods are good:
    http://ryanfait.com/sticky-footer/
    http://www.cssstickyfooter.com/
    They will likely need you to add another div around the content, it can be done via hooks.

  283. Hey there…it’s me again.

    Hey, I was wondering if you can style your footer using the page framework instead of the full-width framework?

  286. It’s a great and useful tips that i was looking for. I can’t but wait to apply it on my client’s website to make them happy.

    I would like to give you a HI5 for this tips kristarella.

  289. Thank you for a great solution with the widget. Works excellent for me and is so easy to use.
    Some small issues at http://brian.se.linweb58.kontrollpanelen.se/ (temporary URL) though:
    1. I get a very tight margin between the page content and line separating the content from the footer.
    2. The contents of the footer is pushed down and have a big margin up to the line separating the footer from the page content.
    3. The footer floats/continues all the way to the bottom of the browser windo. I would like it to be framed in so that I can see the blog background below the footer.

    This widget solution is so simple and nicely done that I’ll go out of topic and request a similar solution for adding different sidebars to different pages, and not having the same sidebars reapeated at every page.

    There is a solution at http://www.berchman.com/thesis.....like-them/ but whatever I do it won’t work (I would like to use the default template – or copy it since I don’t want to do any changes but the actual content of the sidebar for different pages). I am pretty sure you would be able to come up with something better. πŸ™‚

  290. Brian — I think the following CSS will solve your issues:
    1. .custom #content {padding-bottom:2.2em;}
    2. .custom #footer li.widget {margin-bottom:0;}
    3. .custom {padding-bottom:2em;}

    I will put your tutorial idea on my list, but I don’t know if/when I’ll get to it. In the mean time I would recommend checking out the Widget Logic plugin, which allows you to specify which pages widgets should be displayed on.

  291. Thank you so much!

    1. and 3. worked perfectly. Don’t think anything changed with no. 2. The titles in the footer is still pushed down quite a bit within the footer area.

    That I can fully understand. Widget Logic seems interesting. Will try it out, my first trial didn’t work out. Trying to remove the first widget in the first sidebar from the page /galleri/ using !is_page(‘galleri’) – sorry won’t bother you with those issues – wrong topic, wrong place πŸ™‚

  292. Sorry, now it works. I forgot to run “Use ‘wp_reset_query’ fix”. Widget Logic seems to be an excellent solution to what I am looking for, thanks again!

  293. Brian — Okay, I didn’t really understand your #2 then. When you said “contents of footer” I thought you meant the original footer contents. The solution lies in margin or padding for .custom $footer li.widget h3, but I’m unable to check the specifics on your site. Try using firebug to find out.

  294. Hello, under the bottom of the post page, how do I get rid off the { Comments on this entry are closed } ?
    I do not want to show this message nor do not want to have anyone to post comment in my side..
    thank you for help

  298. I thought I had my footer working just fine. I see that in IE the white background does not extend down, nor does the Thesis/WP info go to the bottom below the items I want in the footer. It does display correctly in Chrome. Any suggestions on what I’m doing incorrectly?

  299. Julie — It depends on the version of IE (IE generally doesn’t cope well with floated elements). You can try adding float:left; width:100%; to the CSS for .custom #footer_1 or you could add the following after your widget code:

    <!--[if lte IE 7]>
<div id="ie_clear"></div>
<![endif]-->

  300. Nice post πŸ™‚

    What would be your advice for this..

    I plan to have a home page with no footer, i.e just a simple design

    When you go into the site, I will have a “fat” footer with navigation in there.. So for my video page, I will have a list of different styles in my footer, i.e Black and White, nature, sports etc

    But when i’m on a photography page, I would need different options in the footer for the photography page.

    What would be the best way to do this?

    Many thanks

  301. Lee — You’d need all the same principles as my Page Specific Headers post. Take a look at the Inline Images section and he conditional code and see if you can work it out. Feel free to ask a follow up when you’ve taken a look at that: essentially you need to use conditional code to output different things on different pages.

  302. this is a guess, it’s also a follow up from your reply at247 about displaying my own info in the footer.. here it goes function custom_header() {
    // header for photography
    if ( is_page('photography') )

    About
    Hello, this is me, and this is my blog. I like blogging, Thesis and teh intawebs.
    Read more on my about page

    Another thing
    Ooh, a second content area.

    My 3rd content spot
    Even more stuff

    Final footer space
    Whatever you like in between the footer tags

    <?php }
    add_action('thesis_hook_footer', 'custom_footer', '1');
    // header for posts in Tutorials Category
    elseif ( in_category('Tutorials') )

    About
    Hello, this is me, and this is my blog. I like blogging, Thesis and teh intawebs.
    Read more on my about page

    Another thing
    Ooh, a second content area.

    My 3rd content spot
    Even more stuff

    Final footer space
    Whatever you like in between the footer tags

    <?php }
    add_action('thesis_hook_footer', 'custom_footer', '1');

    The // header for posts in Tutorials Category
    elseif ( in_category('Tutorials') )     describes another page for which I will have different footer on right?

  303. sorry, I used the functions and it came out like that.. sorry..

    I also noticed that I used function custom header which should be follow

  304. Lee — Close-ish. One difference between the header thing and what you want to do is that you’re going to be putting multiple lies of code in the conditional statement (if and elseif), so you need to use curly braces to enclose the whole thing (whereas in the header tutorial I only had one line after the “if”, so I didn’t need brackets). Also, you can include each different case in the one function, you don’t need to repeat the function. Here is your code rearranged (and with the HTML markup, which may have been stripped when you posted your comment):

    function custom_footer() {
	// footer for photography
	if ( is_page('photography') ) {
?>
	<li class="widget">
		<h3>About</h3>
		<p>Hello, this is me, and this is my blog. I like blogging, Thesis and teh intawebs.</p>
		<p><a href="/about">Read more on my about page</a></p>
	</li>

	<li class="widget">
		<h3>Another thing</h3>
		<p>Ooh, a second content area.</p>
	</li>

	<li class="widget">
		<h3>My 3rd content spot</h3>
		<p>Even more stuff</p>
	</li>

	<li class="widget">
		<h3>Final footer space</h3>
		<p>Whatever you like in between the footer tags</p>
	</li>
<?php
	}
	// footer for posts in Tutorials Category
	elseif ( in_category('Tutorials') ) {
?>
	<li class="widget">
		<h3>About</h3>
		<p>Hello, this is me, and this is my blog. I like blogging, Thesis and teh intawebs.</p>
		<p><a href="/about">Read more on my about page</a></p>
	</li>

	<li class="widget">
		<h3>Another thing</h3>
		<p>Ooh, a second content area.</p>
	</li>

	<li class="widget">
		<h3>My 3rd content spot</h3>
		<p>Even more stuff</p>
	</li>

	<li class="widget">
		<h3>Final footer space</h3>
		<p>Whatever you like in between the footer tags</p>
	</li>
<?php
	}
}
add_action('thesis_hook_footer', 'custom_footer', '1');

  306. Hi Kristarella! IΒ΄m new to thesis, need some help and found your awesome blog.

    IΒ΄m trying to move my navigation menu to the footer and stick it to the bottom, like a floating effect. Can you help me?

  308. Hi,

    I was wondering how I add additional widgets to the footer. I would like to have 3 columns with 3 separate widgets.

    Thanks, Shawn

  309. Hi Kristarella

    Firstly, I’ve found your site of huge inspiration and guidance while creating my little blog, so thank you πŸ™‚ At the moment I’m struggling with how to add my sharesale thesis link to my footer. Is this easier than I am making it out to be?

    Thanks
    K

  310. Shawn — I believe what you need to do is follow the tutorial in this post and then at the end add 3 widgets instead of four and set their width at 31% instead of 23% so that they take up oen third of the width of the footer (including margins).

    Kate — You essentially need to replace the default Thesis attribution with your own: this DIYthemes Answers page should cover it.

  312. Great tutorial! I widgetized my footer using the information in the comments and the css in the post.

    I had found some other tutorials, but they created three or four separate widgetized areas in the footer. I didn’t like that. I have widgetized footers in my own themes, but doing so in Thesis was a little harder.

    Thanks again

  314. First of all, thank you so much for this wonderful site Kristen, it’s managed to help me (new Thesis user) and so many others with your wonderful tutorials and championing invaluable comment help afterwards. Thank you!

    Then if I may, a question. I’ve managed to make myself a footer. So far so good. But when I try to widgetize it, using your code in comment 151, I always get a parse error on line 16 – the <?php } on the second last line. I've read through all the comments here and seen that two or three experienced the same problem, but unlike them I can't seem to work it out. What could be wrong?

  315. Sofia — The error means that there is something missing before that line, so when it gets to that line, it doesn’t find what it expects to. I can’t say any more than that without seeing the whole of the file before and including that function. Feel free to copy it into Pastebin and send me the link if you’d like me to try to find the error.

  316. Thank you for your prompt reply to my question Kristen/Kristarella! However I don’t need to bother you with questions anymore, after going through this whole page (all comments included) several times (soon I can recite some of them in my sleep!) and looking at my custom files and fiddling with them – I managed to work it out!

    Thank you for a fab tutorial!

  317. Hey, thanks to you, I’ve finally gotten the fat footer to work on my website! Great tutorial and thanks for the share. πŸ™‚

  319. Hi Kristarella,

    I was wondering if you knew how to take out the “WordPress Admin” Link that shows up at the bottom of the footer.

    Thanks, Shawn

  320. Hello,

    I LOVE your site. Very nice!!! I have one question… How do I center the text in the footer? Also, I’m very new at this so I need some level of detail… Thanks so much!!! πŸ™‚

  321. Shawn — It’s an option in the Site Options (or Thesis Options for 1.6 and earlier).

    Sandy — You would need to paste the following into custom.css.

    .custom #footer p {text-align:center;}

    But now that I visit your site it looks like you already managed…

  322. Hello,

    Thanks so much. I figured it out seconds before your reply. Thanks so much for responding though…. πŸ™‚

  324. Roman — I actually have a bit of a gap at the side of my site on an iPad as well, at least there was when I looked at it in the Apple Store on the weekend. It kind of looks like there’s a gap left for a scroll bar, but no scroll bar is needed. Short of going to the Apple store and trying to edit my site down there and check it on the iPads there, I have no way to test it.

    However, I did see something on your site that could cause an issue: you have width:100%; set on #footer in custom.css. You should not use that unless you intend to remove all the padding from #footer because then the real width of the footer becomes 100% + padding.

    As for the gap at the bottom, I think it might just be because the page content is not long enough to push the footer to the bottom of the page. There is no gap when I look at it on an iPad simulator.

  325. Hi, How did you the small box on the top right of this post (“Content”)?
    I want to add a box with links similar to that but only in specific pages.
    Thanks so much, Gustavo

  326. Gustavo — That contents box is written with javascript and is automatically generated when there is a post with headings that have IDs.

    If you only want such a thing on a few pages it would be simplest to hard-code it into the pages using an HTML list of the headings linked to the ID of the headings in the page. E.g., <a href="#example-heading">A post sub-heading</a> will link to an element on the page with an ID of “example-heading”.

  327. I’m trying to use your full-width header tutorial to make a full-width before_footer, knowing nothing about php. But I did get it down to receiving only one error message so that’s ‘better’ I guess. Close but no cigar.

    I moved the content out of my thesis_hook_before_footer (using OpenHook) into the ‘footer’ hook so as not to be so confused, perhaps, and then I tried your instructions (above) for making a full-width footer but nothing happened. I mean, nothing.

    I’m using Thesis 1.7.

  328. Jan — The code in this tutorial should be added via custom_functions.php rather than OpenHook. If it is going to be added via OpenHook you need to remove the lines function custom_footer() { ?> and <?php }
    add_action('thesis_hook_footer', 'custom_footer', '1');     as OpenHook effectively does that bit for you.

  329. I don’t have any ‘code’ per se in OpenHook, just html content. What I’ve done is combine the content in OpenHook and use the code you gave above for making a colored background. The color did finally show up. At this stage of my learning, even the smallest detail can take an hour, so trying to move hooks around is probably beyond me. I was lost at trying to translate your header code for use in the before_footer area.

  330. Jan — Perhaps the problem is that thesis_hook_before_footer is not a full width area, to create a new full-width area before the footer you need to use thesis_hook_after_content_area or the “After Content Area” box in OpenHook.

    If you want to make a new full-width area in there it would be something like the following in the correct OpenHook box:

    <div id="my_new_area" class="full_width">
	<div class="page">
		<p>This is a paragraph on text in a new full-width area.</p>
	</div>
</div>

    and in custom.css

    #my_new_area {background:#fdd;}
#my_new_area .page {background:transparent;}

  331. Thank-you for this. I’ve made due note of it and might try again later. It’s late, the old mind has had a long day. BUT, the next time the footer is irritating me I’ll give it a try. It looks pretty good using all the html content as just the footer instead of breaking it up which isn’t really necessary with the double-line gone.

  332. Does all of this still work with Thesis 1.7? I’m having a hard time getting my footer titles to match my sidebars, but I used a slightly different tutorial.

  333. Krystyn — Yes it all works exactly the same in Thesis 1.7, there was one line of extra CSS needed for a full-width footer, but that is included in the post.

  334. Great Tutorial – Love it!!

    I tried to read all 333 posts but didn’t see how to pull my Blogroll into the footer.
    Just want to have one of the columns (LI) pull my Blogroll from WP.
    Or, “links”

    Thanks

  336. I finally figured it out – YAH!
    So much code, so little brain power these days.
    I was trying to combine the basic with the widgetised and that was just not working πŸ™‚
    Then I realized the widget method would still allow for html code and BAM, I was all happy.
    Still having some unhappy css challenges but that too shall be resolved.

    So much great knowledge/code on your site.

    Thank You!!

  337. Kristarella,

    Your tutorials are amazingly clear and useful, and for that I’m so thankful. Even as a newbie, I was able to use your full width header fix without a hitch. I have two questions re. your full width footer, though:

    1. How can I change the background color of the full width footer? I’ve tried for hours and can’t find a fix.

    2. How can I left-align the text of each of my footer widgets?

    My custom.css code is like this:
    // begin kristarella’s full width header.custom #header_area {background:#213C63;} .custom #header_area .page {background-color:#000000;} .custom #header_area {background-color:#000000;} .custom #header {border-bottom:0;}// end kristarella’s full width header// begin kristarella’s positioning of the nav next within the header// .custom #header {position:relative;} .custom ul.menu {position:absolute; top:2.2em; right:11.0em; width:auto;} .custom ul.menu li.rss {float:left;}// end kristarella’s positioning of the nav next within the header// begin kristarella’s full width footer.custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;} .custom #footer_area .page {background:transparent;} .custom #footer {border-top:0;}// end kristarella’s full width footer// begin kristarella’s full width footer widgets.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;}// end kristarella’s full width footer widgets

    Thanks for all your help!

    Abbie

  338. Abbie — In your CSS you have .custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;}, which is where you would change the background colour of the full-width footer.

    Also, I’m not sure if it will make a difference, but comments in CSS should start with /* and end with */, double slashes are usually for more functional programming languages, like PHP. I’m not sure how those lines of text will affect your CSS file. They might not affect it, but they might.

  339. Hey Kristarella,

    Is it possible to shift the footer content down so that it is not connected to the content? On my web page (http://toastable.com), I’d like the footer content to be placed over my footer-area image but below a certain point on the image (below the water lineβ€”you’ll understand if you see the webpage).

    -Earl Lee

  340. Earl — You have some CSS for .custom #footer_area you can either change the padding from 0 to 2em 0 0 (that's top sides bottom), or you can add a top margin to it. Either way will separate the contents of the footer from the content area.

    Site is looking great, well done!

  342. Can you create a fat footer for a Page framework (Not full width?)

    Thanks,
    Angie

  344. Wow thank you for getting back so fast. Anxious to try this out for the page framework then, Thesis 1.7. Thank you for helping all of us.

    Angie

  345. Hi Kris,

    I have a custom footer on my website which I implemented using the code mentioned in this thread. I want the footer text to be float left.However the footer text does not display in IE. It looks perfect in FF. I tried several option i think of but no use. Can you help me out ?

  347. So regarding the fat footer, where can I find the list of different functions I can call into the footer. Example that you gave in the footer is this:

    And it does work, it calls that in, but what all options of functions can I call into that footer? Of course using Thesis theme.

    Thanks!

  349. Okay will take a look at the list of WordPress functions…. thank you!

    Angie

  352. So I love the fat footer that I got help with, but I can’t figure out how to remove the gray lines that appear in IE. In Firefox I don’t see them.
    Website is here: http://tinyurl.com/22jjbfw

    I especially don’t want the horizontal lines that are below the Subscribe to blog.

    Please let me know, thanks!
    Angie

  353. Angie — You have an error in your subscription widget: the email signup is missing </form> at the end. As weird as it may seem, that is causing the grey lines. It may be that part of the form’s CSS, or default IE CSS has a border and since the form isn’t closed properly it’s repeating the style over a bunch of elements… IE just doesn’t handle errors as well as other browsers.

  354. Wow that is why you are “THE WOMAN” of Thesis WordPress…thank you Kristerella that totally fixed it!!!!

    Angie

  355. Okay I now have this other issue that I just noticed :-(. My website at http://tinyurl.com/22jjbfw for the fat footer, in IE, for some reason I have to refresh twice to make the background show white of the fat footer. If I don’t it only has a white background under the headers (h3) of the fat footer. I have never seen that happen before where refreshing again fixes it?

    Angie

  356. I guess I could just make the entire fat footer background a solid color and not have the border underneath going on!

    Angie

  358. Thanks for the awesome tutorial on Thesis footers.

    I have one question – we’ve got a simple full-width framework site that we’re putting together for a firend. It looks good in most browsers. It has a footerarea div with a solid color. The footer div should sit exactly on the bottom of the browser window. It does on everything but IE7.

    On IE7, there is a gap beneath this div and the bottom of the page. Inspecting it more closely, it seems the body ends about 30 pixels before the actual bottom of the browser.

    Is there any way to clear that up?

  359. Kurt — Without seeing the page in action I can’t tell you what would be causing it or how to fix it. I just checked my site in E7 and it doesn’t seem to have any space at the bottom of the page and the striped bar at the bottom is the background of #footer_area. The only thing I can suggest is to inspect my CSS and see what might be different to yours, and make sure that the pages this happens on are longer than the browser viewport because the footer doesn’t stick to the bottom of the browser unless the content is long enough to push it down, unless you do something like this sticky footer.

  360. Hi Kristen,

    We were able to clear up the problem by adding the following css:
    body {
    overflow:hidden;
    }
    Might be helpful for someone else trying to solve this problem in the future.

  362. Kristen – Yes and No. The unwanted behavior you described does show up on most browsers, but it seems to be OK on IE7 and earlier. We put the aforementioned code in our lte IE7 stylesheet, and everything seems OK, so far.

  364. hi kristarella,

    i find your site unbelievable. i recently started tweaking thesis and i added the footer, my problem, i suck at coding, can you please tell me how to add flickr to the footer, change the text in about and can I make the footer as a widget?

  365. Apple — To make the whole thing widgetised replace the code you’re already using with the code in comment 51. I believe Flickr provides some kind of javascript widget, which you can paste into a text widget in WordPress, or there’s probably WordPress plugins that create Flickr widgets.

  366. Krista, I posted the code directly into my custom.css as follows

    .custom #footer_area {background:#FF7F00; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer_area .page {background:transparent;}
    .custom #footer {border-top:0;}

    It will not display the color across the footer in full width, in fact its not showing any color. I was able to get the header to display in color, where am i going wrong why it wont show on the page?

  368. Weird, I put the footer code ahead of my header code in my custom.css and it now displays correctly, why does code plsacement matter?

  369. Justin — Order of CSS doesn’t matter except for specificity. The reason that the CSS didn’t work at the end of your file is that you’re missing some of your nav menu CSS, so the CSS file just cuts off at .custom ul#tabs li.current_page_item, .custom ul#tabs . This is in error because a CSS declaration should always end with }.

    You can actually delete the last three lines:

            .custom ul#tabs {border-bottom:0; border-color:#657383;}
            .custom ul#tabs li {border-color:#DBD4B7; background-color:#4A4A4A;}
            .custom ul#tabs li.current_page_item, .custom ul#tabs

    They are deprecated and are not doing anything to your site.

  371. I put a text widget – Successful English News – in my footer this morning. The font size was larger than all the other widgets and the line spacing greater. I brought the font size down using w/font-size: small. What’s the best way to get the text to match the other widgets?

    Thanks in advance!

  372. Next to last sentence of previous comment should read “I brought the font size down using “span” w/font-size: small.

  373. Warren — That seems to be caused by li.widget having a font-size of 1.2em, but then #footer p also has a font-size of 1.2em, so your text widget ends up with font-size 1.2x12em. Add to custom.css .custom #footer li.widget p {font-size:1em;}, which should fix it.

  375. Hello,
    I am trying to get the footer to work with no luck at all. I put the cide as should(?) and even my widgets are showing up but I can’t change the background colour. I tried to follow the instructions but I think I’m missing something. Can someone kick me to right direction?

  377. Oh yes, it is working just fine. I was missing the full width and that was the reason. Thank you for the tutorial

  380. Thank you Kristarella for all the work you give so freely to us. It’s really appreciated.
    I added the blue footer and the color ended up perfect. I know how to change that, but didn’t need for the moment. Now I want to place the copyright back on the footer. I do have developer status, so I want to switch over to affiliate program so I thought I’d take off the thesis default now.

    Because I am such a neophyte in the coding world and I do want to experiment with minimal mishaps [i’ve crashed site a few times and had to have to be bailed out] I’d like to run the code by you before I submit to the php page.

    remove_action(‘thesis_hook_footer’, ‘thesis_attribution’);
    function my_custom_footer() {
    ?>
    Copyright 2003 – 2010 Jewish Interfaith Wedding Network
    All rights reserved.

    <?php
    }
    add_action('thesis_hook_footer', 'my_custom_footer');

    Does it matter whether I place this at the beginning of the page or after the photo gallery code that is on the page? http://www.jewishinterfaithweddings.net
    Can I cut and paste this code straight onto the custom_functions.php page

  381. Yehudit — That code is okay, but you should use some HTML for the footer content. E.g.,

    <p>Copyright 2003 – 2010 Jewish Interfaith Wedding Network</p>
<p>All rights reserved.</p>

    It doesn’t matter where in custom_functions.php you paste the code because it goes to the footer hook in the theme.

    I would recommend getting a text editor and FTP system working for you rather than using the built in editor. A desktop text editor can give you the benefit of syntax highlighting and it’s easier to undo errors that kill the site.

  382. Wonderful tutorial Krista, really good stuff.

    My question is, how come I have 3 widgets on the home page and 4 on sub pages? I dont even see where I can delete the blogroll widget. Any guidance would be greatly appreciated! πŸ™‚

    http://www.openfuturemedia.com is where I am working on this type of footer.

    -Reid

  383. Hi krista,

    Amazing tutorials. Love em.

    Question I have, why am I getting 4 widgets on sub pages on only 3 on the home page? I found out how to center the 3, but on other pages, there are 4. I am also not finding where i can get rid of the blogroll widget. Any guidance would be wonderful. Much appreciated.

    http://www.openfuturemedia.com is the site I am editing

  386. Yeah, i figured that part as much, makes sense.

    So then, how do I get rid of the blogroll list from the footer? I dont see it mentioned in the code….

    thanks again!

  387. Hi krista,

    Awesome tutorials. Love em. Just wanted to say..
    Thanks in a big way…
    I was real lost, til I found your site.
    Many thanks for your work. I have just spent half a day following your header and footer tuts.
    kind regards
    Alex

  388. Hi Kristarella
    I’m trying to get a footer similar to the one you have shown but I only want text in the columns and not widgets. How do I do that.

    Thanks for your time you’re a star!

    Bobby

  389. Bobby — In this context widgets are just a word for “little content area”. Sometimes that content can be fancy widgets, or it can just be a block of text. The first “widget” in the example is essentially just text:

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

    but the li class="widget" bit helps it to be laid out on the page properly. You can replace everything within the <p></p> tags with your own text and you can copy and paste that markup into the other widget areas. Or, if you want to make it a widgetised area to use with the widget page in the dashboard you can do that and then use text widgets in the dashboard to add your blocks of text.

  390. hi.. I’ve already used the code :
    register_sidebars(1,
    array(
    ‘name’ => ‘Footer’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    )
    );
    function custom_footer() { ?>

    <?php }
    add_action('thesis_hook_footer', 'custom_footer', '1');

    It works, but I need a 3 column footer.. can you help me how to do it? thanks!

  393. Hi-
    I’ve been looking online at some many different Thesis tutorials and yours is definetly the best. I still can’t seem to find an answer to what it is that I want to do. Maybe it was there and I didn’t see it! I need to add an image file as the head of each of the widgets in my footer. For example, I have a file “about-head.jpg” to replace the “About Me” title. If you check out the site, the sidebar title heads (i.e., “33 Ramblings”) match the ones I want to also add to the footer. For the sidebar, I have an option to add a text box and enter the image address. I don’t have access to the footer via the dashboard. Any help is much appreciated! Thanks!!

    Erin

  394. Erin — Maybe you didn’t have any luck fnding it specifically for Thesis because it’s more of a general WordPress/CSS/HTML thing. Since you’re not using the WordPress widgets thing, but the HTML method you can either add a unique ID to each widget and add the image as a background to the heading, or just replace the heading text with an HTML image.

  395. Hey, Kristarella
    First of all i would like to thank you for the fantastic tutorials you provide

    i have some question, i have added thesis 1.8, is above code is works on that or need to update it. if need to update then let me know which code i use to add a good footer, 3 column footer

  396. Hi! I’m having a bit of trouble with this footer. I used the footer code for the widgets but am having a image layering problem.

    The footer background is one color, then I have a transparent png on top of it but some how the text is going behind the image and I can’t click on the links, for the life of me I don’t know how to get it in front.

    Here’s the css

    /*Footer*/
    .custom #footer_1 { position:relative; text-align:left; color:#333;}
    .custom #footer_1 ul.sidebar_list li.widget { width:23%; margin-right:5%; float:left; padding-bottom: 10px;}
    .custom #footer_1 ul.sidebar_list li.widget h3 {font-weight: bold; color:5C5C5C;}
    .custom #footer_1 ul.sidebar_list li.widget a {color:#8A8A8A; border-bottom:1px;}
    .custom #footer_1 ul.sidebar_list li.widget a:hover {color:#111;}
    .custom .sidebar_list {position: relative; z-index: 5;}

    .custom #footer_area .page{position:relative; background:url(images/footer.png) bottom no-repeat; border-top:1px solid #E3EFF0;margin-top:10px;}
    .custom #footer {position:relative; background:#EDF9FA; z-index:-1;}

    Thanks for your help!

  398. This is really helpful. keep it up and someday I will try to ask a question with my problem ^_^ hopes you will help me too.

  399. Hey Kristarella,

    First off, thank you for sharing so much useful information on your site. I have learned so much from you. You’re the best!

    I’m working on a project and I’m stuck. I was wondering if you could help?
    I’m trying to create a footer that starts in the middle of the page and extends all the way to the right hand side. See this example:

    http://www.strivingstyles.com/images/Picture.jpg

    I can’t get it to work. Can you help?

  401. Adrien — Your idea is actually a bit difficult to execute — combining a position within a box (the edge of the red box) with full-width. I think you could do it with a background image about 2000x1px (very few monitors are larger than 2000px wide) measure out the very middle of the image to the width of your content and then fill in the red and the white so that they’re the right number of pixels in the middle and then fill out the rest of the image with red and white. When the image is centered it should always be in the right spot. Use repeat-y on the background image to get it to repeat downwards.

  403. Kristarella – I have actually already tried that code, but if I try to edit it to have the infor I want showing, it breaks. LOL I suck at Thesis. This theme kicks my but every time I try to design it. LOL

  406. Shan — Okie dokie. If you take a close look at the code in pastebin in lines 62-68, most of the quote marks, single and double, are curly or slanted, rather than straight. Try just deleting them and retyping them in your plain text editor. It’s likely that the places you copied code from had those quote marks converted by WordPress or something like that.

  407. Hey krista πŸ™‚
    i want to have a footer similar to the you have on your site:
    https:\/\/”www.”kristarella.blog/wp-content/uploads/thesis-footer-kristarella.png

    if it’s approved… πŸ™‚

    how do i do that ?

    thanks

  408. Oren — You need to find a suitable photo from a microstock site like Crestock or iStockPhoto and then cut it up so that one section is a repeating background along the whole of #footer_area and the other bit is a background of #footer. There are many tutorials around the place on making repeating images out of photos.

  409. This is GREAT! I have a question. I only want this type of footer shown on my static front page. The standard footer should only appear on the other pages. So far, I have tried the following and it did not work. Any suggestions?

    if (is_home() || is_front_page()) {
    function custom_footer() { ?>

    About
    SHARING GOD’S GRACE
    Read more on my about page

    <?php wp_list_bookmarks('title_before=&title_after=&category=2&category_before=&category_after=’); ?>

    Tags

    <?php }
    add_action('thesis_hook_footer', 'custom_footer', '1');

  410. This is GREAT! I have a question. I only want this type of footer shown on my static front page. The standard footer should only appear on the other pages. So far, I have tried the following and it did not work. Any suggestions?

    function custom_footer() { ?>
    <div id="footer_1" class="sidebar">
    <ul class="sidebar_list">
    <li class="widget">
    <h3>About</h3>
    <p>SHARING GOD’S GRACE<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">

    </li>
    </ul>
    </div>
    <?php }
    add_action(‘thesis_hook_footer’, ‘custom_footer’, ‘1’);

  412. Wow! This is a great tutorial and you are certainly hopping answering these comments!!!

    I added widgets manually per your instructions (rather than the drag-and-drop method) and it works great for most widgets.

    I’d like to include the Pages widget in the footer but it’s forcing its own CSS (Page Nav) that I don’t know how to remove in the footer area (while leaving it fine in other areas) even though I have it wrapped in the same h3 code as the other widgets that are fine.

    Do you know how to get around that issue for this widget?

  413. hi Krista,

    thank you SOOO much for adding this tutorial. I successfully added the footer per your instructions πŸ™‚

    but was wondering…i want to take this one step further and add a 4th widget, but have it appear underneath the top 3 widgets, and extend the entire width of the footer (like this site here). http://deliciousdays.com/

    Could you tell me how to do that?

    Thank you,

  414. Holly, pardon me butting in but I suggest playing around with the margins of the “widgets” in Firebug. The changes will be temporary so you won’t “ruin” anything but if you like the outcome, you can easily copy-and-paste the code from the CSS in Firebug to your custom CSS page in Thesis.

    You can use also Firebug on delicousdays.com to figure out their settings as a guide and do something similar.

    If you don’t know how to use Firebug, then I suggest that you learn from Krista’s tutorial. It’s quick and easy to learn and will help you immeasurably.

  415. Hi
    I am using the widgetized version of your code and I am wondering how to you align the different things in the footer differently, like move it to the left or right or center.

  418. Thank you for the help you give us newbs, I have read 417 posts some twice and still can’t get the right way to put up a photo in png in to my footer.

    My footer is widgetized and the CSS dosnt give me any errors but i have tried everything to put in a photo and i am having no luck.

    Please help.

  420. Hi Kristen!

    I love your code for wigetized footer. I would like to appear with 3 columns side by side. Can you help? Note: I only have the wigetized footer on my front page. Here is the code that I am using… Thanks so much!:

    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>’
    )
    );
    function custom_footer() {
    if(is_front_page()){
    ?>
    <div id="footer_1" class="sidebar">
    <ul class="sidebar_list">
    <?php thesis_default_widget(3); ?>
    </ul>
    </div>
    <?php
    }
    }
    add_action(‘thesis_hook_footer’, ‘custom_footer’, ‘1’);
    Place in 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;}

  422. Hi Kristen,

    Thanks so much for responding. Sorry to be a bother, but that did not work. I don’t know why. In looking at my custom.css file, I also have the following code to center the text in my footer; an enhancement that I added some time ago:

    /* Customize Footer Text */
    .custom #footer {
    color: #000000;
    text-align: center;
    }

    Perhaps, this is contributing to the footer not appearing as 3 columns side by side? Thanks so much for any assistance that you can provide.

  423. Sandy — Your custom.css file is a bit weird: full of white space and also has some PHP mixed in about the footer CSS, and it looks like the footer CSS might be pasted inside the header CSS, which would explain why it’s not working.

    I’ve done a quick reformat of the file. Try backing up your current file in case my reformat lost anything and then use this custom.css.

  424. KRISTEN!!!!!!!!!!!!! That TOTALLY worked. THANK YOU, THANK YOU, THANK YOU!!! Girl, you ROCK! I just need to do some minor cosmetic tweaking and I’ll be good to go! I will gladly donate to Kristarella.com.

    Much Gratitude,
    Sandy – Sharing God’s Grace

  425. Hi, I am so impressed with your skills! I am new to Thesis and learning every day πŸ™‚
    I hope you don`t mind me approacing you for pointers, I got your name from Vanhi of http://www.gritandglamour.com πŸ™‚ Also, I didn`t mean to be too direct texting you on twitter.

    What I am trying to find out is how to get thumbnails working in the teasers at the bottom of the index page etc. I can`t find an option for it in the Design Options in Thesis, and adding URLs to the thumbnail section when writing the post hasn`t worked either. Any thoughts on what I should do?

    I am very grateful for any help you can give me, I hope you are enjoying your day πŸ™‚

    xx Anika
    http://byanika.com
    @AnikabyAnika

  426. Hello again, just wanted to let you know that I found a plugin that works, but thank you very much again for providing such an exellent resource for us bloggers πŸ™‚ xx Anika

  427. Anika — Don’t worry, you weren’t too direct on twitter; I like answering stuff on Twitter.

    I’m thinking that for the thumbnails, you either weren’t using the Thesis Post Image or thumbnail field when writing a post, or your custom/cache folder in the Thesis theme didn’t have the right permissions to generate your thumbnails. Or there’s some other server issues that can cause a problem, but they don’t happen very often; there’s a thread in the forum about how to check those out.

    Anywho, if the plugin suits you, then no worries πŸ™‚

  428. Thank you so much for your fabulous site & post. I was really struggling but after finding this post I think I’m very close to what I need. I’m trying to add the widget footer very similar to your tutorial; the difference is I need to add it within a full width section between content & footer.

    I can add an html section and style it using open hook like this:
    <div id="fat_footer_area" class="full_width">
    <div id="fat_footer" class="page">
    need widgets here
    </div>
    </div>

    My problem is that I can’t figure out how to add the widget area in my new section instead of the footer. I have other content in the footer and I really need these in a separate full width band. Can you please help or give me a clue how to proceed? I would truly appreciate it!!!

  429. Angel — The hooks you need are either thesis_hook_after_content_area or thesis_hook_after_html. So, you want something like:

    function custom_footer_area() {
<div id="fat_footer_area" class="full_width">
  <div id="fat_footer" class="page">
    need widgets here
  </div>
</div>
}
add_action('thesis_hook_before_content_area','custom_footer_area');

    That goes in custom_functions.php.

  430. Oh, got it now! THANK YOU THANK YOU THANK YOU! I really appreciate you taking the time to help and so quickly, too! Thanks, Kristen!

  431. Hey Kristen,

    I really love your site. I’m testing out a design on a mock website before I apply it to our law firm’s main website.

    I copied the code as you said, but for some reason the footer isn’t centered and the background won’t show up. Help?

  435. Here is the code that I pasted into 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’);

    And custom.css:

    .custom #footer_area {background:#c3d9d6; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer_area .page {background:solid;}
    .custom #footer {border-top:0;}
    .custom #footer_1 {text-align:center; 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;}

    I have selected in Thesis:

    Full-width framework with 3 columns.

  437. Thank you for helping me with the header background repeating! I finally got it to work correctly. My next issue is the nav menu not extending full width. I am using Thesis 1.8 and tried the custom css and add functions in your blog tutorials as well as a few others I found on the Internet, but nothing is working as far as extending the menu to the same full width as my header. Please take a look at my site when you have a chance to see what I am referring to : http://www.fromgeorgiatogermany.com

    Again, thank you for all the great blog posts full of valuable information for the Thesis template!

  438. Hi Kristarella,

    Thank you so much for this tutorial! I tried many different footers before settling on yours, and after some fiddling I finally got it looking exactly the way I wanted . . . almost (as usual). But perfect enough for now. I really, really appreciate how much you’ve shared!!

  439. Hey Kristarella,

    How do I add widgets to my full-width footer? I want 5 columns with 1 widget per column. I want them to float left so they are all on one horizontal line. Here’s what it looks like now: http://www.brownjoneslaw.com

    With this CSS:

    .custom #footer_area {
    background:#fff;
    padding:0.5em 0;
    border-top:1px solid #fff;
    font-size:8px;
    }

    .custom #footer_area .page {
    background:transparent;
    }

    .custom #footer {
    border-top:0;
    }
    .custom #footer_1 {text-align:left; color:#333;}
    .custom #footer_1 ul.sidebar_list li.widget {width:55%; margin-right:5%;float:left;}
    .custom #footer_1 ul.sidebar_list li.widget h3 {color:#003366;}
    .custom #footer_1 ul.sidebar_list li.widget a {color:#9d5d00; border-bottom:0; font-size:10px;}
    .custom #footer_1 ul.sidebar_list li.widget a:hover {color:#ccc; background-color:#003366;}

    Any help is appreciated!

  440. Hi Kristarella,

    Thanks for this post and all the other work you do with Thesis.
    fyi, I wanted to see your Simply Blog example – I clicked the link and got these errors.

    Fatal error: Call to undefined function: __construct() in /nfs/c03/h01/mnt/51148/domains/simplyblog.net/html/wp-content/plugins/wordpress-flickr-manager/FlickrManager.php on line 47

    …for what it’s worth.
    Have a great day.

  441. Sarah — If you change this line of your CSS, .custom #footer_1 ul.sidebar_list li.widget {width:55%; margin-right:5%;float:left;} to, .custom #footer_1 ul.sidebar_list li.widget {width:18%; margin:0 1%; float:left;}. Also, don’t change the font size of #footer_area because that changes all the widths of everything within that section. Try changing the font size at the widget level, or in the design options.

  444. Hi Kristarella,
    Just in the beginning building stages and I’m trying to figure out how to have specific widgets for different pages. Any help on this would be greatly appreciated!

    Thanks,

    Hans

  445. Hans — I think the simplest way is to use the version of the code that allows you to use the widget interface in the dashboard, and then install a plugin called Widget Context, which allows you to choose the pages on which the widget is displayed, from the widget admin area.

  446. Sarah — I you look at the source code of the widgets, either by right clicking on the page and choosing “View source” or “Inspect Element” (inspect element is present in Safari, Chrome and Firefox when Firebug is installed) then you can find the unique classes and IDs of each widget. Then you can specify their widths individually. Note that when you make one wider, you need to make another more narrow to compensate and have them all fit on the same row still.
    Also note, if you remove the 8px font size from #footer_area you will have a wider footer to fit more in.

  449. hello kristella,
    Is it possible to display footer outside the html, I created the function for footer widget and place it after the thesis_hook_after_html. That i want a full width footer with widget on it. Thanks in advance!

  451. Hi Kristen,
    I solved my problem. I went into cPanel and wordpress in the directory. I then deleted all the recent custom and custom.function ‘stuff’. Problem solved! I am feeling good. Thanks for all the great tutorials.
    Kind regards,
    David

  454. Hi Kristarella,
    Our site isn’t live yet. Just looking to tie up a few more things before we go live.
    I’d like to create a footer with navigation similar to this one – http://www.roambi.com/
    Minus the chinese link and what not. Obviously making the links relevant to our site.
    I’m learning a lot about HTML, php, css, etc.. but by no means am I great at it. Looking for a somewhat simple way to go about it.
    Your help in the past has been awesome and much appreciated. So thank you!

    Hans

  455. Hans — Try making a nav menu in WordPress (under the Appearance menu), and call it “Footer menu” then add it to the footer with:

    function footer_menu() {
	wp_nav_menu( array('menu' => 'Footer menu' ));
}
add_action('thesis_hook_footer', 'footer_menu',1);

  456. Nice! This worked pretty well. Def understand how it works now, and would like to customize the look. Nothing to fancy. Right now the nav is contained in boxes with type that is barely legible unless you roll over it.
    http://0034807.netsolhost.com/blog1/?page_id=24
    Ideally, I’d like to align Footer Nav and copyright LEFT, and keep the navigation simple with just the single lines inbetween. like they do on this site – http://www.roambi.com/

  457. when i use your code with the Comment 151 and the css code then all the widgets are right aligned and one below the other. please help

  458. Himanshu — Sounds like the CSS is not pasted correctly, or the CSS is not working because of previous errors in your CSS file. If it’s on the site you linked to in the comment author info, then I can see why: there’s some significant errors in your CSS. It should look more like this. The worst errors are at the end where the numbers are at the starts of the lines.

  460. Hi Kristarella, fantastic site and tutes.. Your instructions are so incredibly useful!! We’ve used the full width nav one and transformed our site, absolutely fantastic. So now I’m trying to follow along with this to fix up the footer – just wondering if you can explain exactly how I would add specific pages from the site down into it?? We have some that I’ve taken out of our nav, and want to display down there.. So we can have one column with popular posts, one with those page links, and another with the usual terms and conditions, privacy page links etc. Does that make sense? I’m wondering if that would be what you’ve referred to as a widgetized footer? Thanks!

  461. Anna — Yep, easiest way is to make a widgetised footer and then add a widget with a list of pages, or a menu widget where the menu contains the pages you want.

  462. Thanks Kris, do you have a link or tute on how to do that?? or is it buried somehwhere here in the comments?? lol πŸ™‚ I spent a while reading thru these comments yesterday but ran out of time… ;p thanks .. .

  464. awesome, thanks for that. Will dig it out. thanks so much again.. I’ve just managed to fix our nav bar too, so going great guns today! lol..

  465. wow – all done. Amazing how easy this is when someone actually knows how.. I can’t say thanks enough – but will try!! thankyouthankyouthankyouthankyou … from us πŸ™‚ hope you have an absolutely marvelous day :-p

  466. Hi again Kris, I’ve got another question for you now :-p

    So I set up a whole heap of code for the footer and header now, but noticed today that the site and my access to the dashboard has dramatically slowed down. They’re taking about 20 times as long to load up – I can’t imagine this is normal basically – just wondering if you can check if I have done something wrong?!!

    This is the code I added to custom:

    .custom #header_area {background:#213C63;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;
    }

    .custom #footer_area {background:#213C63; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer_area .page {background:transparent;}
    .custom #footer {border-top:0;
    }

    .custom #nav_area {background:#E6E6E6}
    .custom #nav_area .page {background:transparent;}
    .custom ul#tabs {border-bottom:0; border-color:#E6E6E6;}
    .custom ul#tabs li {border-color:#E6E6E6; background-color:#E6E6E6;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;
    }

    .custom #footer_1 {text-align:left; color:#e6e6e6;}
    .custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:right;}
    .custom #footer_1 ul.sidebar_list li.widget h3 {color:#e6e6e6;}
    .custom #footer_1 ul.sidebar_list li.widget a {color:#e6e6e6; border-bottom:0;}
    .custom #footer_1 ul.sidebar_list li.widget a:hover {color:#e6e6e6;
    }

    and this is what I’ve put in functions:
    function full_width_nav() { ?>

    ‘Footer’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    )
    );
    function custom_footer() { ?>

    <?php }
    add_action('thesis_hook_footer', 'custom_footer', '1');

    Pls help!! argh. Sorry and thanks…

  467. hi again Kris, just wanted to let you know the site seems to be loading again fine now, so all’s well that ends well! Thanks again for the instructions and personal help – all of which are absolutely priceless πŸ™‚ so thanks thanks thanks!

  468. Thanks again. Just like the full width header, couldn’t resist implementing this one too on one of my sites.

  470. This tutorial will surely be very much helpful to me as I am new to Thesis and have just started to dig into it deeper.

    Thanks!!

  471. Hi Kris,

    Thank you for sharing with us the honey… πŸ™‚
    I am preparing the code in my testing environment.

    Basically what I want to achieve is to have spread at the bottom all over the place from the left to the right side a green stripe with some information.

    I added this code in custom_functions.php

    function custom_footer() { ?>
    <div id="footer">
    <ul class="sidebar_list">
    <li class="widget_left">
    <p>enter some text here</p>
    </li>
    <li class="widget_right">
    <p>enter some other text here</p>
    </li>
    </ul>
    </div>
    <?php }
    add_action(‘thesis_hook_footer’, ‘custom_footer’, ‘1’);

    and this code in custom.css

    .custom #footer {color:#f8f6f0; background:#4E5C3B}
    .custom #footer ul.sidebar_list li.widget_left {width:48%; margin-right:2%; text-align:left; float:left;}
    .custom #footer ul.sidebar_list li.widget_right {width:48%; margin-left:2%; text-align:right; float:right;}

    Can you please take a look on my test environment @ http://ioannicut.ro and give a bit of advise?

    Thank you with all my heart,

    Ioan

  472. Hey Kris,

    You are a thesis Star. Never mind. I just went to the full width framework and it works.

    πŸ™‚

    Thank you, Thank you, Thank you, Thank you, Thank you, Thank you, πŸ™‚

    i

  474. Ioan — What browser do you see a white stripe with? I’m looking in Chrome and it’s fine. It could be that there was too little content on the page and the footer isn’t actually reaching the bottom of the browser… when there’s more content on the page the footer will get pushed down to the bottom. If there’s some pages that are going to be very short and you’re concerned about that I can give you a couple of ideas for fixing it.

  475. Kris
    Thank you so much. I think I can work with it as is. Indeed I tested with a long post in production and it works.
    Thanks for your insight, it is true.

    Sometimes (quite often) we need a fresh eye from outside of our mindset.

    Have a beautiful day,

    Ioan

  476. Hi,
    Thanks again for a easy solution to one of my problems! I have one issue though that I do not understand. When implementing the code you suggest it works fine on pages where the content expands the full height of the browser window. But on pages where i have only a few lines of content I get a part underneath the footer that shows. Cant figure out how to adress this. Do ou have any tips?

    Here is what happens: http://www.addictologiakademiet.no/wordpress
    (you might pick up a few norwegian words as well, for whatever that would do you good:))

    Thanks
    T

  477. Terje — It’s the same thing as comment 474. Footers don’t automatically migrate to the bottom of the browser if the page isn’t tall enough. You can either make the whole page’s background the colour of the footer and cover up the other sections with their background colours, or add HTML and CSS for a sticky footer.

    The CSS for the first option is:

    body.custom {background:#C3D9D6;}
.custom #header_area, .custom #content_area {background:#fff;}

  479. Thanks so much for this. The widgetized footer is really wonderful. It is unbelievable that this is not native to Thesis!

  487. Anandy — I’ve given you everything you need over the last few comments. The paragraph tag replaces the opening paragraph tag in the code from the user manual…
    I very rarely give a complete answer in my comment replies, but rather point people towards the information in the hope that they might better understand what it is that they are doing and which part of the code is doing what. I hope you can appreciate this intention. If you still don’t understand where the code goes, let me know.

  492. Hi Krista,
    has the emergence of Thesis 1.82 affected any of the code presented here? In June, I successfully used the code in comment 151 and the custom.css at the end of your article on a site built on Thesis 1.8. Now I am building three sites with Thesis 1.82, using the exact same code, and all three sites just show the default widget message in the footer area. The Footer area shows up and functions just fine on the widget page. All sites are full-width pages.
    All help is much appreciated! Many thanks.

  493. Kevin — No, the code should work fine. The default widget will show until you put widgets in there. You need to make sure that you’re using the correct sidebar ID in the default widget code, or you can add an ID and use that instead to make sure it’s correct. I.e.,

    register_sidebars(1,
    array(
        'name' => 'Footer',
        'id' => 'footer-widgets',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);
function custom_footer() { ?>
	<div id="footer_1" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget('footer-widgets'); ?>
		</ul>
	</div>
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');

  494. Krista, well … that worked – but on only one of the three sites! On the other two the “default widget” box still shows up, except that the message now says “This is Sidebar 0” instead of “This is Sidebar 3”. So now I am really perplexed. I built all three sites concurrently and exactly the same way. All three have the exact same coding in both custom_functions.php and custom.css files. The one that did work did so only after pasting directly from your response above (which did not work on the others, of course). All have widgets in the active footer widget area on the widget page. Perhaps the sidebar ID is indeed the issue – could you please expand on your “You need to make sure that you’re using the correct sidebar ID in the default widget code” suggestion? I do not know how to do that. Many thanks again!

  495. Kevin — Yes, it will say 0 because the Thesis Default Widget doesn’t detect the alpha-ID. If you don’t want default widgets to display at all you can deselect the option in the Sidebar display options in the Thesis Design Options.

    I’m not really sure what your issue actually is… are widgets not working? The normal behaviour for this is that the default widget will show until you put widgets into the area in the dashboard, or turn them off in the options…

  496. Krista, I am not sure what is happening – it is like the widgets are not sticking. When I went to the widgets page for both remaining sites today, all the widgets that I had added to the footer yesterday were gone. I added them again after unchecking the default widget display option, and now one works and the other still does not (see new URL given). Unfortunately, the most important site is the one where it is not working. any other ideas? Many thanks once again!

  498. Hi Krista- This is an amazing post and I have tried to read through most of the comments! I am using the code from the Thesis Theme User’s Guide to create the 3 column widgetized footer and that is working great – I just can’t figure out how to get it to ONLY show up on my home page. I tried using the Widget Context plugin- but of course, I still get a widget on all of my additional pages (it is just the default widget). Is there a line of code I need to add to have it only show up on the home page?

    Am I biting off more than I can chew??

    Thanks-
    Julie

  499. Hi Krista,

    Great work with the codes, it worked like a charm. I do have one question though, I am trying to remove the “Tag” & “Blog Roll” widget out of my footer. What is it that I need to delete in order to do that? Thanks in advance!

    -Ronald

  501. Ronald — Delete this part from the code:

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

  503. nyc sharing…. i am going to implement it too on my website…..thanxx for sharing again!!!!….. lovd ur blog….hope u dont mind if i copy some of the text with your name πŸ™‚

  509. Hi, thanks for what you do! You are one of my favorites for this newbie. Dove into my new site and worked on a lot of basic issues. Used your code for full headers and full footers and ended up with the the nav bar in its own spot and some nice colors behind header and footer.

    But, when I got on my desktop this am, the colors were gone. Hmmm… this is weird. Have no idea where to start to fix this or figure out what happened.

    The last thing I did last night was install the Google Analytics code. The colors still show on my sleeping laptop. Afraid to refresh!

    How to start to figure this out?

  511. I built a widgetized footer. It allows me to add widgets from the dashboard just fine, but I have no idea what hook or filter will allow me to add custom php into the widgets.

    “thesis_hook_before_footer” doesn’t actually get me inside the widget.

    • Caleb — How/where do you mean? Generally it’s an either/or situation: you can manage your widgets via the dashboard, in which case you are pretty much stuck with the format and contents that those widgets put out, or you can do it all manually with PHP.

      If you want to use PHP inside a widget like you would add text to a text widget there are plugins you can get to provide such a widget.

      If you want to add something to every widget in that sidebar you can probably do so by modifying the register_sidebar function.

  512. I’m hoping it’s not an either/or situation. See my footer here (www.sharedlight.com). The site is unfinished. That email update form in the footer was added using the text widget in the dashboard. I’d prefer to place the code in my custom php file instead, using a hook to place it inside that same space. Below the email updates form, I’d like to add more PHP. Is either possible with hooks?

    If I have no choice but to use text widgets, I’ll do that, but it would sure be easier for my workflow if I could make my edits in the custom PHP file too.

    • Caleb — okay, if it’s a matter of putting stuff from the functions file in just certain widgets you can probably do it one of two ways:
      1. Use shortcodes in text widgets; they don’t get translated in widgets by default, but there is one line of code that enables them, then you write your function in the WordPress shortcode format.
      2. Get a PHP widget plugin and call a function that is in your functions file from the widget.

  513. Nice one. I need to change my thesis theme footer. Yes its true footers links matters in blogging. It is helpful for me to do work easy.

  517. great turorials Kristarella! anyone who has thesis will have to visit your website!

    thank you!

  518. Hey Kristarella,
    Great site! I hope some day i can achieve your level of talent.

    I was hopping to get your thoughts on this problem i’m having. I want to get the footer of this my site to be “sticky” so that it stays at the bottom of the browser no matter what size the user has their browser window. The only method i could get to work was this one. https://gist.github.com/1353253
    The problem i’m having is that im not sure how to get the content box to stretch down with it. (reference picture below)

    I came close with but ended up loosing my background image. Have you any ideas for me?
    **Notes**
    i’m using the following CSS to get my background to display.
    body.custom {background: #282326 url(‘images/bg.jpg’) 100% 0 repeat;}

    Also i have thesis set to full with framwork.

    here’s a pic of my problem.
    http://www.ryansherratt.com/wp......23-AM.png

  519. Ryan — It’s a bit hard to say without checking out your CSS, but I think that method is based on http://ryanfait.com/sticky-footer/ and that site has a width for .wrapper. So, I think if you give .wrapper the same width as .page and then give it a white background it should look like the content stretches down.

  520. Hey Kristeralla,

    Great post! Its actually been helping me a TON.. I integrated the sticky footer, full width footer, and the footer nav menu on my page.

    Now I’m trying to edit the font, centering, and font weight of the footer nav menu.

    For the main menu I am using just .custom .menu { font-weight:bold; }
    I just cant seem to alter the footer menu. any insights would be great πŸ™‚

    Thanks in advance

    Eric

  521. Amazing tutorial, though currently i am not using thesis but looking forward to use it soon. Definitely goona try it then.

  523. Hello KRISTARELLA,

    You have done amazing job in your tutorials. i have used your full width Header code and it worked like a charm.

    Now i am confused about the full width footer. could you please provide me the code how i can use full width footer and can get rid of the existing footer of my site.

    Best Regards.

  525. Eric — I would guess that you need more specific CSS.

    Shari — I’m sorry, I’m not really sure what you mean… I think all the information and code you need is in the post, or in comment 151 as linked to in the post. If there’s a particular part of the post you don’t understand, feel free to ask me specifically about it.

  526. KRISTARELLA,

    Thanks, this was what i needed.

    I truly appreciate your help and i will ping you if i need to know anything πŸ™‚