Step One : Adding the “Magic” code to functions.php

You just copy paste the following code in your functions.php file just below the < ?php opening tag.
This wil create us two widget areas. In case you are on modifying a WordPress theme and you already have widget areas defined in the functions.php but need to add more, then is much simpler and I will show you that as well!

This is the code for new widget areas

function new_widgets_init() {
register_sidebar( array(
'name' => 'First Widget Area',
'id' => 'first-widget-area',
'description' => __( 'This Is The First  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>',
) );
register_sidebar( array(
'name' => 'Second Widget Area',
'id' => 'second-widget-area',
'description' => __( 'This Is The Second 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>',
) );
}
// Add the widget areas
add_action( 'init', 'new_widgets_init' );

?>

This is the code to add new widget area if you are just modifying a theme and you already have this defined in the functions.php file. This has to be add after the last array just before the "}" (of course you can rename the 'name' 'id' and 'description' to suit your needs ) Step Two applies here as well!

register_sidebar( array(
'name' => 'Your New Widget Area ',
'id' => 'your-new-widget-area',
'description' => __( 'This Is Your New 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>',
) );

Step Two: Calling the widgets from theme template

Calling your newly made widgetized areas is same as calling other widget areas present in the theme. To call it use the following piece of code. Pay attention that the argument in dynamic_sidebar('argument') in our case “First Widget Area” and “Second Widget Area” must match with the name listed under the 'name' => 'argument' in the widget area array.

< ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('First Widget Area') ) : ?>
< ?php endif; ?>

and / or

< ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Second Widget Area') ) : ?>
< ?php endif; ?>

Where to put the widget calling code?!

Well… this code can be used anywhere in your theme (header, sidebar, footer, even in the main content area in special cases). Here is an example of how it should look like in a theme file.

<div id="first" class="widget-area">
   <ul class="your-class">

         < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('First Widget Area') ) : ?>
          <?php endif; ?>

    </ul>
</div><!-- #first .widget-area -->

How the widget generator code works?

function new_widgets_init() {

Here the magic starts, we define the name of our function called new_widgets_init() and we start to build the function itself.

'name' => ' First Widget Area ',

This part of the Code is responsible for the name of the widget area which is displayed under dashboard -> widgets and also is used to connect the widget array from functions.php with the code that was placed in the theme file (see step Two) this is very important!

'id' => 'first-widget-area',

The id is used to keep track of the numbers of widget areas in a self explanatory way and you can name it however you like, just pay attention to separate words with a single line “–“ otherwise you will have problems when you drag and drop widgets in the specific widget area (it will stick there and you will not be able to drag it out) . Note that the id must be unique for each widget array, if we have duplicate id-s in the widget array list, then the last duplicate id will override the one before and only the duplicate widget area will show up under the dashboard -> widgets.

'description' => __( 'This Is The First  Widget Area' ),

This is simple… I am sure that you already have an idea about what this bit of code does. Yes, this is responsible for the description of the widget area.

'before_widget' => '<li id="%1$s" class="widget-container %2$s">',

This bit of code generates the opening tag "< li >" of the html list displayed on the website. As you can see it gives us an unique id and class to help us customize the widget areas.

'after_widget' => "</li>",

Well… you can guess what this does, is closing our list.

'before_title' => '<h3 class="widget-title">',

Yes this is the opening tag of our title and it has a class so we can easily identify and customize it from the style-sheet.

'after_title' => '</h3>',

And of course as you expected, the closing tag of the title.

add_action( 'init', 'new_widgets_init' );

?>

This is the last bit of code called the action hook which tells WordPress to run our function defined above. Note that the second argument of the action hook is the name of our function new_widgets_init this must be the same which was defined here function new_widgets_init() { .

Finally, I would like to point out that this is only one way to create/add widget areas, if you take a look at different themes and tutorials, you will see that there are other more complex ways to do this, but hopefully I managed to give you an idea about how it works and hope you’ll feel more confident playing with WordPress.

Have Fun!

“Dawn” is a 2011 WordPress theme, designed for RECADESIGN website. Is complex highly customizable theme with lots of custom widgetized areas and multiple page templates with various content layouts depending on page profile. The home page template content section has three widgetized areas giving high flexibility of content display options. The portofolio page template has a primary post area for recent projects using maximum width of the content area and a second list style content area for compact post display. The blog page template uses a normal blog layout. The footer has three widgetized areas showing whatever you like.

“Manto” is a 2011 WordPress theme, designed for small business presentations. Is simple and stylish, customizable and readable. It has an accordion slider with custom links. Four custom areas showing featured images from different category posts, excelent for quick linking to the business features description. Four widgetized areas in the footer for further flexibility. “Manto” uses a compact tabbed system to dispaly content for maximum space save and quick access to desired information.

LIVE PREVIEW

“Kleio” is a 2011 WordPress theme, a freestyle eye-candy. “Kleio’s” purpose is a business product presentation. “Kleio” supports three widgetized areas (one in the sidebar and two in the footer). On the homepage are two post areas: one for product description and one for product features. “Kleio” has two custom menu areas (header and footer).

LIVE PREVIEW  coming soon