Register New Widget Areas to Your WordPress Theme
Most WordPress themes are coded with widgetized sidebars, which means that you can use the widgets within WordPress to populate your sidebar area with content, navigation menus, and lists. Here's how to register new widget areas and then add those widget areas to your template file to enable you to use WordPress widgets on your site.
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 Ten 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 that tells WordPress how you want your sidebar and its widgets handled and displayed:
name: This name is unique to the widget and displays on the Widgets page in the Dashboard; it's 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 displays on the Widgets page in 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 — in 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 it from the Widgets page in the Dashboard.
All that's left to do now is to call that widget into your sidebar.php file, which is done in your Dashboard. By doing so, you allow the widgets to display on your site.