Adding Footer to Non-Footer Theme

peregrinewebmaster · Member · Oct 25, 2014 at 6:41 pm
Copy link

Add topic to favorites
Hello! I’m new to coding and was wondering what the code is to add a footer if your theme does not have a footer widget built-in. I’d like to know how to do this so I can work with a theme that fulfills my other reqs but doesn’t have a footer. Thanks!
thesacredpath · Member · Oct 25, 2014 at 7:15 pm
Copy link
Hi there, this isn’t something that can be done cleanly on responsive width themes such as Superhero. Widgets can be moved from the sidebar down into the footer area, but trying to get them to behave for all screen sizes, from a desktop monitor all the way down to a smart phone is very hard.

If you narrow down your browser window while viewing your site, you will see that the sidebar will move down below the content. This happens at 768px and narrower, which is the screen width of an iPad in portrait orientation. We could force the sidebar to stay down below the content and make the content full-width so that the widgets are always below the content.

To actually create a footer widget area would require modifying the theme php script files, and that is not something we can do here at WordPress.com. It can be done, if you have some php experience, on self-hosted WordPress sites using the software from WordPress.org.
peregrinewebmaster · Member · Oct 27, 2014 at 2:41 pm
Copy link
Ok thanks! It is possible to just add script to the footer, correct?
thesacredpath · Member · Oct 27, 2014 at 2:55 pm
Copy link
It would depend on what you are talking about when you say script. Javascript and PHP cannot be added here at WordPress.com and there are restrictions on what HTML can be used.

A copyright can be added to the footer area, but it cannot contain any code. CSS is a styling document used by the browser to render the HTML elements on a web page and cannot be used to add functionality or HTML/script.
peregrinewebmaster · Member · Oct 27, 2014 at 3:06 pm
Copy link
Ok. Text is a better word than script for what I’m going for. All I really want to do is add some info to the footer – a few lines of contact info and maybe a link.
hallluke · Member · Oct 27, 2014 at 4:42 pm
Copy link
You wouldn’t be able to add a link as that requires changing the markup of the page and CSS can only change the styling. You can add regular text, here’s an example for the Superhero theme (which it sounds like you might be using):
```
.site-info:after {
  content:"This is some extra text!";
  display:inline;
}
```
It should work fine on all devices as it will follow the layouts created by the theme author.
thesacredpath · Member · Oct 27, 2014 at 4:44 pm
Copy link
We can’t add a link, because that would require HTML, and we can’t put HTML into CSS, and doing multiple lines is difficult. What you can do is use a separator between the different contact elements, such as this.
```
.site-info:before {
    content: "Name | Phone | Email";
}
```
Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS and see what you think.
peregrinewebmaster · Member · Oct 27, 2014 at 8:33 pm
Copy link
Thank you!
thesacredpath · Member · Oct 27, 2014 at 10:42 pm
Copy link
You are welcome.

No items found.