Add a Widget Area Before Your Site Header

You may have noticed a number of StudioPress themes that we’ve recently released have a widget area which is located before the site header. Typically these can be used to place advertisements, but some folks have used it to show some sort of welcome message.

The process of adding a widget area before the header of your website is very simple, and in the steps below I’m going to show you how.

Registering the Widget Area

The first step is to register the before header widget area through your functions file. Use the code below to do accomplish that:

Hooking the Widget Area

Now that you have registered the before header widget area, you need to place that onto a hook that resides before the site header markup.

The code below will do that for you:

Styling the Widget Area

Now that you’ve registered your before header widget area and have it hooked in place, you’ll want to add a little CSS to your style sheet to control the elements inside.

Here’s some sample CSS to get you started:

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.