Are you using any WordPress Footer Widgets? The footer area is normally used by website owners to display their copyright notice. That’s about it. Probably a link to their own website. That is totally a waste of premium web space that is visible in probably all the pages in your website.
Today, the footer area contains two sections – the footer widget area and the footer.
What Can You Put In The Footer Area?
Most first time visitors tend to scroll down all the way to the bottom of a webpage when they arrive. They do this as they scan the entire content of the page before reading. This makes the footer most suitable for:
- Links to pages you must have like Privacy Policy and Terms and Conditions pages.
- A summary of your About Us content.
- A map showing your office location.
- Your business contact information – phone, address and email.
- A footer menu so that the visitor do not have to scroll back up to get to your menus.
- Social media links
- Recent blog posts
- Login/Logout links
How To Use WordPress Footer Widgets In The Footer Area?
The easiest way to utilize your footer area is by using WordPress widgets. Have a look inside your WordPress’ Widgets admin section. It should be inside your WP-Admin > Appearance > Widgets.
However, not all themes have widget areas defined in the footer. As you can see in the above image, there are no sidebars defined for the footer area. Thus, I can’t utilize widgets within my footer area. At least not without modifying the theme.
Let’s do just that. I will modify my theme to incorporate three additional footer area sidebars. I will then be able to add widgets into these sidebars.
Modifying Your Theme To Add Sidebars Into Your WordPress Footer Area
Adding a footer widget area into your theme is not really very difficult. All you need to do is follow the three steps I’m about to show you.
Step 1:
First, we need to define the 3 additional sidebars into the WordPress system. We do this by registering the sidebars into the theme functions. Open up your theme’s function.php file from within the WordPress Theme Editor. Add the following lines into the file.
[code]
register_sidebar( array(
‘name’ => ‘Footer Widget Sidebar 1’,
‘id’ => ‘footer-widget-sidebar-1’,
‘description’ => ‘Left Footer Widget Sidebar’,
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );
register_sidebar( array(
‘name’ => ‘Footer Widget Sidebar 2’,
‘id’ => ‘footer-widget-sidebar-2’,
‘description’ => ‘Center Footer Widget Sidebar’,
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );
register_sidebar( array(
‘name’ => ‘Footer Widget Sidebar 3’,
‘id’ => ‘footer-widget-sidebar-3’,
‘description’ => ‘Right Footer Widget Sidebar’,
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );
[/code]
Step 2:
Now that we’ve defined the sidebars. We need to add the sidebars into its position in the footer. Open up the footer.php file using the WordPress backend file editor mentioned earlier. Add the following lines into the file.
[code]
<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php
if(is_active_sidebar(‘footer-widget-sidebar-1’)){
dynamic_sidebar(‘footer-widget-sidebar-1’);
}
?>
</div>
<div id="footer-sidebar2">
<?php
if(is_active_sidebar(‘footer-widget-sidebar-2’)){
dynamic_sidebar(‘footer-widget-sidebar-2’);
}
?>
</div>
<div id="footer-sidebar3">
<?php
if(is_active_sidebar(‘footer-widget-sidebar-3’)){
dynamic_sidebar(‘footer-widget-sidebar-3’);
}
?>
</div>
</div>
[/code]
Step 3:
Now that we have the sidebars inserted into the theme. We need to dress it up a bit with some CSS styles. Open up the style.css file and add the following lines into it.
[code]
#footer-sidebar {
display:block;
height: 250px;
}
#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}
#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}
#footer-sidebar3 {
float: left;
width: 340px;
}
[/code]
That’s essentially it. Of course, you will have to toy around a little bit with the code and CSS to make it jive with your current theme.
Once you’ve completed all three steps above, have a look at your Widget section. Following is what you should be seeing.
You now have three additional sidebars that you can insert widgets into. Add some widgets into the sidebars. With proper styling your site will be displayed as such (depending on the widgets you’ve inserted into the sidebars):
Themes That Use the WordPress Footer Widgets
If you are not a coder, I don’t recommend that you do the above yourself. You might make a mistake and wouldn’t know how to fix it.
Good news is, you may not need to do any coding at all. Just make sure you use a theme that comes with footer widget sidebars. Have a look at the theme’s demo site. Verify that the theme does indeed have footer widget area for every page.
Here are a few themes that have footer widgets:
Divi by ElegantThemes
Interface by ThemeHorse
ElegantBiz by AmazeWP
Spacious by ThemeGrill
Vantage by SiteOrigin
Twenty Fourteen by WordPress
Don’t want to change your theme and it’s original code? Then your other option is to create a child theme of your current theme. Your child theme will inherit all the functions and features of your current theme. It will also contain all the additional functions and features you’ve added into it.
Learn more about child themes here.
Plugins For WordPress Footer Widgets
So far, we’ve only touched on manipulating your theme to add the footer widget area into your WordPress website. What if you don’t want to touch the theme at all? Isn’t there a plugin that can do this?
Why, of course there are plugins that can do that. Here are three of them:
- Sidebar Widget Manager For WordPress
You can create as many custom sidebars as you need. These custom sidebars can then be set to display the widgets vertically (default behavior) or horizontally.You can also replace an existing theme sidebar with any custome sidebar. The custom sidebars you activate will be instantly available in your Appearance > Widgets area.
- Custom WordPress Sidebar Plugin
You can replace any sidebar/widget area in any WordPress theme. It allows you to manage your custom sidebar replacements in the WordPress Admin area.You don’t have to meddle with any CSS. The plugin detects your themes styles and styles any custom sidebar replacements to match your theme styles.
- Footer Widgets Plugin
Simply go to your Dashboard -> Appearance -> Widgets -> Choose your widgets and drag-and-drop them to your footer sidebar… The plugin will do the rest.Simple is good. 😀
I hope this Weekly WordPress Tip have given you some additional knowledge on WordPress. If you find this post on WordPress Footer Widgets useful, do share it out to your contacts. They may find some golden nuggets in here too.
Have questions on WordPress? Shout it out below.. 😀