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.

(Think call to actions, a phone number or announcing your latest deal.)

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.

Get the Good Stuff

If you're interested in web design or the Genesis Framework, here's where you take the next step in growing your business. I'll be writing about my experiences with these topics.

Sign up for immediate access to the following:

  • Genesis Simple Share Plugin
  • Endless Theme for Genesis
  • Minimalist Theme for Genesis
  • Mobile First Theme for Genesis
  • Quote Graphic PSD

You will also be notified every time I publish on my blog.

Want to get FREE content? Click here to register.