How To Add Dynamic Widget Areas in the WordPress Footer

How To Add Dynamic Widget Areas in the WordPress Footer

by

Widget section in a WordPress theme allow user to drag and drop scripts in sidebar or footer. In this tutorial, we will see how to add dynamic widget area in the wordpress footer.

Dynamic widget allow user to change wordpress footer scripts dynamically.

In this tuts, we are going to see steps of adding footer widget to a WordPress theme. I have written this script to create four footer widget area to show in wordpress theme.

Step 1.  Register the Widget Areas

 First we will register widget areas for footer. In this example, we are registering four footer widget area.To do so follow given below steps.

  1. Open functions.php file
  2. Copy and paste given below code.
//first footer widget area
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widget Area 1',
'id' => 'footer-widget-area-1',
'description' => 'First footer widget area appear in the footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));

//second footer widget area
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widget Area 2',
'id' => 'footer-widget-area-2',
'description' => 'Second footer widget area appear in the footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));

//third footer widget area
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widget Area 3',
'id' => 'footer-widget-area-3',
'description' => 'Third footer widget area appear in the footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));

//fourth footer widget area
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widget Area 4',
'id' => 'footer-widget-area-4',
'description' => 'Fourth footer widget area appear in the footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));

adding above script will add four widget area to wordpress theme widget section as you can see in given below screenshot.

widget areas registered successfully, now we add widget areas to wordpress theme’s footer.

Step 2. Display the footer widget areas in your theme

 Adding a widget to widget area will not show on website until you add all to theme’s footer.  So, open footer.php file and add given below code to show the footer widget in your theme’s footer.

<div class="widget-row">
                    <div class="footer-widget">
                        <?php
                        if (is_active_sidebar('footer-widget-area-1')) {
                            dynamic_sidebar('footer-widget-area-1');
                        }
                        ?>

                    </div>
                
                 
                    <div class="footer-widget">
                      <?php
                        if (is_active_sidebar('footer-widget-area-2')) {
                            dynamic_sidebar('footer-widget-area-2');
                        }
                        ?>
                    </div>
               
                  <div class="footer-widget">	
                      <?php
                        if (is_active_sidebar('footer-widget-area-3')) {
                            dynamic_sidebar('footer-widget-area-3');
                        }
                        ?>
                    </div>
               		
                 
                    <div class="footer-widget">
                       <?php
                        if (is_active_sidebar('footer-widget-area-4')) {
                            dynamic_sidebar('footer-widget-area-4');
                        }
                        ?>
                    </div>
                </div>

 Step 3. Add the CSS to style Footer Widget Areas

             .widget-row
                    {
                        width:100%;
                    }

                    .footer-widget{
                        float: left;
                        width: 25%;
                    }
               @media only screen and (max-width: 768px) {
              .footer-widget{
                        float: left;
                        width: 100%;
                    }
             }

So, you have learned how to add widget section for footer in WordPress. This is an example of four widget area , but you can customize it easily as per your requirement, If you have any query,please feel free to comment.

Leave a Comment