In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file.

So far you've:

• prepared your markup for WordPress
• converted your HTML to PHP and split your file into template files
• edited the stylesheet and uploaded your theme to WordPress
• added a loop to your index file
• added meta tags, the wp_head hook and the site title and description to your header file
• added a navigation menu.

In this tutorial, I'll show you how to register widget areas in your theme and display them in various locations. You'll add a widget area to the header for contact details (or whatever you'd like!) and to the sidebar for sidebar widgets.

What You'll Need

• your code editor of choice
• a browser for testing your work
• a WordPress installation, either local or remote
• If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run.
• If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation.

1. Registering Widgets

To register widget areas, you use the register_sidebar() function. You'll create a function in your functions file to include all of the sidebars you need to register and then you'll activate this via the widgets_init action hook.

Note: although this function includes the word 'sidebar' in its name, that doesn't mean your widget areas should just be in the sidebar - this is a hangover from the early days of WordPress as a blogging platform when widgets were just in the sidebar.

Open your functions.php file, then add the following code before the line at the very end which reads ?>:

function wptutsplus_widgets_init() {

	// In header widget area, located to the right hand side of the header, next to the site title and description. Empty by default.
	register_sidebar( array(
		'name' => 'In Header Widget Area',
		'id' => 'in-header-widget-area',
		'description' => 'A widget area located to the right hand side of the header, next to the site title and description.',
		'before_widget' => '<div class="widget-container %2$s" id="%1$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Sidebar widget area, located in the sidebar. Empty by default.
	register_sidebar( array(
		'name' => 'Sidebar Widget Area',
		'id' => 'sidebar-widget-area',
		'description' => 'The sidebar widget area',
		'before_widget' => '<div class="widget-container %2$s" id="%1$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

}
add_action( 'widgets_init', 'wptutsplus_widgets_init' );
?>

This registers two widget areas: one in the header and one in the sidebar itself. The parameters of register_sidebar() are:

• name - a unique name for the widget area which will be displayed on the Widgets admin screen.
• id - a unique ID for the widget area which you'll use shortly to add your widget area to the correct location in your theme.
• description - a description to display in the Widgets admin screen.
• before_widget - the markup to precede each widget in the widget area. This helps with styling.
• after_widget - the markup to follow each widget area. Make sure you close any elements you opened using the before_widget parameter
• before_title - markup to precede each widget's title - I've added an h3 element with a class which helps with styling.
• after_title - the markup to close any elements you've opened before the widget title.

Now save your functions file.

If you open your site admin, you'll see that you now have access to the Widgets admin page, which has the two widget areas added:

However, any widgets you add here won't display in your theme yet as you still need to add them to your template files.

2. Adding Widget Areas to Your Template Files

First, I'll add the widget area for the header and then the sidebar.

Adding a Widget Area to the Header

Open your header.php file and locate the following code:

<aside class="header widget-area half right" role="complementary">
  <div class="widget-container">
    This will be a widget area in the header - address details (or anything else you like) goes here.
  </div><!-- .widget-container -->
</aside><!-- .half right -->

Replace it with this:

<?php if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
  <aside class="in-header widget-area half right" role="complementary">
    <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
  </aside>
<?php } ?>

Save the file.

Adding the Sidebar Widget Area

Now open your theme's sidebar.php and find this code:

</pre>
<aside class="sidebar widget-area one-third right" role="complementary">
  <div class="widget-container">
    <h3 class="widget-title">A Sidebar Widget</h3>
      This is a sidebar widget - in your WordPress theme you can set these up to display across your site.
  </div><!-- .widget-container -->
  <div class="widget-container">
    <h3 class="widget-title">Another Sidebar Widget</h3>
      A second sidebar widget - maybe you could use a plugin to display a social media feed, or simply list your most recent posts.
  </div><!-- .widget-container -->
</aside>

Replace it with the following:

<?php if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
  <aside class="sidebar widget-area one-third right" role="complementary">
    <?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
  </aside>
<?php } ?>

Finally, save the file.

3. Adding Widgets via the Widgets Admin

The final stage is to add some widgets via the widgets admin screen. I'm going to add two widgets to the header widget area:

• a text widget with contact details
• a search box

And I'll add two widgets to the sidebar:

• the "Recent Posts" widget
• the "Meta" widget

Once I've done that, my "Widgets" admin screen looks like this:

Finally, if I open my site in my browser, I can see the widgets populated in the theme:

Some work is still needed on styling - the search bar is a little wide for example, but the content is there. You now have widget areas in your theme!

Summary

In this tutorial, I showed you how to register widget areas and add them to two places in your theme: the header and the sidebar. You could add widget areas anywhere you like in your theme - they can be very useful for adding content across your pages or posts via widgets.

Examples include:

• a widget area before and after the content, maybe for displaying related posts or social media share buttons or a call to action button
• a widget area before or after the navigation
• widget areas in the footer—you'll add those to this theme in the next tutorial
• widget areas just for one content type—in Part 11 of this tutorial I'll show you how to create a custom archive template and you'll see how different templates for different content types could be combined with multiple widget areas to vary the sidebars in your site.

In the next tutorial, you'll finish off the footer.php file in your theme, adding multiple widget area in a 'fat footer', plus a colophon for copyright information and the wp_footer action hook.

Resources

• The Widgets API
• The register_sidebar() function