Custom Footers

I have noticed a lot of users in the WordPress.com Forums asking how they might change the content of their blog footer section. This is the area that usually contains links to the WordPress home page and the theme designer. Many themes give you the option of adding widgets to the footer area, but none allow you to modify or customise the text in the footer itself. In fact, there isn’t a way to do this directly. However, if you have the CSS upgrade it is usually possible to create a text widget containing the desired footer content, hide the original footer, and then reposition and restyle the widget so it appears the same as the original.

Working through the most popular themes I’ve written the CSS and HTML code needed to display footers styled similarly to the originals but containing the content of the user’s choice. I’ll share them here in the following posts.

If anyone uses a less popular them but is still interested in creating a footer with custom text then please get in touch and I will look in to it in due time. Remember, you will need the paid CSS upgrade for the code to work. Another quick disclaimer: CSS written for one theme is almost certainly not going to work for all or any of the others, apart from that I hope these are helpful.

Edit: make sure you leave the attribution links intact or you are breaking the Terms of Service you have with WordPress.com!

About these ads

34 thoughts on “Custom Footers”

  1. Hi! I would like some help editing Clean Home’s footer. I want there to be a footer, but I don’t want the credits to show in the footer. (I’m still going to credit WP and the theme’s designer by adding a link to WP’s homepage on my sidebar and posting info about what theme I’m using and its designer on my About page.) But I don’t want any text in the footer area. I tried #footer {display:none}, but that got rid of the footer entirely. That’s not what I want. I want the footer, but I want it empty of any text. Is that possible? Thanks so much!

    1. I’ll add it to my to-do list. Check back or subscribe to the RSS feed from the menu bar at the top of the page to find out when I’ve managed to get round to it.

  2. On the Clean Home footer, is there anyway to change the color of the background? I have been able to change various colors of but that is the one area that I cannot get. The color of the background is a aqua blue, I want to change it to white. Thank you.

    1. Your site is using the Enterprise theme, which blog are you using the Clean Home theme on? Have you tried using something like the code below?

      body #footer {background:#fff;}

  3. I am working on a test blog site now: http://skydancetestblog.wordpress.com

    We are thinking about switching our theme on our main blog to Clean Home.

    Our main blog: http://skydancingblog.com

    I was able to take the entire footer out, which is something good. So thank you for info up top.

    I do have one question. The blog owner wants to have the header image link back to our home page. (She also wanted to know if the title can go over the header image (like we have on the vigilant theme that we are using) Is this possible? Any help would be appreciated from all of us Sky Dancers!

    1. Try this code which should reorganise the header on your test blog to appear similar to the styling of the header on your live site:

      #header-image {display:none;}
      #logo {background:url("http://skydancetestblog.files.wordpress.com/2011/01/cropped-clouds1-900-x-718.jpg"); width:900px; height:148px;}
      #logo h1, #logo h2 {padding-left:1em;}
      #logo h1 a, #logo h2 {color:#fff!important;}

  4. Hello Luke, I have tried the code above and it chops off most of the image. The main blog has the Clean Home theme on it now. Can you look at it and see what needs to be adjusted. Thank you.

    Also, I wanted to get the post info: Filed under and tags down on the bottom of the blog post. Is that possible?

    Thank you, JJ

    1. The code I gave you before will work if you change the width setting to be:

      width:900px!important;

      Unfortunately with your theme there is no way to tell between certain parts of your post’s meta information so there is no way to move just the tags and categories links to the bottom of each post. I did give you a couple of tips in your forum query though so make sure you check that out as it might be useful.

  5. I have found a way to center the blog title but need to bring it down some so that it is center all around. Thank you so much for all this help. It is exhausting work, I don’t know how you do it.

  6. Hi Luke,

    Can you look at Vigilance and see how to add a custom footer? I used your “hidden” posting for another commenter here, in the meantime.

    Thanks, and if there is a text widget required, can you give a link or a bit of information on where that div code is added? I don’t see any phps for WordPress.com (designing other blogs on WordPress.org) to add that kind of code, so I may be missing something…

    Thank you. I appreciate it.

    1. CSS is theme specific on WordPress.com so the code given for one theme probably won’t work for any others. It’s also important to note that hiding the attribution links in the footer is against the Terms of Service and could get your site suspended.

      To add the HTML go to Appearance > Widgets from your dashboard and drag a Text Widget into one of your widget areas. Copy the HTML code into the Text Widget content area and click “Save”. Then add any modified CSS declarations in the CSS Stylesheet Editor under Appearance > Edit CSS from your dashboard menu. Make sure “add to the YOUR_THEME_NAME theme’s CSS stylesheet” box is checked and click “Save Stylesheet”. I’ll let you know when I have come up with the code for your theme but feel free to experiment yourself in the meantime. The technique is the same for every theme but the specifics change depending on the code the original theme author used.

  7. Hi Luke,

    I hate to add to your list of requests, but I’ve recently switched to the Vigilance theme and have failed utterly in my attempts to get my single short copyright line centered in the footer. Any assist would be greatly appreciated. Thanks

    My blog is at http://piedtype.com

  8. Hi Luke

    I am trying to eliminate the footer at the bottom of the Photography Theme, I have upgraded to Custom CSS. I used this
    #footer {visibility:hidden;}
    It still says
    Blog at WordPress.com.
    Theme: Photography by The Theme Foundry
    I want to remove all of this.

    Thanks Anna

  9. Hi,

    I’m trying to do something similar on Suburbia theme and nothing works – not even #footer {background:#fff;} or #footer {visibility:hidden;} to hide the current footer. I know I have to keep the site credits but would just like to be able to customise my footer so that it looks a little more professional!

    How to I create a custom footer?

    Thanks,

    1. Using suburbia the footer is a class not an ID so you would use .footer {}
      Please remember not to hide or remove the footer attribution links as it is against the TOS!

  10. hello, hope you may be able to help me – my theme is Parament and the footer keeps popping up and getting in the way of the text all the time. I have the css upgrade but i have never in my life messed around with it. If there is something i can just copy and paste to sort it out i would be eternally grateful! Thanks

    Liz :)

  11. Great tip, thanks. I’ve added ‘last updated date’ to the footer text on manchestercommunitychoir.org.uk (TwentTen). I don’t suppose anyone knows if there’s a shortcut code for the current date, linked in with hitting the publish button?

  12. I’ve tried to create a custom footer in Suburbia; but the only place I can put a small footer is in their Widget areas. Is there any way to put HTML in the actual footer where they have the WordPress.com link and the theme link?
    I can hide this, but cannot put anything else in there.

  13. I’d like to add some text to the footer as well (keeping the attribution links). I’m new to this (though I’ve done a lot of reading and have the idea down), so if you could help with Visual theme, that would be great.

    The website in question is http://www.childlitunjournal.com

    Thank you.

  14. Hi there, I would love to have a costum footer for Eventbrite Multi EVent if you still help with this? Actually I coul go with the footer but want to have it much smaller….
    With a lot of hope, best katharina

  15. Hi.

    I’m new with wordpress, pathetic with CSS editing and attempting to set up my company’s website on my own. I purchased the theme ‘Publisher’ and would like to remove ‘The Publisher Theme’ links on the footer and replace it with a ‘Disclaimer’ link. ‘Blog at WordPress.com’ need not be removed.

    How do I go about doing this?

    Cheers!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s