Thesis footers 101

Hey Kristra

Excellent work! Your tutorials are clear and helpful! Keep up the great work. Thanks for sharing your resources and tips. :)

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

Chiming in, thanks for the clear and great write up :)

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!

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.

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.

Great! Thanks so much!

Extremely helpful. I’m very grateful for your posts on the Thesis forums, too.

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.

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.

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.

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.

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.

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

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?

Marry me? :-P

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

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

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

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

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.

Thank you again!

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.

Thank you for this info! I finally got my footer looking nice and cool :-)

Appreciate it!

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!

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.

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!

Also, how to I left-align these?
Sorry for all the posts…

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

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.

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

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.

No, didnt get it. I just put some tags down there for now and moved on. :(

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

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.

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.

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

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


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

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?

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

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.

Thanks
You are awesome, I removed the empty widget and all is good.
Thanks, again

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

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!

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.

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!

Great customization.

If I found this one earlier, I wouldn’t ask… ;)

http://www.kristarella.com/200.....g-for-css/

Thanks, informative presentation.

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?

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.

Is it conflicting with other hooks installed? I copy all and it sill display nothing

Here is the link, hope you can help: http://pastebin.com/m30ba3c1f

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

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

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

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?

Well don’t I look dumb on both…but anyways thank you so much for your help!!!
Greatly appreciated!!!

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!

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.

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.com and I thought it might have additional info…but it’s broken.

Thanks again

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

OK great thanks!! Sorry I didn’t get to #178 on my own :-)

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

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.

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?

Ah, false alarm, I was editing the wrong float tag, all sorted now :-) Thanks once again!

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

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

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!

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?

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

Thanks kristarella for the the codes..!! You are awesome..!

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

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!

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?

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.

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?

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.

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. :P

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

-Nicole

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

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.

Hi Kristarella ,

A bit off topic here but do you know how to make a thesis sticky footer??

Many thanks :)

Thanks :)