Creating a Website Footer with OceanWP Theme

Website Footer OceanWP
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 28/12/2023

Creating a Website Footer With OceanWP Theme

This article will walk you through creating a Website Footer with the OceanWP theme. This tutorial is for websites running on the OceanWP theme but may work with other website themes. The term Footer usually refers to the bottom section of a webpage. It can contain elements such as a menu with links to Contact Us or Privacy Policy page or copyright information.

Recommended Reading: Free Privacy Policy Generator

Creating a Website Footer with the OceanWP theme

What is a Footer?

A footer can be located at the bottom of your website. Unless disabled, the footer will appear on all of your WordPress Pages, Posts and Products. A footer is broken into 2 main sections: Footer and Footer Bottom.

Typically a footer consists of 1-4 columns that can include a wide range of Widgets to add functionality to your website.

Making a Website Footer in OceanWP

To begin adding the Widgets for your footer, let’s look at what options are available. I would recommend including the following Widgets on your footer:

  1. A “Useful Link” Menu
  2. Contact Information
  3. Social Media links
  4. Recent Posts – to display your latest blog to the visitor.

Once you know how to add a Widget to a Footer, you can add/replace them to fit your website’s needs. There is a huge range of Widgets to add straight out of the box, and more can be added with additional plugins.

Adding a Widget to a Footer

To add a Widget to your Footer:

  1. Log into your Back Office
  2. In the left-hand side panel, click “Appearance”
  3. Then click “Widgets”

Once you are on the Footer Widget page, you will see horizontal rows referring to locations where these Widgets can be added. Your Widget area may look slightly different to the screenshot below, but they will all operate in much of the same way.

Widgets for a Website Footer OceanWP

Recommended Reading: What is a Widget?

Creating a Custom Footer Menu

Let’s add our useful links to the footer first. Before you attempt this, ensure you have created the pages beforehand. The pages you may want to include here are:

  • Privacy
  • Contact Us
  • About

If you don’t have the pages you need, we would recommend reading Adding a New Page/Post.

Once you have created these pages, you will need to create a custom menu. When creating the menu, name it “Footer menu”, but DO NOT check any boxes in the Menu Settings. 

Recommended Reading: Creating a New Menu

With both your Pages and Footer Menu created, navigate back to the Footer editor in Appearance>Widgets. Now we are going to add a Custom Menu widget, link it with the menu you have created and add it to Footer.

In the middle editor, you will see Footer 1-4. Footer 1 will place the Widget on the far left-hand side of your page, Footer 4 will place it on the far right with 2 and 3 ordering them in between. Once you have decided on your Widgets order, click the “+” symbol to add a block. Search for Custom Menu. You will see the Widget appear.

Now that we have our Custom Menu Widget added, select which menu we would like to add there. Select the Custom Menu drop-down and you will be able to edit the settings.

  • Change the Title to “Useful Links
  • Select the drop-down button on Select Menu and select Footer from the menu options
  • Click the Menu Link Color and set it to white (as our footer is dark)
  • Click the Menu Link Color and set it to blue
  • Increase the font size to 13 (click in the box and type)

These are all the settings you need to change for the menu, click Save.

Adding Contact Information to the Footer

You may also want to add contact information to the website. To do this, click on the “+” symbol on another Footer number and search for the Widget labelled Contact Info.

Here you can add all the information you need about your business. To edit the information, click in the Content box field and add your respective information. Highlight all the text in the Text box and delete the placeholder text. If you see a box that is filled out and you don’t have that feature, i.e. Fax select the text and delete everything in the Icon Class, Title, Content and Link (if there). This will remove the information from your web page.

Once you have filled out all your information, click Save to make any changes.

Adding Social Icons to the Footer

To link social media pages, click the ’+’ symbol where you would like it to appear in your Footer and search for “Social Icons”. Open your social media account on your account home page, copy the link to your page before pasting it in the respective box and click Save.

It’s important to check the link works in Private/Incognito mode first.

Adding Recent Blog Posts to the Footer

To link blog posts to your Footer, click the ’+’ symbol where you would like it to appear in your Footer and search for “Recent Posts”.

Change the following settings:

  • Title description to “Recent Blog”
  • Number to 1

The rest can remain the same. Click Save and see how your new footer looks on the front end. If you have no blogs written yet, the column will appear blank.

Creating a Footer Bottom

The Footer Bottom bar typically has company information and copyrights. On PODTech’s Bottom Bar, we have “Copyright *the year* – All Rights Reserved PODTech”. This Bottom Bar tutorial is for OceanWP themes but may work with others.

To change your Footer Bottom Bar:

  1. Log into your Back Office
  2. In the left-hand side panel, click “Appearance”
  3. Click “Customise”
  4. This will open the Customiser, click “Footer Bottom”.

Here you’d want to edit the text in the Copyright section. Keep “Copyright [oceanwp_date]”. What this will do is update the sentence in the square bracket to the current year. Next, you can add your company name and any other information you like, such as VAT number, location etc.

Here is an example of PODTech’s Copyright text:

Copyright 2024 – All Rights Reserved PODTech

Web Hosting

From £19.95 /mo