Add a widget area after the header

Nicolas showed you how to add a block of text after the header here. But what if you want to add something more substantial, such as a search bar or a language chooser — something that requires a widget area? Below I show you how to add a widget area after the header instead

Defining the widget area

Here’s what to do:

Add the following code to your functions.php:

// Adds a widget area.
if (function_exists('register_sidebar')) {
	register_sidebar(array(
	'name' => 'Extra Header Widget Area',
	'id' => 'extra-widget-area',
	'description' => 'Extra widget area after the header',
	'before_widget' => '<div class="widget my-extra-widget">',
	'after_widget' => '</div>',
	'before_title' => '<h2>',
	'after_title' => '</h2>'
	));
}

This will set up the widget area and you will be able to see it in Appearance > widgets. (And depending on your setup, you may even find that WordPress has filled it with stuff you need to remove.)

Placing your widget area

But it won’t yet appear on your site — you still need to place it on your page. This is where Customizr’s flexibility comes in, as it has “hooks” throughout the theme, on which you can “hook” your code. Add the following to your functions.php, below the code you pasted above:

// Place the widget area after the header
add_action ('__after_header', 'add_my_widget_area', 10);
function add_my_widget_area() {
  if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Extra Header Widget Area');
  }
}

This places the widget on each page, after the header; substituting the Customizr __after_header function..

To restrict the widget area only to the home page use this instead:

// Place the widget area after the header in home page only
add_action ('__after_header', 'add_my_widget_area', 10);
function add_my_widget_area() {
  if ( tc__f('__is_home') && function_exists('dynamic_sidebar') ) {
    dynamic_sidebar('Extra Header Widget Area');
  }
}

That’s it! Now go to Appearance > Widgets, where you’ll find your widget area, ready to be filled with whatever you want. Drag and drop new widgets into the area and click the dropdowns to delete the widgets you don’t want.

Styling your widget area

You can style the widget area with the new my-extra-widget-area class that you created above, as well as styling the individual items.

For instance, you could add the following to your Custom CSS or to the style.css in you child-theme:

/* Move the extra widget area to the right of the page*/
.my-extra-widget {float: right;}

/* Don't display it on the home page*/
.home .my-extra-widget {display: none;}

Have fun!