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.

Design a simple life.

No Sidebar is a weekly email newsletter that helps you identify the things in life that you can do without. Learn how to eliminate the unnecessary clutter on your website, inside your home and also within your soul.

Free Weekly Newsletter