The Genesis child theme Essence Pro has been designed to eliminate the use of the traditional footer widgets. If you would like to add them to your theme, follow the instructions below:
Add the Footer Widgets Area
In this tutorial I will show you how to add a three-column Footer Widget area to Essence Pro. It will reside below the Footer CTA and before the Site Footer.
If you do not want to modify your functions.php file, you can search for Pluginception in the WordPress plugin repository, install and activate it. Then place this code in there. Otherwise, you will add this to the bottom of your theme’s functions.php file. Then save it.
Click “View Raw” in the bottom corner to be sure you grab the entire code.
| //* Add theme support for 3-column footer widgets | |
| add_theme_support( 'genesis-footer-widgets', 3 ); | |
| //* Reposition Footer Widgets Below the Footer CTA Widgets but Before Site Footer | |
| remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' ); | |
| add_action( 'genesis_before_footer', 'genesis_footer_widget_areas', 25 ); |
Style Your Footer Widgets
Now you need to add the styling to them. Go to Appearance > Customize. Select “Additional CSS.” Add the following code and Publish.
| /* Add Three Column Footer Widgets to Essence Pro Genesis Child Theme | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .footer-cta { | |
| margin-bottom: 40px; | |
| } | |
| .footer-widgets .widget-title { | |
| font-size: 36px; | |
| font-size: 3.6rem; | |
| } | |
| .footer-widgets-1, | |
| .footer-widgets-2 { | |
| width: 31%; | |
| float: left; | |
| } | |
| .footer-widgets-1, | |
| .footer-widgets-2 { | |
| margin-right: 40px; | |
| margin-right: 4rem; | |
| } | |
| .footer-widgets-3 { | |
| float: right; | |
| width: 31%; | |
| } | |
| @media only screen and (max-width: 768px) { | |
| .footer-widgets-1, | |
| .footer-widgets-2, | |
| .footer-widgets-3 { | |
| float: none; | |
| padding: 0 0 15px; | |
| width: 100%; | |
| } | |
| } |
If you are using a caching plugin or have caching enabled on your hosting account, you may need to clear the cache before you can see your changes.
If you would like to me to assist you with adding this to your website, contact me here.
