• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Carrie Dils

Carrie Dils

WordPress Developer, Consultant, and Instructor

  • About
    • Work with Me
    • Around the Web
    • Media Kit
  • Blog
  • Podcast
  • Web Development Courses
  • Freelancing Courses

How to: Add Widget Area Below Nav

Originally published on April 2, 2013 by Carrie Dils 106 Comments
Last updated on June 12, 2016

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.

Filed Under: Genesis Framework

Avatar for Carrie Dils

About Carrie Dils

I believe you can make a good living doing work that makes you excited to get out of bed every morning.

In addition to this blog, I host a podcast for freelancers, teach business courses at The Fearless Freelancer®, and teach WordPress and Front-end Development courses for Lynda.com and LinkedIN Learning. I'm also writing a book for freelancers.

Reader Interactions

Comments

  1. Avatar for Carrie DilsKelly Brito (@PinkandLola) says

    April 3, 2013 at 6:21 am

    As always, very useful. Thanks for being so terrific! 🙂
    Lots of clients (specially coaching-related business) love the sign up form on top!

    Reply
  2. Avatar for Carrie Dilshowardwater says

    April 3, 2013 at 9:45 am

    Thank you, I can really use this.

    Reply
  3. Avatar for Carrie DilsKim Doyal says

    April 5, 2013 at 12:00 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      April 5, 2013 at 12:03 pm

      I look forward to seeing it! 🙂

      Reply
  4. Avatar for Carrie DilsKevin Donnigan (@anythinggraphic) says

    April 7, 2013 at 8:57 am

    Thank you so much for this! Utilizing the new widget area for an e-commerce site I’m building. I love Genesis and am getting used to everything in it. I appreciate this tutorial 🙂

    Reply
    • Avatar for Carrie DilsCarrie Dils says

      April 7, 2013 at 9:05 am

      Glad to hear it, Kevin!

      Reply
  5. Avatar for Carrie Dilsakismet-daef032fd45a525be3a94e788a202c09 says

    April 8, 2013 at 8:22 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      April 9, 2013 at 5:38 am

      I appreciate the feedback. Glad it’s helpful!

      Reply
  6. Avatar for Carrie DilsSteve Ontiveros says

    April 8, 2013 at 9:50 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      April 9, 2013 at 5:37 am

      Oh, I do love that CTA ribbon on Education. Look forward to seeing your final product!

      Reply
  7. Avatar for Carrie DilsKaren Bugg (@WebMC) says

    April 9, 2013 at 12:10 am

    Really useful article, I’m glad I found it 🙂

    Reply
  8. Avatar for Carrie DilsJérémy says

    April 11, 2013 at 9:56 pm

    Hey Carrie !

    Thanks to you, I finally understand the usefulness of the wrap class.

    Great content, very helpful as usual!

    Reply
  9. Avatar for Carrie DilsJulie says

    April 13, 2013 at 12:32 am

    Looks nice. I’ll try this out 🙂 Thank you !

    Reply
  10. Avatar for Carrie DilsChristiane says

    April 18, 2013 at 4:10 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      April 19, 2013 at 6:18 am

      Hi Christiane,
      You’ll want to use float:left on your “left widget” and float:right on your “right widget” to get them side by side.
      Cheers,
      Carrie

      Reply
      • Avatar for Carrie DilsChristiane says

        April 19, 2013 at 12:01 pm

        Worked like a charm – Tks!

        Reply
      • Avatar for Carrie DilsSteve Olson says

        June 5, 2013 at 10:37 pm

        Carrie,

        Can you explain where you put this in order to align the widgets next to each other?

        Reply
  11. Avatar for Carrie Dilsmobiletechie says

    April 26, 2013 at 9:28 am

    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. Avatar for Carrie Dilsjirishus says

    April 29, 2013 at 12:25 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      April 29, 2013 at 12:46 pm

      Thanks! Here’s a Genesis resource guide compiled by Kim Doyal that you may find helpful, too: http://thewpchick.com/studiopress-genesis-resources-guide-free-download/

      🙂

      Reply
  13. Avatar for Carrie DilsBill says

    April 30, 2013 at 4:28 am

    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. Avatar for Carrie DilsSteve Olson says

    May 1, 2013 at 10:30 pm

    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. Avatar for Carrie DilsRicardo Bueno says

    May 9, 2013 at 11:38 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      May 11, 2013 at 6:02 am

      Hey Ricardo! You know I’m available for hire. 😉 Hit me up.

      Reply
  16. Avatar for Carrie DilsJulia Sydnor says

    May 21, 2013 at 7:03 am

    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
  17. Avatar for Carrie DilsSteve Olson says

    June 5, 2013 at 10:22 pm

    Carrie,

    Can you take a look at this page and tell me why you think the styling is off? I had this done on another site and it worked like a charm, for some reason on this one it doesnt seem to fit right 🙁

    http://steveolsongroup.com/idx/mls-4932320-2211_e_camelback_road_unit_202_phoenix_az_85016

    Reply
    • Avatar for Carrie DilsSteve Olson says

      June 5, 2013 at 10:38 pm

      Turns out it only shows goofy in Chrome on a Mac – not sure why??

      Have you seen issue with Modern Port on Chrome?

      Reply
  18. Avatar for Carrie Dilsmitul says

    June 14, 2013 at 1:20 am

    Awesome bro!!

    Reply
    • Avatar for Carrie DilsCarrie Dils says

      June 14, 2013 at 6:05 am

      I’m a girl, but I appreciate the sentiment.

      Reply
  19. Avatar for Carrie DilsReginald says

    July 3, 2013 at 9:26 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      July 5, 2013 at 5:49 am

      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. Avatar for Carrie DilsAnna Kenbeek says

    July 10, 2013 at 5:30 am

    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
    • Avatar for Carrie DilsAnna Kenbeek says

      July 10, 2013 at 5:35 am

      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
      • Avatar for Carrie DilsCarrie Dils says

        July 10, 2013 at 7:13 am

        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. Avatar for Carrie DilsDavid says

    July 17, 2013 at 11:44 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      July 17, 2013 at 12:00 pm

      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
      • Avatar for Carrie DilsDavid says

        July 17, 2013 at 11:10 pm

        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. Avatar for Carrie DilsRGOSS says

    July 22, 2013 at 3:44 pm

    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
    • Avatar for Carrie DilsRobG says

      July 23, 2013 at 3:38 am

      Thanks so much Carrie I worked out the details. Have a great day…

      Reply
  23. Avatar for Carrie DilsZak says

    July 28, 2013 at 12:05 pm

    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. Avatar for Carrie DilsJim says

    August 6, 2013 at 11:22 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      August 6, 2013 at 1:52 pm

      Cool, I’ll check it out!

      Reply
  25. Avatar for Carrie DilsJeff says

    August 15, 2013 at 2:27 pm

    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
  26. Avatar for Carrie DilsTony Brennan says

    September 12, 2013 at 1:06 pm

    Hi Carrie, many thanks for this great tutorial. I had been really struggling with adapting my Genesis AgentPress theme. Your cta have worked a treat!

    Reply
  27. Avatar for Carrie DilsJon Bennallick says

    October 1, 2013 at 10:10 am

    You’ve just saved me a day of work!
    Thanks a bunch Carrie 🙂

    Reply
  28. Avatar for Carrie Dilsalancore2duolan says

    October 16, 2013 at 2:06 am

    really don’t know how to thank you!!

    Reply
  29. Avatar for Carrie DilsEric Kuhn says

    November 6, 2013 at 9:23 pm

    Carrie,
    Thank you for the great tutorial. I am having a little trouble and I posted my question on the StudioPress forum. Could you tell me if the code I am trying to use will only show the widget area on the one page and subpages I am looking for?
    http://www.studiopress.com/forums/topic/add-widget-area-only-above-one-page/

    Reply
    • Avatar for Carrie DilsCarrie Dils says

      November 7, 2013 at 8:42 am

      Looks like Brad got you taken care of. Let me know if you still need help. 🙂

      Reply
      • Avatar for Carrie DilsEric Kuhn says

        November 7, 2013 at 10:46 pm

        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
  30. Avatar for Carrie DilsMatt says

    November 14, 2013 at 10:10 pm

    This was super helpful, thanks! 🙂

    Reply
  31. Avatar for Carrie DilsSumit says

    January 13, 2014 at 12:51 pm

    Hello Mam, I want to display the widget on homepage also. How can I do this. Please help.

    Reply
  32. Avatar for Carrie DilsalitahoyerAlejandra says

    January 14, 2014 at 12:02 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      January 14, 2014 at 8:18 am

      Hi Alita,
      Sounds like that would be a change in your stylesheet to the background property of that element.

      Cheers,
      Carrie

      Reply
  33. Avatar for Carrie Dilsdylanmcleod says

    January 24, 2014 at 1:46 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      January 24, 2014 at 4:26 pm

      Wouldn’t it be easier to use a full-width template on those pages? What’s your usage scenario?

      Reply
      • Avatar for Carrie Dilsdylanmcleod says

        January 27, 2014 at 6:40 pm

        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. Avatar for Carrie DilsTeresa says

    February 1, 2014 at 2:00 am

    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
  35. Avatar for Carrie DilsGuy Tanamy says

    February 11, 2014 at 3:29 am

    You make me miss the days I was leaving in Tiki Island TX.
    Now I leave in Israel 🙂

    Reply
  36. Avatar for Carrie DilsRGOSS says

    February 23, 2014 at 10:56 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      February 23, 2014 at 7:53 pm

      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
      • Avatar for Carrie DilsRGOSS says

        February 23, 2014 at 8:53 pm

        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
  37. Avatar for Carrie Dilsdylanmcleod says

    February 24, 2014 at 5:12 pm

    hi carrie,

    just wanted to ask how you added the newsletter signup form in the widget area? did you just use the Gensis eNews plugin?

    thanks

    Reply
  38. Avatar for Carrie Dilszhtonywang says

    February 24, 2014 at 11:26 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      February 25, 2014 at 8:03 pm

      I’m using a Gravity Form on my site, but even that took a lot of effort in styling. You’re welcome to peek at the code. 🙂

      Reply
  39. Avatar for Carrie Dilstea queue says

    March 12, 2014 at 9:52 pm

    Super helpful – thanks.

    Reply
  40. Avatar for Carrie DilsSeamus says

    March 27, 2014 at 4:00 am

    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. Avatar for Carrie DilsNists says

    March 12, 2015 at 10:49 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      March 12, 2015 at 2:17 pm

      Yep! Check out the section on checking for sub pages -> http://codex.wordpress.org/Function_Reference/is_page

      Reply
      • Avatar for Carrie DilsNists says

        March 12, 2015 at 4:42 pm

        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. Avatar for Carrie DilsBeth says

    March 13, 2015 at 11:51 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      March 13, 2015 at 5:33 pm

      If you want it showing up on all pages , just remove the conditionals in the example and do:

      function mp_cta_genesis() {
      // code to show your widget
      }

      This post might be helpful for you: http://carriedils.com/wordpress-conditional-tags/

      Reply
      • Avatar for Carrie DilsBeth says

        March 13, 2015 at 6:08 pm

        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. Avatar for Carrie DilsScott Stephens says

    May 27, 2015 at 1:36 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      May 27, 2015 at 12:47 pm

      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. Avatar for Carrie DilsJacek IciekJacek says

    June 17, 2015 at 12:30 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      June 17, 2015 at 3:09 pm

      Where are you getting stuck in the process?

      Reply
  45. Avatar for Carrie Dilskbenakole says

    August 27, 2015 at 7:32 am

    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. Avatar for Carrie DilsDesmond Chambers says

    September 24, 2015 at 2:25 am

    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
  47. Avatar for Carrie DilsDon says

    September 30, 2015 at 5:03 pm

    Thank you – saved a lot of time and did the job right.

    Reply
    • Avatar for Carrie DilsCarrie Dils says

      October 6, 2015 at 8:28 am

      Glad to hear it!

      Reply
  48. Avatar for Carrie DilsLiz says

    December 15, 2015 at 4:02 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      December 16, 2015 at 7:15 pm

      Hey Liz,
      If you want it to show everywhere on your site, then you can remove the conditional check altogether.

      Cheers,
      Carrie

      Reply
  49. Avatar for Carrie DilsLiz says

    December 18, 2015 at 3:57 am

    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. Avatar for Carrie Dilsjaredb says

    January 29, 2016 at 2:54 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      January 29, 2016 at 3:48 pm

      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
  51. Avatar for Carrie Dilsjaredb says

    January 29, 2016 at 3:14 pm

    ok. i feel stupid. if i just read the title, “Add Widget Area Below Nav” YIKES!
    If i look at a visual hook guide here http://genesistutorials.com/visual-hook-guide/
    it shows it after the header, but before the primary-nav. Is there a way to achieve this?

    Reply
  52. Avatar for Carrie Dilsjaredb says

    January 29, 2016 at 3:29 pm

    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. Avatar for Carrie DilsGeorgia says

    March 24, 2016 at 10:26 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      March 28, 2016 at 4:59 pm

      Hey Georgia,
      Check out http://genesiscustomizations.com/!

      Cheers,
      Carrie

      Reply
  54. Avatar for Carrie DilsAmit says

    March 26, 2016 at 8:03 am

    Hey Carrie,

    This was simply amazing.I am developing my theme and this tutorial was just a great help!!

    Reply
  55. Avatar for Carrie DilsMarvin Talaro says

    June 20, 2016 at 3:53 pm

    Is this call to action works with foodie Pro Genesis Child Theme?

    Reply
    • Avatar for Carrie DilsCarrie Dils says

      June 21, 2016 at 8:20 am

      In theory this works with all Genesis themes, however I have not tested it with Foodie Pro.

      Reply
  56. Avatar for Carrie DilsReggie says

    August 11, 2016 at 6:36 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      August 12, 2016 at 10:35 am

      This may well be the most awesome compliment I’ve ever received. Ha! Thanks Reggie!

      Reply
  57. Avatar for Carrie DilsMilada says

    November 2, 2016 at 9:00 am

    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
    • Avatar for Carrie DilsCarrie Dils says

      November 2, 2016 at 11:42 am

      Hi Milada, that sounds like a caching issue. Try refreshing your browser cache and see if that clears it up.

      Reply
      • Avatar for Carrie DilsMilada says

        November 2, 2016 at 11:55 am

        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
        • Avatar for Carrie DilsRaj says

          December 10, 2016 at 8:13 am

          Thanks for such a good tutorial

          Reply
          • Avatar for Carrie DilsCarrie Dils says

            December 11, 2016 at 3:34 pm

            You bet!

  58. Avatar for Carrie DilsRob McDonald says

    March 7, 2017 at 2:56 pm

    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
    • Avatar for Carrie DilsCarrie Dils says

      March 11, 2017 at 6:11 pm

      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. Avatar for Carrie DilsSamara Al Badri says

    April 17, 2017 at 5:00 pm

    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
  60. Avatar for Carrie DilsGaurav Verma says

    May 16, 2017 at 12:19 am

    you have any video tutorials for that

    Reply
    • Avatar for Carrie DilsCarrie Dils says

      May 17, 2017 at 4:55 pm

      Sorry, I don’t right now.

      Reply

Trackbacks

  1. MacGyver's Top 10 Tips for Using the Genesis Extender Plugin says:
    April 3, 2013 at 7:18 am

    […] a riff on what Brian Gardner created on the Minimum Theme Portfolio. I wanted to create a special call to action (HIRE ME!) that only appeared on my portfolio […]

    Reply
  2. Genesis Framework Tutorials - Sure Fire Web Services Inc. says:
    May 7, 2013 at 10:04 am

    […] How to: Add Widget Area Below Nav […]

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Search

Heya, I’m Carrie Dils

Carrie Dils chillin at the beach

Articles

  • Business
  • Front-End Development
  • Genesis Framework
  • Mental Health
  • Web Accessibility
  • WordPress Tutorials

Things I Love ❤️

My Tech Toolbox

Favorite Business Books

  • OfficeHours.FM
  • My Courses on LinkedIN Learning
  • The Fearless Freelancer®

© 2021 CWD Holdings LLC