Change the Footer Widget Area

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

The default Footer area can be easily modified – see Snippet.

I prefer to add to the default Footer with my own flexible footer widgets using the Footer Widget Area provided by Customizr.

You can add the standard WP Widgets in Appearance>Widgets and slide them across into Footer Widget Area One-Two-Three. For example, the ‘Text’ widget gives most flexibility as it allows any HTML to be added.

You may need to stylise the background color, text color and margin/padding by using:

/* START OF Change the Footer Widget Area */
/* Adjust colors as needed */
.footer-widgets {
background:     none repeat scroll 0 0 #83C0E5;
color:          #5A5A5A !important;
padding-top:    10px ;
/* END OF Change the Footer Widget Area */


And then to center the text in the 3 widget areas:

/* START OF Change the Footer Widget Area */
/* Center the widget text areas */
footer#footer       {
text-align:     center ;

/* Or left-center-right the widget text areas */
#footer_one {
text-align:     left ;
#footer_two {
text-align:     center ;
#footer_three {
text-align:     right ;
/* END OF Change the Footer Widget Area */


Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

Leave a comment

Your email address will not be published. Required fields are marked *

25 thoughts on “Change the Footer Widget Area”