Skip links

Join 2,509 other smart freelancers!

Sign up to learn how to keep your skills up to date on the tech that matters most and confidently sell your skills to a growing customer base.
I will never spam you. You can unsubscribe at any time.

Reader Interactions


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


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


    /** 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’ ),
    ) );


    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.


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


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

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

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

    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 {
    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 😉

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


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

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

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


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

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

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


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

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

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

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


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


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

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

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

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


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

  30. 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() ) {

    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?


  31. 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() {

  32. 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’ => ”,
    ) );

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

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

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

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


Leave a Reply