Carrie Dils

WordPress Developer, Consultant, and Instructor

How to: Add Widget Area Below Nav

Originally published on by 106 Comments

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

Want more customization tips for your Genesis site?

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

Reader Interactions

Comments

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

  13. 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?

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

    • 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

      Reply

  20. 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…

    Reply

    • 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?

      Reply

      • 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. 🙂

        Reply

  21. 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 😉

    Reply

    • 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

      Reply

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

        Reply

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

    Reply

  23. 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…

    Reply

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

    Reply

  25. 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?

    Reply

      • 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?

        Reply

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

    Reply

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

    Reply

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

        Reply

  34. 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:)

    Reply

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

    Reply

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

      Reply

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

        Reply

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

    Reply

  40. 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?

    Reply

  41. Hey Carrie thanks for this great tutorial! I’m trying to show the banner on my ‘services’ page and on any pages which are a child of this page. Is this possible to do?

    Reply

      • Doesnt seem to be working for me, I’ve tried both of these:

        // If it’s the About page, display CTA #1
        elseif ( is_page( ‘about’ ) || ‘about’ == $post->post_parent ) {
        genesis_widget_area( ‘cta-1’, array(
        ‘before’ => ‘cta1’,
        ‘after’ => ”,
        ) );
        }

        // If it’s the About page, display CTA #1
        elseif ( is_page( ‘about’ ) || ‘618’ == $post->post_parent ) {
        genesis_widget_area( ‘cta-1’, array(
        ‘before’ => ‘cta1’,
        ‘after’ => ”,
        ) );
        }

        Any ideas?

        Reply

  42. Hi Carrie,

    I want to add a widget at the top of the page so I can add a custom menu. How do I change the WHEN statements so it shows on all pages?

    Thanks,
    Beth

    Reply

      • Hi Carrie,

        Thank you very much. That worked great.

        I have another question. I created the widget area so I could put a custom menu in it. The menu works, but is vertical instead of horizontal. I don’t see a place to include a class on the menu. How can I fix this?

        Thanks,
        Beth

        Reply

  43. Hi Carrie! Thanks so much for this info. I’m still a noob but is there any reason this wouldn’t work in the Genesis Sample Theme? I’m trying it on a local version of my site I’m building, but can’t seem to get it to work. The registered widget shows up in the backend, but not on the website.

    Reply

    • Hey Scott – it’s probably a matter of the conditional statements not triggering. As a test, remove all the conditionals and see if things you’ve put in those widget areas appear. If so, then it’s a matter of just getting the right conditionals in place. You can use the Query Monitor plugin to see some of the conditionals that apply to any given page.

      If conditionals are new to you, check this article for more info.

      Reply

  44. Carrie, I have tried to use the recommendations from this post but for some reason — no success. What I need to learn is how to place a widget at the bottom of a page of my choice — preferably home page so that I can place a sign up form there. I use Parallax Pro, but home page is set up as a static page. Would you help?

    Reply

  45. Thank you very much, Carrie. This is awesome useful and I’ve clipped it to Evernote for future reference. However, could you please do a tutorial just like this one specific to submenu? I’m wanting to learn how to add a secondary menu below the main nav, which conditionally will only show on the About page, with menu links to navigate the page.

    This page has a perfect example of what I’m looking to achieve. http://www.opentable.com/about/ Notice how scrolling up fixes the red menu bar at top for easy navigation of page content. This disappears in mobile, though, since mobile allows for quick scrolling.

    Thanks.

    Reply

  46. Thank you for this information! Almost all the good tutorials for genesis force me to buy their themes to read them! I want to make my own theme, that’s why I bought genesis in the first place! Anyway thanks again!

    Reply

  48. Hi Carrie,
    I am on your Lynda course on the rudiments of Genesis, but while I study, I’ve a task to complete adding a CTA under header as per your tut here. However, while I’ve registered the widget ok I can’t get the hook / conditional coding right to get it to show.

    I need a single CTA to show on all pages and homepage too. My theme is Altitude Pro.

    In Functions I have this:

    /** Register widget areas */

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

    add_action( ‘genesis_after_header’, ‘ap_cta_genesis’ );

    In Genesis Simple Hooks, I have this.

    /**
    * Add CTA widget support for site. If widget not active, don’t display
    *
    */
    function mp_cta_genesis() {

    // if ( is_single() ) {
    return;
    }

    now, I know something is wrong here,! Are there two pieces I need – one to get it to show on frontpage as well as single page / posts?

    Tnx!

    Reply

  49. Thanks Carrie,
    So I just add this then? I am trying various options and can’t see the widget displayed still!

    Thanks! :

    /**
    * Add CTA widget support for site. If widget not active, don’t display
    *
    */
    function mp_cta_genesis() {
    return;
    }

    Reply

  50. The strange this that my cta div is showing below the nav-primary div not directly below the header

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

    function jwd_cta_genesis() {
    genesis_widget_area( ‘cta-1’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );
    }

    Reply

    • Depending on the theme you’re using, there may already be something hooked to `genesis_after_header` that has priority. Try adjusting the priority on your `add_action`.

      add_action( 'genesis_after_header', 'jwd_cta_genesis', 5 );

      Reply

  52. I apologize for blowing up your comment area. I just added my widget to the “genesis_site_description” area instead of “genesis_after_header” area.

    Reply

  53. Hi Carrie this made my head spin. Would you be interested in helping me do this with my site or can you recommend someone who could help me? Kind regards

    Reply

  56. Hey Carrie!!! You are Cooler than polar bears toe nail!!! I know this post is from 2013 but still helping people today… DEFINITELY helped me!!! This is an Awesome blog & I LOVE your writing style. Thanks for being you & doing what you do!

    Reply

  57. Hallo Carrie, I was referred to this post of yours as I would like to put the language flags under the menu. I managed to create one widget based on your instructions. I have added there the Language switcher into the widget. However when I see my site live, there is nothing that has changed. Can you please tell me, what I am doing wrong? I am a complete newbie to WP, so I would be happy, if you could help me. Thank you in advance. Kind regards, Milada

    Reply

      • Hallo Carrie, thank you for your prompt feed-back and willingness to help. I did as you told me, but the problem persists. Actually as I do not know anything about IT, I simply copied this:

        /** Register widget areas */

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

        to the bottom of my function.php
        file.
        I suppose, something is missing there. Could you please help me out?
        Thank you in advance.
        Kind regards,

        Milada

        Reply

  58. Carrie,I came across your post while trying to find a solution for adding a intro section after the header on all my pages. Each section will be different as I want to be able to add the page title and a small description to each section. The styling will be the same for all. You post is the closest I have found so far to what I am trying to achieve. Have you something like this before or could you point me in the right direction.

    Reply

    • Do you have the StudioPress Pro Plus Pack? If so, pick apart the Ambiance theme and see how they’re doing their page headers on the blog. (And check the demo to see if that’s even an approximation of how you’d want things). That might provide some insight.

      If I understand correctly, sounds like you may just need to reposition the post title and post excerpt using Genesis hooks.

      Reply

  59. Hi Carrie, Thank you for this great tutorial! What will I need to add/change to be able to add a background image in jpg with the CTA? As well as aligning the image to the left hand side with the text and CTA button being on the right?
    Slightly confused on how to go about this.

    Reply

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *