Making a widget region from zero in WordPress

7 min. read

If you start off with a blank theme and you don't have any widget areas defined on your template, you will get a message like this when you go to Appearance > Widgets:

The theme you are currently using isn't widget-aware, meaning that it has no sidebars that you are able to change. For information on making your theme widget-aware, please follow these instructions.

This happens when a template doesn't have widget support. It takes only two steps to enable it: define the widget area, and make the call where you want the widget.

Adding one widget area

To define a widget area, for example, a sidebar, we can use the WordPress function register_sidebar() in our functions.php file. For example:


if ( function_exists('register_sidebar') ) {

  register_sidebar( array(
    'name'          => 'Right Sidebar', // This is the title of the sidebar area, appears in your admin panel
    'before_widget' => '<div id="%1$s" class="widget %2$s">', // div that goes before the widget
    'after_widget'  => '</div>',                              // closes the previous div
    'before_title'  => '<h3 class="widget-title">',           // this goes before the widget title
    'after_title'   => '</h3>',                               // this goes after the widget title
  ));
}

Let's see what those are:

  • name: Name of the sidebar (this name is what you see in the admin panel).
  • before_widget: HTML enclosing the widget.
  • after_widget: HTML after the widget.
  • before_title: HTML enclosing the title.
  • after_title: HTML after the title.

This is all you need to enable widget support in your template. Now you have to make the call where you want the widgets to appear.

For this we create a file called sidebar.php in the template and add the following lines:


<!-- sidebar -->
<aside id="sidebar" role="complementary">
  <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Right Sidebar') ) ?>
</aside>
<!-- /sidebar -->

The function dynamic_sidebar() calls the the sidebar we just registered in our functions.php file. We can pass it the name or the id that we used when we registered it, but it's recommended to use the name to increase readability of the code. We didn't define an id for our sidebar neither. In this case, the name of the sidebar is Right Sidebar.

You can add code directly to your sidebar, in the file sidebar.php, or you can add widgets from the widget area in the WordPress dashboard. The widgets that you add in the widget area will always overwrite the ones that you add directly through code.

This is the simplest way to add a widget to your template, but there are many other ways, remember to check the code of other templates and visit the WordPress codex if you have any doubts:

  • dynamic sidebar: to add your widget dynamically.
  • register sidebar: to register a widget area for your template.
  • register sidebars: when you want to have several sidebars or widget areas. However, calling register_sidebar() multiple times to register a number of sidebars is preferable to using register_sidebars() to create a bunch in one go, because it allows you to assign a unique name to each sidebar.
  • is dynamic sidebar: Checks if there are any active widgets in the sidebar. You could use it to show some default content in case there are no widgets.

Adding two widget areas

Let's see an example adding two widget areas. In our functions.php file, we add the code for our two sidebars just as we did for our single sidebar:


// If Dynamic Sidebar Exists
if (function_exists('register_sidebar')) {

  // Define Sidebar Widget Area 1
  register_sidebar(array(
    'name'          => __('Widget Area 1', 'widget1'),
    'description'   => __('Description for this widget-area...', 'widget'),
    'id'            => 'widget-area-1',
    'before_widget' => '<div id="%1$s" class="%2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>'
  ));

  // Define Sidebar Widget Area 2
  register_sidebar(array(
    'name'          => __('Widget Area 2', 'widget2'),
    'description'   => __('Description for this widget-area...', 'widget'),
    'id'            => 'widget-area-2',
    'before_widget' => '<div id="%1$s" class="%2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>'
  ));
}

We added two new variables here:

  • description: A short description, the default is empty.
  • id: Must be all in lowercase, with no spaces.

And then, in our sidebar.php, we add:


<!-- sidebar -->
<aside class="sidebar" role="complementary">

  <div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-1')) ?>
  </div>

  <div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-2')) ?>
  </div>

</aside>
<!-- /sidebar -->

In this example, we used the id and not the name to refer to the widgets. As you see, it's pretty much what we did to add a single widget area.

That's all... now try and add something to your sidebar!

Comments