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 Comments

  1. Posted January 28, 2011 at 23:02 | Permalink | Reply

    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!

    • Posted January 29, 2011 at 03:41 | Permalink | Reply

      Try this code which will hide the text without changing the rest of the layout:

      #footer {visibility:hidden;}

    • Posted February 16, 2011 at 18:26 | Permalink | Reply

      Hi Hallluke,

      I’ve followed your responses in the WordPress CSS Forums, thank your for responding to questions.

      I was wondering if you would add making a custom footer for Wu Wei to your list. I’ve a fix now at http://www.makingwordscount.net but I’d really like it to run across the bottom of page.

  2. Posted January 29, 2011 at 07:18 | Permalink | Reply

    Hello, I’m using the structure layout and the only thing I want to do is change the text in the footer to add a link. Any ideas?

    Thank you!

    • Posted January 30, 2011 at 17:28 | Permalink | Reply

      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.

  3. Posted January 29, 2011 at 07:30 | Permalink | Reply

    It works! Thank you so much! :D

  4. Posted February 1, 2011 at 17:44 | Permalink | Reply

    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.

    • Posted February 1, 2011 at 23:06 | Permalink | Reply

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

  5. Posted February 2, 2011 at 00:58 | Permalink | Reply

    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!

    • Posted February 3, 2011 at 17:11 | Permalink | Reply

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

  6. Posted February 5, 2011 at 04:35 | Permalink | Reply

    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

    • Posted February 5, 2011 at 04:36 | Permalink | Reply

      I forgot to put the blog address: http://skydancingblog.com

    • Posted February 5, 2011 at 15:02 | Permalink | Reply

      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.

  7. Posted February 6, 2011 at 02:55 | Permalink | Reply

    Luke, how can we center the writing on the image?

  8. Posted February 6, 2011 at 14:21 | Permalink | Reply

    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.

  9. Posted February 6, 2011 at 18:00 | Permalink | Reply

    Luke, the blog owner also wants the title in white, and the tag line in the color we have on the site now.

    http://skydancingblog.com

  10. Posted February 11, 2011 at 20:19 | Permalink | Reply

    Hi, what CSS code would I need to add text into my footer on the Structure theme?

    Thanks in advance.

    • Posted February 12, 2011 at 01:09 | Permalink | Reply

      Structure has been placed on my to-do list. Check back for updates. No promises how quickly I’ll get it sorted though!

  11. Posted February 13, 2011 at 05:47 | Permalink | Reply

    Will do Luke. Thanks for the reply!

  12. Posted February 19, 2011 at 18:21 | Permalink | Reply

    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.

    • Posted February 19, 2011 at 21:38 | Permalink | Reply

      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.

  13. Michele Jackson
    Posted March 6, 2011 at 06:56 | Permalink | Reply

    I’m trying to do something similar with the Inuit theme – to add one line of centered linked text to footer. for http://wscanews.org. Thanks for any help you can provide!

  14. Posted August 9, 2011 at 23:22 | Permalink | Reply

    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

  15. Anna T
    Posted December 7, 2011 at 22:37 | Permalink | Reply

    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

  16. Posted April 12, 2012 at 18:37 | Permalink | Reply

    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,

    • Posted May 12, 2012 at 12:06 | Permalink | Reply

      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!

  17. Liz
    Posted September 30, 2012 at 00:24 | Permalink | Reply

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

  18. Posted January 28, 2013 at 10:32 | Permalink | Reply

    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?

  19. Posted March 15, 2013 at 21:33 | Permalink | Reply

    could you give me CSS code for custom footer for Parement theme? thank you!

  20. Posted April 9, 2013 at 08:35 | Permalink | Reply

    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.

  21. AlyaVille
    Posted October 26, 2013 at 23:43 | Permalink | Reply

    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.

  22. Posted December 20, 2013 at 21:29 | Permalink | Reply

    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

  23. Linda Workroom
    Posted August 6, 2014 at 03:22 | Permalink | Reply

    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!

  24. Posted August 22, 2014 at 19:39 | Permalink | Reply

    Any chance you can provide the code for how to do this with the Twenty Thirteen theme?

Post a Comment

Required fields are marked *

*
*

Follow

Get every new post delivered to your Inbox.