HOW TO ADD A NEW A WIDGET AREA TO YOUR WORDPRESS THEME

Despite the vast array of choice of themes in WordPress, a discerning webmaster will rarely find one that precisely suits their needs. If you take any established site, I can almost guarantee you that they would have customized it in some way or the other. Widget areas are a particular point of pain. Some themes include too many of them, and others not enough. The needs of different types of websites vary so greatly that it is quite possible you will find an appearance and color combination you really like, but need to add additional widget areas either to the top, the bottom, or the sides. Here’s how to add a new widget area in any WordPress theme.

We’ll take the following steps to do this:

1. Register the widget area;

2. Add widgets to it;

3. Place it where we want.

REGISTERING THE NEW WIDGET AREA

The first step is telling WordPress about our new widget area so that it shows up in the “Widgets” section of the appearance tab on the WordPress dashboard. To do this, we add a few lines to our functions.php file. If you’re interested in abstracting it in such a way that the changes are not destroyed after a theme upgrade, you might want to consider developing a child theme, or creating a separate functions.php plug-in.

Whichever method you choose, add the following lines to the bottom of functions.php:

/* Create a new widget area */

function initialize_widget() {

   register_sidebar( array(
      'name' => 'New Widget Area',
      'id' => 'new_widget_area',
      'before_widget' => '<div>',
      'after_widget' => '</div>',
      'before_title' => '<h2>',
      'after_title' => '</h2>',
   ) );

}
add_action( 'widgets_init', 'initialize_widget' );

What we’re doing is adding a “hook” for the “widgets_init” tag and telling it to call the function “initialize_widget”. In this, we use the “register_sidebar” function to define the various parameters of our new sidebar such as the name, the ID, and the HTML we want to apply before and after the widget. The function above is pretty self explanatory.

ADDING SAMPLE WIDGETS

It seems weird that such a simple line of code would have a profound change on your theme. But if you head over to the “Widgets” section in the appearance menu on the dashboard, you will see that a new area has indeed appeared with the name that we have given namely “New Widget Area” as shown in the screenshot below.

For testing purposes, I’m going to go ahead and add a text widget with a witty comment such as “Test for new widget area”!

PLACING THE AREA IN OUR THEME

Of course so far we’ve just created the widget. We haven’t told WordPress where to place it. Fortunately, this is dropdead easy. Just navigate to the section in your themes HTML where you want this particular area to show up and simply call the “dynamic_sidebar” function like so.

<ul id="sidebar">
<?php dynamic_sidebar( 'new_widget_area' ); ?>
</ul>

As you can see, just call this function with the ID of the new widget we just created and it will insert the HTML automatically. In my example, I went to my theme’s header.php file and placed it right at the top. You can see the results below.

It’s amazing to see how much one can do with just a few tweaks of code. Literally with just two simple snippets, we have added an entirely new widget area to our blog and placed it where we want. Use this powerful technique to customize your themes so that they stand out distinctly from the competition instead of utilizing a boiler plate appearance just like everyone else.