Jordi Plana

Scenario

WordPress uses the theme defined sidebars as widget containers. In most of the themes you will find that sidebars are located on right/left hand of the post content. Maybe we will want to define sidebars in another position of the theme.

Problem

For example if we want to show the language selector widget in the header area. We should be able to define a custom sidebar in the header of the theme.

Solution

First of all we need to register a new sidebar in functions.php, in the root folder of our theme. We will use the register_sidebar WordPress function to do it. You can copy and paste the following code snippet:

<?php
//We hook our action on widgets_init
add_action('widgets_init','jplana_widgets_init');

function jplana_widgets_init(){
    $args = array(
        'name'          => 'Header Widget Zone',
        'id'            => 'header-widget-zone',
        'description'   => '',
        'before_widget' => '<div class="side-nav header-widget-zone">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>' );
    register_sidebar($args);
}
?>

Now we have registered our new sidebar and we should be able to see it at the backend side. You can find the new sidebar in Appeareance > Widgets. We add and configure all widgets we want to show in that zone.

The next step is to render the new sidebar. We will use the WordPress function dynamic_sidebar. In our example, we open header.php and paste the next code snippet:

<?php if ( ! dynamic_sidebar( 'header-widget-zone' ) ) {} ?>

Now we can see our new sidebar showing the previous configured widgets.

Questions, comments, suggestions?