Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

How to add Widget Areas to 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:

  1. Registering the Sidebar(s) in the WordPress Theme
  2. Inserting the Sidebars In the WordPress Theme
  3. 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:-

widgets-area

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>

I have wrapped the code in a sub-footer DIV so I can apply additional styles to my footer. In my example, I am using Bootstrap, as you can see I am 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’ you can drag widgets into 🙂

It’s good to share

Join the discussion