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

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

Post a Comment

Required fields are marked *

*
*

Follow

Get every new post delivered to your Inbox.