How to add Widget Areas to your WordPress Theme

In this tutorial, we will show you how you can create your own widget areas for your WordPress Theme.

WordPress widgets make it easy for users to simply drag and drop elements into their website. There are many WordPress themes and plugins that use widgets to allow users to create their own layouts. We are going to show you how to create your own custom WordPress widget.

You may for example want to create a footer widget area so that you can drag widgets into your footer. By default, WordPress only comes with a Sidebar Widget area so you may need to extend this for different elements of your website. We are going to show you how to create a footer widget for your WordPress Theme.

There are three main parts to introducing a footer widget area in your theme:

• Registering the Sidebar(s) in the WordPress Theme
• Inserting the Sidebars In the WordPress Theme
• Putting some style into the sidebars

Firstly, you need to open up your functions.php file and add the following code:-

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function webtricks_area_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'webtricks_area' ),
		'id'            => 'sidebar-1',
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<p class="widget-title xstrong">',
		'after_title'   => '</p>',
	) );
	register_sidebar(array(
		'name' => 'Footer',
		'before_widget' => '<div id="%1$s" class="col-md-3 widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<p class="footer-title">',
		'after_title' => '</p>',
	));
}
add_action( 'widgets_init', 'webtricks_area_widgets_init' );

This will place the Sidebar Widget and add a Footer Widget into your WordPress Theme by going to Appearance –> Widgets:-

The next step is adding your widget area into your theme, so for this example, you will want to open up your footer.php file and add the following code:-

<div id="sub-footer">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) ?>
</div>

We have wrapped the code in a sub-footer Div so we can apply additional styles to the footer. In our example, we are using Bootstrap, as you can see, we are using col-md-3 which will create a 4 block footer. If you are not using Bootstrap you can just add the following styles:- (otherwise Bootstrap will take care of most of the styling for you)

.col-md-3 {
    width: 23%;
    float: left;
    margin: 1%;
}
@media (max-width: 768px) {
    .col-md-3 {
        width: 100%;
        float: none;
        margin: 0;
    }
}

The above CSS will create a 4 block footer which will float each widget you add side by side. And then for lower screen resolutions and mobiles, it will stack them on top of each other.

You should now have a new Widget Area called ‘Footer’ in which you can drag widgets into now.

We hope this has helped if you need any assistance, feel free to drop us a comment below.