Creating New Widget Areas

Many themes are widget-ready, meaning that you can insert widgets into them easily. Widgets allow you to add functionality to your sidebar without having to use code. Some common widget functionalities include displaying recent posts, displaying recent comments, adding a search box for searching content on a site, and adding static text. Even widget-ready themes have their limitations, however. You may find that the theme you chose doesn't have widget-ready areas in all the places you want them. However, you can make your own.

Registering your widget

To add a widget-ready area to the WordPress Dashboard Widget interface, you must first register the widget in your theme's functions.php file by adding the following code:

register_sidebar( array (
'name' => __( 'Widget Name'),
'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>',
) );

Within that code, you see seven different arrays. An array is a set of values that tells WordPress how you would like your widgets handled and displayed:

• name : This name is unique to the widget and is displayed on the Widgets page in the Dashboard. It is helpful if you register several different 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 that gets placed here will display on the Widgets page in the Dashboard.
• before_widget : This is the HTML markup that gets inserted directly before the widget. It is helpful for 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.

You can insert this code directly beneath the first opening PHP tag (<?php). It is sometimes helpful to hit the return key to add a few extra lines when you are adding code. The extra empty lines around your code are ignored by the browser, but can greatly increase readability of the code.

Widgets that have been registered in the WordPress Dashboard are ready to be populated with content. In your site's Dashboard, on the right under the Appearance tab, you will see a page titled Widgets. There, you can now see the new widget area you have just registered.

Displaying new widgets on your site

When a widget-ready area is registered with the WordPress Dashboard, you can display the area somewhere on your site. A very common place for widget-ready areas is in the sidebar.

To add a widget-ready area in your sidebar, pick a location within the sidebar and then locate that area in the HTML, which can vary from theme to theme. Many times, theme authors will create their own sidebar.php file, and you can add this code there. After you find the area in the HTML, add the following code to the template:

<?php dynamic_sidebar('Widget Name'), ?>

This displays the contents of the widget that you previously registered in the admin area.

Simplifying customization with functions

You may find that the simple code doesn't accomplish all the functionality that you need. For example, you may want to style the widget's title separate from the content. One solution is to create a custom PHP function that gives you a few more options. First, open functions.php. To create a function, you insert the following code directly below the opening <?php tag:

function add_new_widget_location( $name ) {
if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar(
$name ) ) : ?>
<div class="widget">
<h4><?php echo $name; ?></h4>
<div class="widget">
<p>This section is widgetized. If you would like to
add content to this section, you may do so by using the Widgets
panel from within your WordPress Admin Dashboard. This Widget
Section is called "<strong><?php echo $name; ?></strong>"</p>
</div>
</div>
<?php endif; ?>
<?php
}

In the function above, the first part checks to see whether a widget is assigned to this area. If so, the widget displays. If not, a message with the name of the widget area displays, which allows users to distinguish the widget area they want to add widgets to. Now if you want to display a widget by using this method, you go to the desired template file and insert the following code where you want the widget to appear:

<?php add_new_widget_location('Widget-Name'), ?>

Exploring common problems

A common problem when creating widget areas is forgetting the admin side. Although people successfully create the widget in the PHP template where they want it, they often fail to make it to the functions.php to register the new widget area as described.

Another common problem is omitting the widget code from the functions.php file. If you're adding widget areas to an existing site, you need to add the widget code to the bottom of the list of widgets in the functions.php file. Failure to do so causes the widget areas to shift their contents. This places your widgets out of order, causing you to have to redo them on the Widgets page in the WordPress Dashboard.