How to Create Custom Widget Area in WordPress theme

Creating a custom widget area.

A WordPress Widget is a small block that performs a specific function. Normally every widget placed in a widgetized area called sidebar. Every theme comes with widget area section.

But its very helpful for you to learn how to create a custom widget area. So you can create your own widget area section anywhere you want or according to your client’s need.

You can also use widget outside the sidebar. Read our article  How To Use Widget Outside The Sidebar .

Let’s start and create a custom widget area.

1. Registering a custom widget area

To registering a widget area add following code in your theme’s functions.php file.

function smallenvelop_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Header Sidebar', 'smallenvelop' ),
        'id' => 'header-sidebar',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h1>',
        'after_title' => '</h1>',
    ) );
}
add_action( 'widgets_init', 'smallenvelop_widgets_init' );

 2. Display Widget Area

To display Widget Area add the following code to a location of your choice in your theme file. Here I am adding this code in my theme’s header.php

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header-sidebar') ) : 
 
endif; ?>

All done, this is how we create new widget area!

To preview newly created Widget Area you can go to Appearance > Widgets. There Must be a Widget area of name “Header Sidebar”.

create custom widget in wordpress smallenvelop

You can register multiple Widget areas using above code.

Just use a different id for each Widget Area.

Add  classes and HTML tags to custom widget area.

If your want to style those widgets which appear in your new custom widget area, just add some HTML or classes as follows:

register_sidebar( array(
'name' => __( 'Main Sidebar', 'bharat' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'bharat' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h5 class="widget-title">',
'after_title' => '</h5>',
) );

In the above code, we have added and HTML tag called ‘aside’ with a class ‘widget’.

We have also wrapped widget title with ‘h5’ with a class ‘widget-title’.

Now you can apply some custom CSS with the help of those classes and markups.

If your don’t want to add codes to your WordPress theme, there are some free plugins which will do these tasks for yours.

  1. Savvii Custom Post Widget Free WordPress Plugin
  2. Custom Sidebars Free WordPress Plugin

I hope this tutorial helps you for registering a new Widget area. If you have any question please feel free to ask in comments.