In this tutorial I will show you how to build a website footer for your WordPress site.
We will be looking at 2 methods how to build a footer. Here’s the sections we will be going through in this tutorial.
- What is a Website Footer
- Creating a Footer using WordPress default Settings – Simple Footer Design
- How to Build a Footer that is Unique
Before we dig into this, however, let me explain what is a footer exactly for websites.
What is a Footer?
A footer is a section located at the very bottom of the website. A typical website is split in 4 sections, being,
- the Header,
- the Main Body Content,
- the Sidebar
- the Footer.
The website footer usually contains the bottom text that shows copyright information and also footer links to the legal pages and contact details.
For SEO benefits, many web masters also put footer links to their most important website pages nowadays.
The footer is usually coded in CSS or HTML, just like the rest of the website, however, for WordPress users, we don’t have to worry about this, because WP makes it super easy to set up footers without needing to know code.
The website footer is important for two main reasons.
- it shows visitors links to more technical and legal information of the website.
- It acts as the closing divider to each website page, thus creating a sense of completeness to each page.
There are various styles of footers you can have on your website, but strictly speaking you only need the most simple footer design because not many visitors scroll down to the very bottom.
The most important thing to include in your footer is the copyright note, footer navigational menu with links to legal pages, and links to your most important content for SEO purposes.
Creating a Footer
I will be showing you 2 ways how to build footers in WordPress.
The first is a simple footer design method that you can set up in 5 minutes.
The second method of creating a WordPress footer is slightly more complicated and will require some more effort, but in the end will give you a more unique website footer.
Simple Footer Design
If you’re going to create a simple Footer design, then you can do this from the WordPress theme settings options. This process is similar to what I explained in my Website Header tutorial.
Log into your WordPress dashboard and go to Appearance > Customize > Layout > Footer.
First adjust for the options available here. Then, go to the other different options under Customize like >Colors to adjust the footer colors, and >Typography to adjust the bottom text style within the footer.
This will edit the very bottom footer section of your site as shown in the picture below.
I call this section, the ‘website copyright footer’, because this section only includes the copyright phrase at the very bottom text of the site.
I suggest that on top of this, you add an extension to the footer. Here you can include footer links to your main pages, and your legal pages, such as Contact Us, T&C, Privacy Policies etc.
These links should be already available through the footer menu we created in the navigation bar tutorial.
In order to add this footer navigation menu you will need to add Footer Widgets.
To add these, go to Customize > Layout > Footer settings.
Here you have the option to add from 0 to 5 Footer Widgets in the Layout of the Footer.
Each footer widget represents a vertical section within your footer (think of them as columns within the footer).
Once you decided how many Footer Widgets you want (between 0 and 5), head over to the Widgets section of the WordPress menu.
Go to Customize > Widgets > Footer Widget 1
Here you can start choosing and including the items you want in each Footer Widget section. Such as footer links to main pages, footer menu, a quote or statement, an image etc.
Take inspiration from other website footer examples if you’re not sure what to do.
Remember to press PUBLISH every now and again when working on the different Footer elements so that you ensure to save your changes.
As usual colors and typography for the Footer Widgets can be adjusted in the relevant sections under the Customize menu in WordPress.
How to Build a Footer from scratch
The method I showed you in the previous sections will give you a simple footer design but is a bit limited in scope.
If you need, or want your website footer to be more complex and more unique, then you should opt to build it using GenerateBlocks and the Block Elements offered by the Premium version of GeneratePress Theme.
I gave an intro to these here and mentioned that you will need to learn to use them if you want to tailor your pages in a more unique way going forward.
It might be a bit confusing to use these tools on your own when you start off but the more you test them out and watch YouTube videos from their official channel the more you’ll get the hang of it and realize how simple they are to use.
To help you start off, however just follow my step-by-step guides within these tutorials. You will be able to create a very good looking site, similar to mine, even if you have never used the tools before.
Creating the Website Footer using GeneratePress Elements and GenerateBlocks
Where do you find the GeneratePress Elements on your WordPress Dashboard?
You can find this option in the WP Menu under Appearance. (assuming you have activated the settings as I showed you when installing the GeneratePress plugin.
If not, then head to Appearance > GeneratePress and activate all modules, except for Woo commerce.
Once activated, go to Appearance > Elements > Add New Element
The most important element, which you will use most often are Blocks. So, in the Choose element type option, choose ‘Block’ and press on the CREATE button.
Now go to the right side-bar and click on the drop down arrow under element type.
In Element type drop-down list, choose SITE FOOTER, which is one of the pre-made Elements.
Note: When you create a Block, the default element type is set to Hook. and in the right hand side bar you’ll see that the Element type would be pre-set to ‘Hook’.
If we didn’t have the pre-made elements, as in the case of Site-Footer, the next step would be to instruct the plugin where we want this new block to appear, or to be hooked, in our website. Meaning, is this block going to be a Header, a Footer, an Author Box etc.
For this, we go to the right side-bar and select from the Hook Name drop-down options. This guide shows you where each of the different Hook names will appear on your website page or post.
Remember: For more popular elements, such as Headers and Footers, you can go straight to the Element Type drop-down list and choose from there instead of choosing the Hook Name separately.
In fact, if you choose a pre-defined element type you will notice that the option to choose ‘Hook Name’ disappears.
Let’s start by putting in the name of the Element in the Title section. I’ll call it ‘Footer Template’.
This titles we give to elements do not show up on the website. The title is used for our own internal referencing purposes, to identify the different elements we create within the WordPress dashboard.
To design our Footer we will choose one of the footer templates that is closest to what we want and Customize it to our needs.
Click on the TEMPLATES arrow (right side-bar) and choose between Full Footer 1 and Full Footer 2.
Click on both of them so you can view them better on your screen. Once you decide which one you want, just remove the one you don’t need by clicking on the container block and pressing the ellipses (the three vertical stacked dots).
This will give you various options, the last one of which is ‘Remove Container’. Click this to remove the Footer you don’t need.
Now we will edit this footer container to our liking using the four available GenerateBlocks blocks, i.e. Container, Headline, Button and Grid.
Press on List View mode to see the GenerateBlocks items that are already included in the Footer template you chose.
Editing with the List View open makes it easier to select the exact element you want to tweak or adjust.
When you’re starting out, the best way to familiarize yourself with each block is to select each block from the list, starting at the top. Then go to the right side-bar and experiment with the settings available for each block.
Play around to see what each setting does. Remember also that you can have different settings for Desktop, Mobile and Tablet.
Tip: Before you start experimenting with the settings for Blocks it will be advisable to watch a few YouTube videos from GeneratePress official channel to give you an understanding of how to navigate this process.
Whatever you click in this List View will highlight the section it relates to in the main page.
Start by clicking on the main Container in the List View to select it and amend it to your Brand Colors. (You should find your Brand Colors saved also in the right side-bar).
When clicking on each block in the List View, or within the main content screen, you get a pop-up with an ellipsis (the 3 vertical stacked dots).
By clicking on the ellipses, you get further options, to delete a block and to add new blocks.
Delete the ones you don’t need and add new ones you want to create within your Footer.
Experiment and have fun with this until you get used to it. Remember to test with different spacing options, ie. Paddings and Margins.
Continue updating the footer to your needs, including the Copyright text, Footer Navigation Menu, and links to Main Pages or Guides. (GenerateBlocks allows you to duplicate a block elements which is a fantastic time saving feature when creating similar items)
If you’re building an Affiliate site the footer is a good place to insert your affiliate disclaimer notice. For Amazon, the current disclaimer text is: As an Amazon Associate, I earn from qualifying purchases.
As mentioned previously, take inspirations from website footer examples of other websites you admire.
Set Display Logic for Footer Element
To ensure that this Footer will show across all our website we now need to set the Display Logic.
Scroll down to the Display Rules section in the Footer Element page you are creating and in the Location section choose ENTIRE SITE from the drop-down list.
Website Footer Done. What Next?
Now that the website Header and Footer are ready let’s fill in the middle part of the Home Page. This is one of the most critical pages on our website, so it will take some effort. But don’t worry, as usualy I will show you a step-by-step process that anyone can follow.
Ready to build your Homepage content and design?
For a full list of WordPress tutorial, please click here.
