How to create a widget area in the WordPress footer

Many premium themes come with fully equipped footer areas. All you have to do in that case is choose widgets you want and drag them into the area. But sometimes, a theme won’t have widgetized footer areas which makes it more difficult for you to place custom content.

For example, you may have installed a free Google Maps Widget which you can easily configure to show your address. If you only had a widgetized footer, you would set up the map and drag the widget into a footer area of choice. After you go through this article and complete these few steps, you will be able to that.

Take a role of a theme developer for few minutes and create yourself a footer widget area. But before you do any changes to your files, please be sure to create a backup of functions.php and footer.php file. Or use a child theme for the custom work.

Register a footer widget area:

  1. Open your functions.php file.
  2. Copy and paste the following code:
  3. 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>',
    ) );
  4. Save changes
  5. Open footer.php file, then copy and paste this code which will show the footer widget:
  6. <div id="footer-sidebar" class="secondary">
    <div id="footer-sidebar1">
    <?php
    if(is_active_sidebar('footer-sidebar-1')){
    dynamic_sidebar('footer-sidebar-1');
    }
    ?>
    </div>
    <div id="footer-sidebar2">
    <?php
    if(is_active_sidebar('footer-sidebar-2')){
    dynamic_sidebar('footer-sidebar-2');
    }
    ?>
    </div>
    <div id="footer-sidebar3">
    <?php
    if(is_active_sidebar('footer-sidebar-3')){
    dynamic_sidebar('footer-sidebar-3');
    }
    ?>
    </div>
    </div>
  7. Save changes
  8. Go to Appearance->Widgets

Here you should find 3 newly created footer areas named Footer Sidebar 1, 2 and 3. Now all you have to do is drag a widget from the left side of the window into one of the footer areas and you’re done.

Style the footer area:

If you have followed previous steps, you have successfully created a widgetized footer area. But as you may notice, it doesn’t look quite nice as you have expected, right? To style your footer area, you will have to edit some CSS code. Here you can do whatever you want, but we will give you a basic code which is a good way to start styling your footer:

  1. Open style.php
  2. Copy and paste this CSS code:
  3. #footer-sidebar {
    display:block;
    height: 250px;
    }
    
    #footer-sidebar1 {
    float: left;
    width: 260px;
    margin-left:10px;
    margin-right:10px;
    }
    
    #footer-sidebar2 {
    float: left;
    width: 260px;
    margin-right:5px;
    }
    
    #footer-sidebar3 {
    float: left;
    width: 260px;
    }
  4. Save changes

That’s it! You are free to add any CSS code you like here and change colors, fonts or any other attributes you want.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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