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?

Quick disclaimer: There are affiliate links included below.

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.

carriedilsheader

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' );

Function Name Explained (You can skip this part)

Just wanted to take a quick moment to explain why I named my custom function mp_cta_genesis. You can name a function whatever the heck you want, but it’s a better idea to follow a format and make it readable. The mp references my theme name (Modern Portfolio), the cta reminds me what that function is related to, and the genesis part tells me I’m writing some Genesis specific code.

That’s not the world’s best explanation (or even the “best” way of doing it), so please chime in with a comment with any better practices or recommendations!

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. 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!

Want more customization tips for your Genesis site?

Here’s a cool one: Create a Utility Bar Above the Header in Genesis.

7 day free trial

Comments

  1. says

    Awesome Carrie!
    I just started working with this theme for a personal blog and am absolutely going to add this in! I’ll share it when it’s done.

  2. says

    Carrie…This has been extraordinarily helpful! Thank you so much for breaking the entire process down for those of us who like to tweak our sites, but are no means developers or professional web designers. Please continue to crank out such amazingly high value posts like this.

  3. says

    Just what I was looking for, sort of. I was looking for a way to get the cta ribbon line the one found on the home page of the Education theme over to interior pages / posts.But your tutorial will do me just fine as an alternative.
    Thanks for writing it in such a laid back easy to understand way. Great stuff!

  4. says

    Hi Carrie,

    First, I’d like to thank you again for the info! I’ve gone ahead and installed Widgets with background on the Genesis/ Balance theme, and it look’s fantastic!

    With this said, I now have a small problem re: how do you align two widgets side by side on one page ex: your About page?

    Been going around in circles here trying to figure it out, and obviously my CSS coding is not up to par on that side!

    Thanks!

  5. says

    At last a relatively easy to follow guide on how to make customisations like this. I’ve been trying to work this out for a few days, piecing together forum posts etc. Not much from Studiopress themselves documentationwise unless I’m missing it. So thanks for this.

  6. says

    Carrie,
    This is an awesome tutorial! This is exactly what I needed for a current project. I just started working with Genesis and will be a regular here to absorb any knowledge you have to offer. I want to start developing free premium genesis child themes.

  7. says

    Great tutorial. I’m not much of a coder so I depend on walk throughs, with explanations as to what each step does. I started seeing the ‘before’ and ‘after’ a while back…what do those mean or why do you use those?

  8. says

    This is great!!! These types of posts are what really allow to you to fully tae advantage of what genesis and wordpress can do.

  9. says

    Two things: 1.) I really like the way your site looks (we’re using the same theme, heh). 2.) I really like the way you styled your sign-up forms both at the footer of the website, and at the top the way you detailed in this tutorial. I think I need to do more of this on my own site!

  10. says

    You are a rock star! I’m in the midst of moving to Modern Portfolio and was trying to work out how to make that About widget show up on all the pages. But this is even better! Durrrr, why didn’t I think of just making a new widget? Brain mush.

  11. says

    Hey nice work! Great article.

    Now, I have one question.

    What happens if I want to place on all posts only? Any idea which part I should be using? Just a CTA on all post.

    Just want to set widget CTA to show on all posts only.

    I am thinking of this (gm for genesis magazine theme).

    Functions.php :

    1.

    /** Register widget areas */

    genesis_register_sidebar( array(
    ‘id’ => ‘cta-1′,
    ‘name’ => __( ‘Call to Action #1′, ‘gm’ ),
    ‘description’ => __( ‘This is the call to action section.’, ‘gm’ ),
    ) );

    2.

    add_action( ‘genesis_after_header’, ‘gm_cta_genesis’ );

    3. How do you add the codes for posts only? I am pretty puzzled here.

    Can you please check of the above is correct and how I can resolved #3 part?

    Sorry! I’m not techie so I hope you got what I mean.

    Reginald

    • says

      Hi Reginald,
      In this post’s example I show multiple conditional statements to determine where the CTA shows up. If you only want the CTA on posts, you’ll want to use the is_single() conditional check within the function that displays your widget.

      Cheers,
      Carrie

  12. says

    Thank you for the tutorial! But where do you have to put the part with the conditions? I’ve put it in functions.php but now the code turns up at my homepage…

    • says

      And by the way, I see ” ‘after_title’ => ‘” in h2 characters at my home page, it seems like wordpress thinks it is html but I’m really sure I’ve put it in functions.php. Does anybody know what I’m doing wrong?

      • says

        Hmmm… sounds like there may be a single or double quote typo somewhere if you’re seeing after_title printed to the page. Yank the code from the tutorial and drop it into a clean text editor first. It should be in functions.php, so you’re on track there. :)

  13. says

    Hi Carrie. First of all you should know this post inspired me to finally sit down and learn Genesis extender – it’s really much easier than I had thought!

    I made a cta widget and plugged in an Aweber snippet and fooled around with some CSS. Affter 7 hours (don’t laugh…I’m still learning) I’m pretty happy with how it looks.

    My problem is that I can’t figure out how to make it responsive. If you have any thoughts, I’d look forward to hearing them!

    http://livingaha.com/4-big-life-ideas-that-everyone-needs-to-know/

    Just under my Header graphic you can see the optin form “enter your email…”

    here is the CSS i used to style it (it’s pretty messy…sorry. i’m very new to CSS/HTML.)

    #af-form-1361379307 { margin: px px 10px 0px;
    max-width: 930px;
    width: 85%;
    overflow: hidden;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px; }

    #af-form-1361379307 .af-body input.text {
    border: 1px solid #619BD1;
    margin-top: .50em; position:relative;
    left:-130px; width: 190px;
    height: 25px;-webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 4px 4px 4px 4px; }

    #af-form-1361379307 .af-element {padding: 0px 0px 10px 0px;
    width: 400px;
    float: left; }

    #af-form-1361379307 .af-clear { display:none; }

    #af-form-1361379307 .buttonContainer {
    margin-top:-42px!important;
    float: right; margin-right: 15px }

    #af-form-1361379307 .buttonContainer input.submit {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    max-width: 220px; }

    Any suggestions are greatly appreciated.
    Thanks Carrie! (Btw, I was a HUGE NcGyver junkie too…from your other post ;)

    • says

      So glad it helped!

      Using Firebug to take a look around at your code and I saw this:


      #af-form-1361379307, #af-form-1361379307 .quirksMode {
      width: 930px;
      }

      That’ll stop you in your tracks as that form block element wants to be that wide even when you reduce your screen size.

      See if you can change that to ‘max-width’ and that should set you down the right path of lettings those elements shift at smaller screen sizes.

      Cheers,
      Carrie

      • says

        You did it again! Thanks Carrie! I switched from using Aweber’s Javascript snippet to their HTML code instead, and voila! “width=930px”…. just like you said!

        max-width=930px was all she needed to hear…..

        Looks like I’ll be a CSS guru in no-time (with your help, of course ;)!

        Keep well Carrie – Thanks again!

  14. says

    Hello Carrie, I tryed following your tutorial and it seems very simple but I’m having trouble adding the action, I know it’s placed in my function.php but it there more to add to get it working? thanks so much

    adding add_action( ‘genesis_after_header’, ‘mp_cta_genesis’ ); to my function.php

  15. Zak says

    Hi Carrie…
    I switched themes to Modern Portfolio so I could follow along exactly with your tutorial. None of the CTA widgets registered. All of the code in your tutorial was pasted into the functions.php file with the exception of the widget styles, which were pasted in the css file. Any ideas? … seems a lot of snippets are not working lately with changes coming down from studiopress…

  16. says

    Hi Carrie,

    Great tutorial. I have a suggestion (picked up this from Wordcamp SF) about using a widget to target the pages. There is a really cool plugin called Restrict Widget that allows you to target which page a widget will appear on. To be clear, the widget area appears based on the targeting, the actual content displays based on which page the widget is assigned.
    You could, if you liked, create just one widget, target it at all pages besides the home page, then use the plugin to target what text displayed on each page.
    Regardless, the tutorial works perfectly.

  17. Jeff says

    Hi Carrie,

    Great tutorial, thank you! I noticed on your site you have a lot more than four unique CTA areas that contain different content (i.e the sub pages under Portfolio). Since content is entered in the widget are you using some other conditional code or are you creating a widget for each page?

      • Eric Kuhn says

        Carrie,
        For some reason it is still not working. The code Brad provided and the one you referenced are similar but still different. I tried to post my gist for the two methods I was trying. Maybe its because a bbpress forum is on the page?

  18. says

    Hi, Carrie….incredible post!
    I would like to ask you how can I do to create the same widget area+hook action but have an image or X design instead of the black background colour.
    Thanks in advanced, I am just starting my way into wordpress and genesis,
    I am not by all means a coder.
    Thanks

  19. says

    hi carrie,

    great tutorial…have been looking for something like this for a while!

    i’m trying to figure out how to use the conditional statements so that if no page has been assigned a widget, the widget area doesn’t appear…can you point me in the right direction?

    thanks!

      • says

        sorry should of explained a little better. i want the widgets to appear on certain pages only, eg contact, landing pages etc. i can do this using your code, but the ‘else’ statement adds the widget area to all other pages which aren’t assigned a specific widget area. i tried having no widgets in ‘cta widget area 4′ but it still added a giant space where the widget area would go on pages which haven’t been assigned a widget area.

        should i just remove the ‘else’ statement at the bottom?

        hope that makes more sense!

  20. says

    Thank you so much for this tutorial!!! I’m new to Genesis and have been trying to figure out how to add a content area below the header that could be different on every page. This is perfect:)

  21. says

    Hello Carrie I’m trying to get this widget to show on the Parallax Pro Theme and help would be great. I folowed your steps but for some reason it’s not showing.Thanks so much

    • says

      You may need to add a priority to the add_action for genesis_after_header function (or hook into a different spot on Parallax). Try adding a priority of 15 on the add_action first.

      • says

        Hello Carrie, I adding all the functions as instructed but the widget does not want to show up for some strange reason. I try genesis_after_header but still nothing.

        I then try genesis_before_content hook but there’s no control over the widget colors or anything for that matter.

        It must be something with the new Parallax Pro Theme that’s stopping it from working.
        Thanks so much for any help with this I was using it with another theme and it work just right.

  22. says

    Hi Carrie,

    I’m using a Morden Portfolio Pro theme now. It actually has an “About” widget area which is the one you’re talking in this post. The problem I have is to style it for email sign up. I use Genesis enews extended plugin, when I drag the plugin into the Home About area, the text is all above the input form and taking all the width. How can I style it like yours? The text is on the left and the imput form is on the right side. Please help me.

    Tony

  23. says

    Hey Carrie, thanks for this awesome tute. This is exactly what I was looking for except for one thing, I’d like there to be two widgets so they stack up nicely (like the 3 footer widgets do) when you get down to skinny mobile browser type screen widths. Currently your (otherwise awesome) solution doesn’t do this, which makes the form go all squishy when the width is reduced. Any chance of a quick tip how this could be achieved?

Trackbacks