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.
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.
thank you verry much for great info