Hi there, friends! It’s a cool, rainy day here in Central Texas, which means I’m ready to write a new Genesis Framework tutorial. (If it were a sunny day, I’d be frolicking outdoors). Ready to do a little coding together?
I recently redesigned my website using the Modern Portfolio Theme from StudioPress as a starting base. I kept the design pretty true to the original theme, but I did bust out some mad customizations, one of them being the dark bar you see across the top of this page.
What is it? That area is actually just a widget area, which I’ll show you how to add. But the fun part (of course, there’s a fun part!) is making the widget conditionally appear on different pages, allowing me to customize my call to action on a page-by-page basis.
So, today’s mission is: Add a “Call to Action” widget area below the nav (or above the content) and make it show conditionally by post or page.
Create Call to Action Widget Area(s)
The first step is to register a new widget area. Now you could get away with just a single widget area if you want to use the same widget across your entire site.
On my site, I’ve registered four widget areas (one for each unique call to action). You can create however many you’ll need.
If you’re using the Genesis Extender Plugin, you can use that to create your widget areas. Otherwise, you can drop a variation of the following into your functions.php:
Shove Those Widgets Into the Design
We’re about to tell our theme to do two things:
1) Tell it WHERE to put our widget
2) Tell it WHEN to put our widget
The WHERE part is easy – I want to show my Call to Action widget underneath the header on every page. To do that, we want to use a Genesis action hook to execute the custom function that’ll display the widget.
Once again, if you’re using Genesis Extender, you can create an action hook there, or you can drop the following into functions.php:
add_action( 'genesis_after_header', 'mp_cta_genesis' );
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.
As always, very useful. Thanks for being so terrific! 🙂
Lots of clients (specially coaching-related business) love the sign up form on top!
Thank you, I can really use this.
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.
I look forward to seeing it! 🙂
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 🙂
Glad to hear it, Kevin!
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.
I appreciate the feedback. Glad it’s helpful!
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!
Oh, I do love that CTA ribbon on Education. Look forward to seeing your final product!
Really useful article, I’m glad I found it 🙂
Hey Carrie !
Thanks to you, I finally understand the usefulness of the wrap class.
Great content, very helpful as usual!
Looks nice. I’ll try this out 🙂 Thank you !
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!
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
Worked like a charm – Tks!
Carrie,
Can you explain where you put this in order to align the widgets next to each other?
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.
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.
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/
🙂
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?
This is great!!! These types of posts are what really allow to you to fully tae advantage of what genesis and wordpress can do.
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!
Hey Ricardo! You know I’m available for hire. 😉 Hit me up.
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.
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
Turns out it only shows goofy in Chrome on a Mac – not sure why??
Have you seen issue with Modern Port on Chrome?
Awesome bro!!
I’m a girl, but I appreciate the sentiment.
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
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
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. 🙂
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 😉
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
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!
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
Thanks so much Carrie I worked out the details. Have a great day…
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…
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.
Cool, I’ll check it out!
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?
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!
You’ve just saved me a day of work!
Thanks a bunch Carrie 🙂
really don’t know how to thank you!!
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/
Looks like Brad got you taken care of. Let me know if you still need help. 🙂
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?
This was super helpful, thanks! 🙂
Hello Mam, I want to display the widget on homepage also. How can I do this. Please help.
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
Hi Alita,
Sounds like that would be a change in your stylesheet to the background property of that element.
Cheers,
Carrie
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!
Wouldn’t it be easier to use a full-width template on those pages? What’s your usage scenario?
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!
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:)
You make me miss the days I was leaving in Tiki Island TX.
Now I leave in Israel 🙂
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
forgenesis_after_header
function (or hook into a different spot on Parallax). Try adding a priority of 15 on theadd_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.
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
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
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. 🙂
Super helpful – thanks.
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?
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?
Yep! Check out the section on checking for sub pages -> http://codex.wordpress.org/Function_Reference/is_page
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?
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
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/
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
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.
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?
Where are you getting stuck in the process?
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.
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!
Thank you – saved a lot of time and did the job right.
Glad to hear it!
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!
Hey Liz,
If you want it to show everywhere on your site, then you can remove the conditional check altogether.
Cheers,
Carrie
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;
}
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 );
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?
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.
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
Hey Georgia,
Check out http://genesiscustomizations.com/!
Cheers,
Carrie
Hey Carrie,
This was simply amazing.I am developing my theme and this tutorial was just a great help!!
Is this call to action works with foodie Pro Genesis Child Theme?
In theory this works with all Genesis themes, however I have not tested it with Foodie Pro.
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!
This may well be the most awesome compliment I’ve ever received. Ha! Thanks Reggie!
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
Hi Milada, that sounds like a caching issue. Try refreshing your browser cache and see if that clears it up.
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
Thanks for such a good tutorial
You bet!
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.
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.
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.
you have any video tutorials for that
Sorry, I don’t right now.