When you code a WordPress theme one of the most important features of your theme will be the Widget Areas. Thanks to this amazing CMS this procedure could not be easier, in just two simple steps you can add as many widget areas as you want. You will have to add the first piece of code to your functions.php file which will register your widget areas and then the second piece of code which will generate the necessary html code of the widget used in that specific widget area. Also I will try to cast a light on which is happening inside the function that creates the widget area.
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!
