We assume here that you are building your first WordPress theme and that you want to include some Widgets area. The maind advantage is that you can easily change the appearance of your site by playing with widgets and widgets areas.

The principle is quite simple.

  1. We declare the widget areas and then we init them.
  2. We create the place holders in your theme.
  3. In your appearance admin panel you drag and drop the widgets.

And you’re done.

Declare the widgets areas in your theme

This is done through the functions.php file (a mandatory file if you create a WP theme.

I’m going to declare here 4 areas that I will use in the footer of my website. I will then use footer.php to display theme. (It is of good practice to split your theme into (header.php, index.php and footer.php).

For convenience I will create a function that creates the areas and then I will register it to the WP core engine.

function my_widget_areas() {
 //call to register footer sidebar widgets
    register_sidebar( array(
            'id'			=> 'my_footer1',
            'name' 			=>  __('First 1/4 footer column', 'mythemeentityname'),
            'description' => __(' footer's left side widget area (1/4 column)', 'mythemeentityname'),
            'before_widget' => '<br />
<div class="small-3 columns" id="%1$s" class="fwidget %2$s">',
            'after_widget' 	=> '</div>
<p>',
            'before_title' 	=> '<br />
<h3 class="widget-title">',
            'after_title' 	=> '</h3>
<p>',
    )); //end footer widget

     //call to register footer sidebar widgets
    register_sidebar( array(
            'id'            => 'my_footer2',
            'name'          => 'My Footer col 2',
            'before_widget' => '<br />
<div class="small-3 columns" id="%1$s" class="fwidget %2$s">',
            'after_widget'  => '</div>
<p>',
            'before_title'  => '<br />
<h3 class="widget-title">',
            'after_title'   => '</h3>
<p>',
    )); //end footer widget


//....and so on...


}

// and then we register the function which will be executed in the 
// widgets_init phase of wp core
add_action( 'widgets_init' , 'my_widget_areas' );

If you read the code, it’s quite easy to understand (nearly, self explanatory).

Ok we are done now with the functions.php file.

Accept the widgets in your theme.

Now you will have to edit the footer.php files to make the place holders of your declared widgets areas.

Somewhere in your footer you’ll put this

<br />
<div class="row">
                    <?php if(is_active_sidebar('my_footer1'))                              dynamic_sidebar('my_footer1'); ?>
                            
                <?php if(is_active_sidebar('my_footer2')) :                             dynamic_sidebar('my_footer2');                          endif; ?>

<!-- end so on -->
</div>
<p>

Ok, now your declared widgets areas are now hooked to your footer’s theme.

Following the same principles, you can now create widgets areas anywhere on a page of your website.

You’re in the admin now

Well, you’ve already done the hard stuff. Now, if you go to appearance widgets you will see all the area you’ve declared in functions.php. You just have to drag and drop a widget in any of the area and it will appear on your site.

Crafting widgets area is a question of balancing html between your theme’s templates and “before_” “after_” attributes of your widget area.

And that’s it.