How to: Add Widget Area Below Nav

Hi there, friends! It’s a cool, rainy day here in Central Texas, which means I’m ready to write a new Genesis Framework tutorial. (If it were a sunny day, I’d be frolicking outdoors). Ready to do a little coding together?

I recently redesigned my website using the Modern Portfolio Theme from StudioPress as a starting base. I kept the design pretty true to the original theme, but I did bust out some mad customizations, one of them being the dark bar you see across the top of this page.

What is it? That area is actually just a widget area, which I’ll show you how to add. But the fun part (of course, there’s a fun part!) is making the widget conditionally appear on different pages, allowing me to customize my call to action on a page-by-page basis.

So, today’s mission is: Add a “Call to Action” widget area below the nav (or above the content) and make it show conditionally by post or page.

Create Call to Action Widget Area(s)

The first step is to register a new widget area. Now you could get away with just a single widget area if you want to use the same widget across your entire site.

On my site, I’ve registered four widget areas (one for each unique call to action). You can create however many you’ll need.

If you’re using the Genesis Extender Plugin, you can use that to create your widget areas. Otherwise, you can drop a variation of the following into your functions.php:

Shove Those Widgets Into the Design

We’re about to tell our theme to do two things:

1) Tell it WHERE to put our widget
2) Tell it WHEN to put our widget

The WHERE part is easy – I want to show my Call to Action widget underneath the header on every page. To do that, we want to use a Genesis action hook to execute the custom function that’ll display the widget.

Once again, if you’re using Genesis Extender, you can create an action hook there, or you can drop the following into functions.php:

add_action( 'genesis_after_header', 'mp_cta_genesis' );

There are lots of places you can hook into a Genesis theme. I’m using genesis_after_header to display after the header, but you could conversely use genesis_before_content or any other place in the theme to insert your widget.

Now for the WHEN. Let’s write some code for the function mp_cta_genesis along with a handful of conditional statements to decide when (or on what pages) these widgets will show. I’ll go ahead and post what’s running on my site and then explain it a bit.

A couple of things to note:

• You’ll need to change the WordPress conditional statements to match your own needs. If you’re new to conditionals, here’s a helpful read. Otherwise, here’s a full reference list of available conditional tags.
• I included div tags with CSS styles for marking up the widgets later. (We’ll do that next)

Okay, we’ve created our widget areas and called them into being with an action hook + custom function combo. Next up, is STYLE!

Style Our Widgets

We need to add some CSS styles to determine the look of our widget areas. I want my call to actions styled the same across every page (only the content will be different), so I’m only creating one style for all to share.

I’m posting my CSS here as a reference, but just know yours will be completely different, based on your design.


#cta {
background-color: #222;
color: #fff;
clear: both;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.625;
overflow: hidden;
padding: 64px 0;
padding: 4rem 0;
}

#cta .wrap {
padding: 0 5%;
}

#cta a.cta-button:hover {
color: #222;
}

#cta a:hover {
color: #FFF;
}

Depending on whether you want your widget style to be confined within the site’s width (generally styled as .wrap in a Genesis child theme) or be full-width, you’ll want to play with your CSS a little. I love using the Firebug plugin to take a closer look at my CSS in the browser and see what needs to be added.

Whew

That’s it! This was a quick and dirty post just to explain the basics of the process I used on my site. If you run into issues with whatever Genesis child theme you’re using or have other questions, feel free to leave a comment!