How to Register New Widget Areas to Your WordPress Theme

By Lisa Sabin-Wilson

In a WordPress theme, you can create widget areas to use literally anywhere within your theme. The sidebar is the most common place widgets are used, but many people also use widgets in the footer, header, and main content areas of their websites. Sidebars and widgets can appear anywhere you want them to. This example uses the Sidebar template (sidebar.php).

First, you have to define the sidebar in your theme. Therefore, you need to alert WordPress that this theme can handle widgets, also referred to as registering a widget with the WordPress software. To register a widget, you need to add the register_sidebar function to the Theme Functions template (functions.php).

In the functions.php file in the Twenty Thirteen theme (choose Appearance→Editor and then click the theme functions [functions.php] file), the code for registering a widget looks like this:

register_sidebar( array (
'name' => __( ’Primary Widget Area’),
'id' => ‘widget-name’,
'description' => __( ‘The primary widget area’),
'before_widget' => ‘<li id=”%1$s" class="widget-container %2$s”>’,
'after_widget' => “</li>”,
'before_title' => ‘<h3 class=”widget-title”>’,
'after_title' => ‘</h3>’,
) );

This code contains seven arrays. An array is a set of values similar to a query string that tells a function what variables to use. In this case, it tells WordPress how you want your sidebar and its widgets handled and displayed:

  • name: This name is unique to the widget and appears on the Widgets page on the Dashboard; this name is helpful if you register several widgetized areas on your site.

  • id: This is the unique ID given to the widget.

  • description: This is a text description of the widget. The text appears on the Widgets page on the Dashboard.

  • before_widget: This is the HTML markup that gets inserted directly before the widget; it’s helpful for Cascading Style Sheets (CSS) styling purposes.

  • after_widget: This is the HTML markup that gets inserted directly after the widget.

  • before_title: This is the HTML markup that gets inserted directly before the widget title.

  • after_title: This is the HTML markup that gets inserted directly after the widget title.

The preceding code snippet registers a widget — Primary Widget Area — on the WordPress Dashboard. Additionally, the code places the sidebar’s content in an element that has the CSS widget class (and is styled as an unordered list) and puts <h3> tags around the widget’s title. You can insert this code directly below the first opening PHP tag (<?php).

Pressing Enter to add a few extra lines when you enter code can be helpful. The browser ignores the extra empty lines around your code, but they can greatly increase readability.

With that code in your theme functions (functions.php) file, WordPress recognizes that you’ve registered a widget area for your theme and makes the widget area available for you to drag and drop widgets into from the Widgets page on the Dashboard. All that’s left to do now is to call that widget into your sidebar.php file. By doing so, you allow the widgets to appear on your site.