The footer of your site contains helpful information for your community, such as contact, social media, and translation links. The footer appears at the bottom of every page, making it a great place to have information that needs to be quickly accessible but does not need to be added to the body of every page on your site.
There are several parts to a comprehensive site footer, so use this table of contents to skip to what you need:
- The structure of a site footer
- Create widgets for your site footer
- Create Sub Footer links
- Manage the Site Footer settings
The structure of a site footer
There are two areas in a site footer; the main part of your site footer which contains information such as contact details or social media links, and a sub-footer that includes links to important pages on your site, such as disclaimers and policy statements.
The structure of the site footer will already have been created when we create your site and consists of folders containing OC Footer Widgets and OC Footer Links. The widgets work in conjunction with the footer links to display footer information. Although we have created the folders, you will need to create the widgets and links that provide information.
We will create three folders for you:
- Site Footer: the parent folder for the Footer Widgets and Sub footer Links folders.
- Footer Widgets: a folder for the main part of your footer, which will contain OC Footer Widgets and, where required, OC Footer Link pages.
- Sub Footer Links: a folder for the links you need in your sub footer, which will only contain OC Footer Link pages.
Please ensure you do not delete these folders; we have created them specifically for your site footer.
Create widgets for your site footer
The main part of your site footer is found in the Footer Widgets folder. You can add new content by creating OC Footer Widget and OC Footer Link pages within this folder, but you will need to create a footer widget before creating a list of links to live under your widget.
To create a widget:
- Right-click on your Footer Widgets folder and select Create Page.
- Choose OC Footer Widget as the content type.
- Fill in the necessary fields.
- Publish the page.
What to include on your footer widget
| Field | Function |
| Page name | Completes the unique page URL |
| Page title | The Page title is shown as the title of the widget in the footer |
| Widget Options | |
| Display Link List |
Check this box if you want to show a list of links with your widget. Note: if you check this box but do not add footer links, automated accessibility checkers will likely highlight an error, such as an empty <ul> element.
|
| Show Icons on Link List | Check this box if you want to show icons beside your links |
| Widget Sizing |
These settings determine how many columns are shown for the widget on devices of different sizes. The footer area is divided into a 12-column grid, so you must set a number between 1 and 12 for each device. Use the following as a guide:
Generally, smaller devices need more columns to display the information. Unless you're implementing a widget that needs to expand across the width of all screens, we recommend these settings: Extra Small devices (0 - 479px wide): 12 Small devices (480px - 767px wide): 12 Medium devices (768px - 991px wide): 6 Large devices (992px wide and up): 4 |
| CSS Classes | |
| Widget Class Name | Apply your own CSS classes to style the widget |
| Link List Class Name |
Apply your own CSS classes to style the list of links. Note: Please ensure that you have included all necessary class names in this field. For example, all widgets with footer links that have icons need to have the class name social-media-links to display the icons. |
A frequent question we receive is about the Widget Sizing; you may be wondering how many columns you need to set for each device size. Check out this video for an explanation:
When we build your theme, we will include a general sprite sheet with the following icons:
- RSS
- Google+
- YouTube
- Vimeo
- Flickr
- WordPress
- A generic link icon, which will be displayed if no link icon is selected when creating the OC Footer Link page
Adding new icons is a developer task. If you need to add a new icon, please submit a ticket.
An OC Footer Widget also includes 2 WYSIWYG content areas so that you can add text either above or below the list of links. You can access these from the WYSIWYG Editor dropdown menu.
Adding links to your widget
Each link you want to add to your widget must be created separately. To do this:
- Right-click on the widget to which you want to add a link, then select Create Page.
- Choose OC Footer Link as the content type.
- Fill in the necessary fields.
- Publish your page
Add a widget with no links
You can also use footer widgets to present information by adding content to either WYSIWYG Editor. A common use is to show contact details or an Acknowledgement of Country. To do this, you would create an OC Footer Widget in the Footer Widgets folder, input the text into the WYSIWYG Editor Content Above Link List and Publish your page. If you're creating an Acknowledgement of Country, and you want the text to expand across the width of all devices, make sure you put '12' into the Number of columns field for all devices.
Add translation links to your site footer
Many cities and councils will use a footer widget with footer links to display links to translated versions of their site. You may want to create a link to the translation of each commonly spoken language in your city or council.
To do this, you'll need to add the language code you need to the end of your URL for each footer link. These instructions will take you through the process using Spanish on the Point Russell demo site as an example.
- Start by copying the URL to your homepage into Notepad or another simple text editor. Now, you need to find the language code Google Translate uses for the language you're linking to.
- Go to More > Site Management > your site > Settings > Language. Under Languages to include in picker, you'll see a list of languages you currently have available for selection on your live site. If you need to link to a language not in this list, choose it from the Available languages dropdown menu and select Add.
- Once you've added the language, Save your settings if necessary, then you'll need to copy the Language code so you can add it to the homepage URL. For this example, the Language code is "es" to represent Spanish.
- Go back to the homepage URL you copied earlier, and add the following string to the end: "?oc_lang=[language code]". For this example, the URL will look like this: https://pointrussell.opencities.com/Home?oc_lang=es
- In the site tree, navigate to the OC Footer Widget containing your translation links and create a new OC Footer Link page below it.
- Copy and paste the complete translated URL into the Add link URL field, and fill out the rest of the necessary page fields.
- Save and Publish your page when you're finished. Repeat these steps for each language link you add.
Make sure you test your language footer links to ensure they're translating your site, and keep in mind that using Google Translate will not always provide completely accurate translations.
Create Sub Footer links
The sub footer holds links that sit below the main part of your footer. It commonly includes links to pages for terms and conditions, privacy policies, site maps, or an A-Z index.
To add a sub footer link:
- Right-click on your Sub Footer Links folder, then select Create Page.
- Choose OC Footer Link as the content type.
- Fill in the necessary fields.
- Publish your page.
What to include on your footer link
| Field | Function |
| Page name | Completes the unique page URL |
| Link title | The title of the link, shown as the link text in the footer |
| Add link URL | Insert a link using the Insert links option. You can either use the Select an internal link icon to navigate to the content page you want to link to or paste the URL into the Link URL field. |
| Select link icon |
Choose one of our pre-made icons to display next to the link. If you want to use a custom icon, you can do it in the site footer settings. If this link is for your sub footer, it doesn't matter what you select here as sub footer links do not show icons. For sub footer links, you can leave this field blank. Note: to use any of our pre-made icons, for links in the 'Share & Connect' widget, for example, please ensure that the class name social-media-links has been inserted into the Link List Class Name field of the parent OC Footer Widget page. |
Manage the Site Footer settings
This task is for users with the following roles: OC Site Manager and OC System Administrator.
You can manage the settings for your site footer from Site Management.
- From the main menu, go to More > Site Management > your site > Settings.
- Select Site Footer.
- Make your changes (see below for more information).
- Save your changes.
| Social media icons |
Add a new icon in the Enter new icon field. You can also delete our preset icons or drag them to change their order in the list. The Site Management settings for the footer will include the following preset icons:
Note: if you're adding a new icon, make sure you have an icon with the same name in your theme. |
| Authors must comment upon publishing? | Select this option to make it mandatory for authors to comment about their changes before publishing the page. |