Using Footer Widgets

Using footer widgets offers a much larger area than the top bar to put important information about your site. If you jump to the bottom of this page, you will see I have added four footer widgets. You can add up to five.

They will also be displayed at the bottom on mobile devices, freeing up vital space above the menu bar.

Enabling Footer Widgets

customize footerTo display footer widgets on every page, go to the Customizer.

Select Layout > Footer as shown in this image.

Select the number of widgets you want to display.

On this site, I have chosen none, because I am using the top bar instead.

However, as you can see from the second image, you can enable the widgets on a page-by-page basis from within the editor.

footer widgetsThat is why they only appear on this current page. You may decide to only show them on your homepage.

Again, I have used Simple CSS to remove the top bar on this page.

Footer Widget Width

On desktops, the widgets will automatically adjust in width to fit within the allowed space. The more you add, the narrower they will be. You can also only choose the number of widgets, but not which ones.

In practice, I would recommend only using one or two. You also do not have to set a title as I have done. I did that purely to show that they are each separate.

Footer Widget Colours

The background and font colours for the footer widgets are set in the Child theme:

/public_html/wp-content/themes/child/style.css

/* Footer Widgets */
.footer-widgets-container.grid-container {
max-width: 1000px;
}
.footer-widgets-container {
padding-top: 10px;
padding-bottom: 10px;
background-color: #55555e;
color: #ffffff
}
.footer-widgets .widget-title {
color: #ffffff;
}
.footer-widgets {
background-color: #55555e;
}

To change them, simply substitute “color” and “background-color” to suit. You will also need to add some additional code to make the footer copyright bar match:

.site-info {
background-color: #55555e;
color: #ffffff;
}
.site-info a {
color: #ffffff;
}

A good website to go to for choosing colours can be found by going here. You can always put it back to what it is now by copying and pasting the code above into the child theme and deleting the added code for the copyright bar.

Share this content:

Share on Reddit