Thesis footers 101

Tuesday, November 25

tagged as , , , , , ,

in Tutorials

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 {border-top:0;}
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.com

Footer on kristarella.com

Adding extra footer content

The way I like to add info to the footer is the same way that it appears in the sidebar. I.e., in a div with the class sidebar, an unordered list with the class sidebar_list and list items with classes widget. That way the lists and text should have the same formatting as the sidebar and fit in nicely with the theme.

Add the following to custom_functions.php.

function custom_footer() { ?>
	<div id="footer_1" class="sidebar">
		<ul class="sidebar_list">
			<li class="widget">
			<h3>About</h3>
				<p>Hello, this is me, and this is my blog. I like blogging, Thesis and teh intawebs.<br/>
<a href="/about/">Read more on my about page</a></p>
			</li>
			<?php thesis_widget_recent_posts('', 'Recent Posts', '6'); ?>
			<li class="widget">
				<?php wp_list_bookmarks('title_before=<h3>&title_after=</h3>&category=2&category_before=&category_after='); ?>
			</li>
			<li class="widget">
			<h3>Tags</h3>
				<?php wp_tag_cloud(''); ?>
			</li>
		</ul>
	</div>
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');

You’ll notice it almost fits with the style, but everything is right-aligned, and the widgets aren’t next to each other. Also, if you’ve got a coloured background the text is a bit light. So, you can add the following to custom.css.

.custom #footer_1 {text-align:left; color:#333;}
	.custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:left;}
		.custom #footer_1 ul.sidebar_list li.widget h3 {color:#222;}
		.custom #footer_1 ul.sidebar_list li.widget a {color:#444; border-bottom:0;}
		.custom #footer_1 ul.sidebar_list li.widget a:hover {color:#111;}
Thesis footer with background and widgets

Thesis footer with background and widgets

That’s about it. You can replace the insides of <li class="widget"> </li> sections with whatever you want in your footer!

I love questions, so ask away!

{ 8 trackbacks }

Full width headers - DIY Themes Forums
Tuesday, November 25 at 14:47
Kontera text links problem - DIY Themes Forums
Tuesday, November 25 at 15:53
Multimedia Box - DIY Themes Forums
Monday, December 1 at 10:24
Making footer widget ready in 1.2 - can't find functions.php code - DIY Themes Forums
Monday, December 1 at 10:24
What's the best widget for adding links and text and code to the sidebar? - DIY Themes Forums
Sunday, December 7 at 07:32
Thesis footers 101 — kristarella.com
Friday, January 2 at 03:58
January 7, 2009
Saturday, May 9 at 10:11
27 Links to help you with Thesis — Serradinho
Friday, June 19 at 06:43

{ 100 comments… read them below or add one }

1 Miguel Wickert Tuesday, November 25 at 14:55

Hey Kristra

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

2 Mat Packer Tuesday, November 25 at 15:06

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 Miguel Wickert Tuesday, November 25 at 15:07

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 kristarella Tuesday, November 25 at 15:45

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.

5 Patch Tuesday, November 25 at 22:01

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

6 Lyndon Wednesday, November 26 at 04:12

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 Jenn Monday, December 8 at 06:54

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 kristarella Monday, December 8 at 08:42

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 Laurel Monday, December 8 at 09:41

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 kristarella Tuesday, December 9 at 13:48

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 John Schuster Wednesday, December 17 at 18:17

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 kristarella Friday, December 19 at 19:36

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.

13 John Schuster Saturday, December 20 at 18:15

Great! Thanks so much!

14 Alex Sunday, January 11 at 20:39

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.

15 kristarella Sunday, January 11 at 22:53

Cheers, Alex and John! Very happy to be of help. :D

16 Steve Wednesday, January 28 at 15:58

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

17 kristarella Wednesday, January 28 at 16:05

Steve — You’re welcome!
The admin link is an option on the Thesis Options page.

18 Steve Thursday, January 29 at 05:13

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 kristarella Thursday, January 29 at 09:15

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 Mitch Sunday, February 1 at 11:33

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 kristarella Sunday, February 1 at 11:45

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 Mitch Sunday, February 1 at 21:39

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.

23 John H. Farr Monday, February 2 at 15:07

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

24 Mary McRae Monday, February 2 at 16:59

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?

25 kristarella Monday, February 2 at 17:11

Cheers Mary. What else would you like a tutorial on? I can try to write one. ;-)

26 Mary McRae Tuesday, February 3 at 02:03

Maybe not so much a tutorial as a guide on how to use the new features feature and the new alternate page?

27 kristarella Tuesday, February 3 at 08:42

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.

28 Mary McRae Tuesday, February 3 at 09:16

Yes – feature box. I’ll look forward to it! Thanks again!

29 JdeG Sunday, February 8 at 03:53

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 kristarella Sunday, February 8 at 15:31

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 JdeG Monday, February 9 at 03:00

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 kristarella Monday, February 9 at 09:52

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 askewmind Wednesday, February 11 at 23:13

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 JdeG Thursday, February 12 at 00:07

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 kristarella Friday, February 13 at 15:56

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 askewmind Friday, February 13 at 21:11

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 kristarella Tuesday, February 17 at 23:25

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 CJ Saturday, February 28 at 08:47

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!

39 kristarella Saturday, February 28 at 10:02

CJ, looks good. I would remove the border-bottom from #footer and give it border-top:0;.

40 CJ Saturday, February 28 at 13:06

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!

41 kristarella Sunday, March 1 at 11:38

Oh okay. CJ, you need something like this code on the forum that uses conditional tags to assign the active classes.

42 rowena Monday, March 9 at 03:28

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 kristarella Monday, March 9 at 08:31

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 rowena Monday, March 9 at 08:35

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 kristarella Monday, March 9 at 09:13

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 rowena Monday, March 9 at 10:04

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 kristarella Monday, March 9 at 12:45

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 Mike Tuesday, March 10 at 23:35

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.

49 kristarella Wednesday, March 11 at 00:10

Mike, use the wp_head hook to insert stuff into the head section of the page.

50 Mike Wednesday, March 11 at 02:58

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

51 Nash Friday, March 20 at 21:32

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 kristarella Saturday, March 21 at 12:25

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 Nash Monday, March 23 at 18:44

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 kristarella Tuesday, March 24 at 11:19

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 Nash Wednesday, March 25 at 19:21

Marry me? :-P

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

56 Nash Wednesday, April 8 at 18:13

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 kristarella Thursday, April 9 at 13:26

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.

58 Harsh Agrawal Friday, April 17 at 17:21

This is really very helpful…

Let me make changes and come back to u. :)

59 Bill Monday, May 4 at 23:24

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 kristarella Tuesday, May 5 at 00:02

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 Bill Tuesday, May 5 at 04:43

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

62 Nicole Wednesday, May 13 at 13:58

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 kristarella Wednesday, May 13 at 14:39

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 Nicole Friday, May 15 at 01:26

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 katahill Friday, May 15 at 06:31

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

66 Bill Monday, May 18 at 14:09

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?

67 kristarella Monday, May 18 at 14:31

Bill — use .custom #footer p {clear:both;}

68 Bill Monday, May 18 at 22:49

Thanks you again Kristarella! That’s perfect!

69 nobugs Tuesday, May 19 at 04:50

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.

70 kristarella Tuesday, May 19 at 10:16

nobugs — I don’t think switching to the full-width framework will effect the things currently on your blog.

71 nobugs Tuesday, May 19 at 15:49

Thank you again!

72 Lisa Wednesday, May 20 at 05:33

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 kristarella Wednesday, May 20 at 10:38

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 Lisa Thursday, May 21 at 03:15

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 kristarella Friday, May 22 at 00:19

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

76 Lisa Friday, May 22 at 05:14

Thanks so much. It worked like a charm!!!

77 Mat Packer Saturday, May 23 at 22:28

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 George Serradinho Wednesday, May 27 at 04:09

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

79 rosenkrieger Tuesday, June 2 at 04:47

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

Appreciate it!

80 Peter Kindness Wednesday, June 3 at 23:12

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 kristarella Wednesday, June 3 at 23:47

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.

82 Yvon Friday, June 12 at 07:56

Thanks alot for your tutorials !

How do I move my navigation outside the page like on http://www.kristarella.com (all the way at the top)?

Cheers !
Yvon

83 kristarella Friday, June 12 at 11:38

Yvon — you need to use the full-width framework. :-)

84 Serge Van Cauwenbergh Sunday, June 14 at 21:06

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 kristarella Monday, June 15 at 01:47

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.

86 Serge Van Cauwenbergh Monday, June 15 at 04:55

Thanks for your response! I use Thesis 1.5.1 and WP 2.8 but I can’t find that option ‘Footer’ from the dropdown menu…

87 Serge Van Cauwenbergh Thursday, June 18 at 04:47

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 kristarella Thursday, June 18 at 10:42

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 Serge Van Cauwenbergh Sunday, June 21 at 00:42

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 Serge Van Cauwenbergh Wednesday, June 24 at 05:45

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 Robyn Goncalves Wednesday, June 24 at 07:40

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 Robyn Goncalves Wednesday, June 24 at 08:47

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

93 Robyn Goncalves Wednesday, June 24 at 10:14

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

94 Karim Friday, June 26 at 14:57

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 kristarella Friday, June 26 at 15:25

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 Karim Friday, June 26 at 23:46

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 Karim Saturday, June 27 at 01:08

(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 kristarella Saturday, June 27 at 18:42

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 K.D Thursday, July 2 at 16:15

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 kristarella Thursday, July 2 at 16:37

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.

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Want to show some code in your comment? Encode it first so that WordPress doesn't strip it away.

Read the comment policy.

Previous post: Cooking with Mat

Next post: Tele tower