How to Add Footer Widgets to Your WordPress Theme
Have you ever wanted to add footer widgets to WordPress?
In this “how to” post I will guide you through setting up a three column footer widget area. Warning, there will be some code but don’t let it scare you, it really isn’t difficult.
Just follow along with each step and copy and paste code as needed. If you have any problems let me know in the comment form below.
Creating a widget area involves three parts:
- Register the widget area with WordPress
- Add code to display the widget area in the footer area
- CSS style to make it look pretty and fit within your theme
First, if you are not using child themes, you need to start now. Any changes you make to your theme will be lost on the next update if you are not using child themes.
Register the widget areas
In your child theme folder, you need to create a “functions.php” file or locate one that already exists.
In the “functions.php” file, we need to add the code that will register the widget areas and let WordPress know they exist. Once a widget area is registered, it shows up in the administrative area and any widget can be added to the area.
The code looks like this:
register_sidebar( array( 'name' => 'Footer Sidebar 1', 'id' => 'footer-sidebar-1', 'description' => 'Appears in the footer area', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );
Explanation:
- Tells WordPress to register the widget area
- The name you want to give to your area, keep it simple and descriptive
- This one says it is Footer Sidebar 1 or the first column in the footer
- ID is for code reference and also should be simple and unique (no spaces)
- Make sure that no other widget area is using this unique id
- Description is for you to differentiate the area from others
- The rest is used for styling purposes
Now we have the first column but we need to add three more. The full code will look like this:
register_sidebar( array( 'name' => 'Footer Sidebar 1', 'id' => 'footer-sidebar-1', 'description' => 'Appears in the footer area', '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 Sidebar 2', 'id' => 'footer-sidebar-2', 'description' => 'Appears in the footer area', '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 Sidebar 3', 'id' => 'footer-sidebar-3', 'description' => 'Appears in the footer area', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );
This will give us three columns of widgetized areas in our footer. Notice that each has a unique id and a name we can identify with.
Show the widgets
Now that WordPress knows there are new widget areas, we need to add some code to the “footer.php” file to make the widget areas show up.
Remember, you should be using child themes. So if you need to, create a “footer.php” file in your child theme folder so the other file doesn’t’ accidentally get over written.
The code that displays the widget areas is much more simple and looks like this:
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
- The if statement finds out if there is anything active within the widget area (in the admin area)
- If there is something active then we will show it
Again, we have three widget area columns so we need to call them all like this:
<?php
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
if(is_active_sidebar('footer-sidebar-2')){
dynamic_sidebar('footer-sidebar-2');
}
if(is_active_sidebar('footer-sidebar-3')){
dynamic_sidebar('footer-sidebar-3');
}
?>
Now the footer widget areas are active and you can add items to the areas. Make sure the widget area names match the “id” you gave them in step one.
Make them look pretty
Now, we need to style them to make then fit within the style of your theme.
Usually, you will want to use a CSS wrapper and then style each individual column like so:
<div id="footer-widget-wrapper">
<div id="footer-widget-content" class="secondary">
<div id="footer-widget-sidebar1">
<?php
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
?>
</div>
<div id="footer-widget-sidebar2">
<?php
if(is_active_sidebar('footer-sidebar-2')){
dynamic_sidebar('footer-sidebar-2');
}
?>
</div>
<div id="footer-widget-sidebar3">
<?php
if(is_active_sidebar('footer-sidebar-3')){
dynamic_sidebar('footer-sidebar-3');
}
?>
</div>
</div>
</div>
As for the styling, we have three parts:
- The wrapper that basically centers the widgets with your theme and constrains it to your theme width (most of the time the footer is within the “main content wrapper” and will not leak out beyond the width of your theme)
- The second <div> is to style the overall look i.e. background color, font color.
- This is to state the width of each individual column and add anything that only pertains to each of the columns
Below is the full CSS code for the widget areas that I use on Digital Layne:
#footer-widget-wrapper {
display: block;
float: left;
width: 100%;
background: #303030;
margin-bottom: 0px;
border-top: 5px solid #1b1b1b;
}
#footer-widget-content {
width: 95%;
margin: auto;
padding-top: 10px;
clear: both;
display: block;
}
#footer-widget-sidebar1 {
float: left;
width: 30%;
padding-right: 3.3%;
}
#footer-widget-sidebar2 {
float: left;
width: 30%;
padding-right: 3.3%;
}
#footer-widget-sidebar3 {
float: left;
width: 30%; padding-right: 3.3%;
}
#footer-widget-content .widget a {
color: #7094c5;
}
#footer-widget-content .widget a:hover {
color: #a5a5a5;
}
#footer-widget-content .widget {
color: #a5a5a5;
font-size: 0.95em;
}
#footer-widget-content .widget-title{
color: #a5a5a5;
font-weight: bold;
font-size: 12pt;
margin-bottom: 10px;
text-transform: uppercase;
}
#footer-widget-content li{
border: 0px solid transparent;
}
@media screen and (max-width: 600px) {
#footer-widget-wrapper {
display: none;
}
}
Since this isn’t a course in CSS, look at the different styles and relate them to the <div> in the code. You can see what each line does to the look of the columns.
Better yet, copy the code, play around with changing the colors and sizes, and see what each one does. This is the best way to learn in my opinion. The styles in this post are specific to the colors and widths of the theme that I am using but they can be tweaked to use on your theme as well.
Also, the last style section that starts with “@media” is used to hide the widgets at 600px for use on smartphones and small tablets.
This may look a bit overwhelming if you are not used to code but it really isn’t that scary. You could copy each section of this code and put it in the appropriate files on your site and it will work. To that end, you can add a few extra lines of code and have a four column footer if you wanted.
Here is a look at the finished product or you could scroll down to the bottom of this page and see it in action.
In a later “How To” I will show you how to set up a simple development environment on your own PC or Mac to test WordPress changes before you implement them on a live site. Further, the development setup is a great way to learn and get familiar with how WordPress works on the inside.
If you have any issues with the code or if you see something I may have left out, let me know in the comment form below.
