WordPress – enhance any theme with footer widgets

WordPress – enhance any theme with footer widgets

I am using a free theme that provides only one widgets area – a sidebar. In its paid version, though, there is also another widget area – footer. The theme displays a copyright message in the footer and provides no method (in the free version) to change or remove it.

Currently, I would like to change the copyright message and add a link to the Privacy Policy page. In the future maybe I will want to put something else. So I could have either hardcoded the text and link into my theme or I could create an extensible solution.

I decided I would add a new widget area in the footer. The contents of it could be configured using WordPress’ Theme Customization feature (Appearance > Customize > Widgets).

Introduction

The task was even simpler than I expected. It is the best idea to first create a child theme instead of directly modifying the original theme. Also please check your theme’s license – if it is GPL, you are free to edit.

Useful links:

Summary:

  1. Copy footer.php from the parent theme to the child theme.
  2. Edit footer.php to remove copyright and include footer’s sub file with widgets area.
  3. Create the footer’s sub file with widgets area that will display the widgets.
  4. Register new widget in fuctions.php.

Warning

Make a full backup of your site before continuing.

The first step is to make a copy of the parent theme’s footer.php file and copy it to the child theme. This can be done using FTP.

Advice

The theme files are located in /private_html/wp-content/themes/ folder on the server.

I edited the footer.php file in my child theme. I removed all contents and loaded an extra file that is responsible just for the widgets. The contents of that file could be inlined, it is only a good practice to split files into functional blocks. I put the widgets in site-info class even though it is not really true, only because that CSS class provides center alignment.

PHP
footer.php

Footer’s sub file

I created the file that was referenced from footer.php in line 5. Its full file name will be:
template-parts/footer/footer-widgets.php. Again, this can be done using FTP.

my child theme
└───template-parts
    ├───footer
    │   └───footer-widgets.php
    │
    ├───style.css
    ├───footer.php
    └───functions.php

I copied its contents from the Twenty Seventeen theme and removed one widget area (it had two footer areas) and cleaned the code a bit. I named my widget area sidebar-footer. This is the result:

PHP
template-parts/footer/footer-widgets.php

Edit functions.php

The last step was registering the new widgets area. I edited functions.php and added at the end (please skip <?php if it’s already there):

PHP
functions.php

Customize widgets

Now it was time for checking if it all worked.

I went to Appearance > Customize > Widgets and found Footer area to be there. I edited it and added Custom HTML widget. I left the Title empty and put the following line to Content:

HTML

Success 🙂

More

You can find more about adding custom sidebars in my other posts:

Leave a Reply

avatar
  Subscribe  
Notify of