It’s no secret that the name of the internet marketing game is to establish readership and capture email addresses. After all, what’s the use in writing on your blog if you’re not trying to engage with your audience and ultimately sell them something?
If you’re looking to get inside the mind of your readers, then checking out Derek Halpern’s Social Triggers site is essential
He focuses on building businesses by breaking down psychological research and business case studies into simple, actionable steps that can help you improve your online business.
The Secret to Capturing Email Addresses
Head on over to Social Triggers to see one proven way that Derek takes care of business. You’ll notice at the top of his homepage is a Featured Box, whose sole purpose is to capture your email address.
So you might be wondering how you can add something like this, right?
Well if you’re running your website or blog on the Genesis Framework, this is quite easy to do. Follow these steps and you’ll be sporting a Featured Box like below!
Adding The Featured Box to Your Site
Inside your child theme’s functions file, place the following code:
/** Register Featured Box widget area */
genesis_register_sidebar( array(
'id' => 'featured-box',
'name' => __( 'Featured Box', 'genesis' ),
'description' => __( 'This is the featured box.', 'genesis' ),
) );This will register the ‘Featured Box’ widget area so that you can easily add content by using a text widget and/or the Genesis eNews & Updates widget.
You will also need to place the code below inside your child theme’s functions file. This a custom function which will hook the ‘Featured Box’ widget area just below the header on your homepage.
/** Add Featured Box after header on homepage */
add_action( 'genesis_after_header', 'include_featured_box' );
function include_featured_box() {
if ( is_home() && is_active_sidebar( 'featured-box' ) ) {
echo '<div class="featured-box">';
dynamic_sidebar( 'featured-box' );
echo '</div><!-- end .featured-box -->';
}}Styling Your Featured Box
You might want to change the way your Featured Box looks, so open up your child theme’s style.css file and place the code below. Obviously this is only a base to start with, and you can customize according to your site’s design.
/* Featured Box
------------------------------------------------------------ */
.featured-box {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 auto;
overflow: hidden;
padding: 20px;
width: 918px;
}
.featured-box h4 {
font-size: 20px;
}
.featured-box p {
padding: 0 0 20px;
}
.featured-box ul {
margin: 0 0 20px;
}
.featured-box ul li {
list-style-type: square;
margin: 0 0 0 30px;
padding: 0;
}
.featured-box .enews p {
padding: 0 0 10px;
}
.featured-box .enews #subscribe {
padding: 0;
}
.featured-box .enews #subbox {
background-color: #fff;
margin: 0;
}What are Your Waiting For?
It’s time to start writing the copy that will go inside your featured box. Think curb appeal, as this is the front door that will welcome your visitors…
For more info on succeeding online and building your list, Martyn Chamberlin shares his knowledge with 5 Sure-fire Ways to Boost Your Email Subscribers.
Pretty sure Derek runs his site on Thesis since he works with DIYthemes.
Your image example caption states it’s a Featured Box on the Sample Child Theme running the Genesis Framework.
You’re right when you say Derek runs his site on Thesis… the image I show is a screenshot of a similar Featured Box (using his copy/image as an example with permission from him) running on the default child theme for the Genesis Framework.
If you click the image screenshot it opens up a larger sample of what that looks like within the Sample child theme for Genesis.
Thanks for sharing, was looking for it. Really helps in increasing susbcribers and sales.
Brian I am trying this on an experimental website I have for “testing” purposes and the Feature Box is all the way on the left side. Is there a way to center it? or move it right?
Also the email box and button are not showing up.
Try adding margin: 0 auto; to .featured-box {} CSS.
As for the email box/button – are you using the Genesis – eNews and Updates widget?
Yes I am Using eNews and Updates
What is a link to your site? That’s the only way I’d be able to see…. (also, make sure you have entered your Feedburner ID in the widget as well.)
The margin thing worked!!!!
Thanks for your help!
Sorry for all the questions but The Margin Centering only worked on the Home Page. On all the other pages it is still on the left.
http://www.buildnichewebsites.com
Brian,
Only the Home page is centered now.
The other pages are on the left
http://www.buildnichewebsites.com
This is only a test site I use for working on things before I make them live on real sites.
Wow, I’ve been working inefficiently. Thought you had to create a PHP file for something like this. You can just echo dynamic_sidebar( ‘featured-box’ ); and it’ll show up as a widget.
Thanks Brian!
Yep, I noticed the code you used in the comments of your post – and that works as well. I like to use widgets any place possible, as it’s much easier for a non-coder to go in and customize their text.
Got it working. My mistake like usual! lol
Thanks for your help!
Another useful post Brian and some great links.
I’ve got the Genesis Pro plus package but not running a Genesis theme on my own site yet.
Still trying to decide which Genesis theme would give me the best looking site without a lot of changes – like the Minimum theme.
Until I make a decision – Stored this one for future use.
I hate to say this Brian, but I’m testing your code out on a local WordPress install and it looks like the “echo” is somehow messing up the conditional statement. The feature box is appearing on all pages of the site – not just the blog home. Removing the two echo statements fixes the issue, so I guess readers should add the div inside their text widget. There’s probably a workaround but I’m not familiar enough with the framework.
Are you experiencing this issue or is it just me?
Eeek, I missed a couple of {} in there – I updated the code, try it now. I just confirmed it a) wasn’t working with the code I had and b) is working now with the code I have.
Awesome man. I’m still a rookie with real coding. Glad it was a fast fix!
Very cool. I like when I see information about how psychology can help your online presence and conversion. Psychology and human factors have a lot to do with the success of your online business, products or services. The way your audience interacts with your presentation is crucial. As the internet goes through more growth we see webmasters taking more time understanding how to convert prospects over time.
Brian,
It would be great if there was more options for the standard Genesis “Enews and Updates Widget”. I would love to be able to connect it to MailChimp so I could use the inherent widget for the theme.
Scott
That’s something we can look into, though not sure if it’s something we can include as part of Genesis. Perhaps that should be a separate plugin?
Thanks Brian
This is great. I’m going to introduce the featured box into my designs now.
Brian – this looks awesome but is there any way to integrate this with aweber ?
thanks
dp
Nice article. What’s everyone using for their email marketing? I’ve been using Campaign Monitor, and really like it so far.
Brian, is there a conditional tag to only show this box for new readers, like
if ( is_home() && is_new_visitor() )
or is there just is_just_logged_in() ?
I honestly don’t know about that one… not sure if there’s native WordPress code or a conditional for that or not.
Ok, thanks. It’s probably cookie-based then.
Funny because from the very same example I did something a-like a month ago or so here: http://medsider.com/ of course with Genesis.
Excellent opt-in box Marco – love what you did there!
Is there a way to use this newsletter feature without feedburner? (I don’t like (to use) feedburner…)
You can simply enter your email subscriber html code in the text widget and that should work too.
Thanks – I’ll give it a shot in my relaunch.
By the way: What’s the html code/where can I find it?
Hi Brian,
Thanks this is great. However, if you leave the Featured Box widget empty it still leaves a one line empty box on your home page. Sometimes there are times you want to take the “featured box” info out, but you don’t want to leave the empty box, nor do you want to comment out the PHP code. If you just change this line:
if ( is_home() )
to this:
if ( is_home() && is_active_sidebar(‘featured-box’) )
You are then good to go.
Excellent suggestion Matthew, and I updated the code. I didn’t really take that into consideration, as I assumed if someone wanted a featured box that they wouldn’t “not use it” at times.
Every time I try to add this:
/** Add Featured Box after header on homepage */
add_action(‘genesis_after_header’, ‘include_featured_box’);
function include_featured_box() {
if ( is_home() && is_active_sidebar(‘featured-box’) )
echo ”;
dynamic_sidebar( ‘featured-box’ );
echo ‘‘;
}}
I get this:
Parse error: syntax error, unexpected ‘}’ in /home/webs/public_html/mysite.com/wp-content/themes/lifestyle/functions.php on line 173
Hi JaxRolo. I think you’re missing the open curly bracket, {. The line should be like this:
if ( is_home() && is_active_sidebar(‘featured-box’) ) {
Brian, can you fix it in your post above? Sorry, I should have been more careful and copied the “entire” line when I wrote my comment.
Sorry about that guys – code has been updated…
Thanks Brian! Is there a way to add this after a post but before the comments?
Yes there is – it’s pretty much what this tutorial shows you how to do.
You’re pretty much replacing this line of code:
With this one:
Sweet! Thanks for the quick reply and the info!
I have tried this on Nomadic child theme and can’t seem to get it to work..
Try re-copying this line and replace it in your code:
No dice. Caused an error by using the
If I remove the && is_active_sidebar(‘featured-box’) it seems to work
Thanks for this. I’ve been looking all over for a way to get a feature box like that. I just have one problem though, when I add the code and put in a genesis featured page widget on it, it’s like it’s columnized to the left. It doesn’t fill the whole box right.
Thanks for the code, added the code but still need feedback on it and ways to improve it more..
Hi –
Have you considered making this a Genesis widget for the non-technical?
I think this would quickly become extremely popular…
–Jim
It’s possible Jim, but would be somewhat hard to do b/c ultimately it can be located in different places, and folks would have to still include styling for it. Hm, but still something for me to dig deep into conceptually to see if it would be easy to pull off.
Brian what would you recommend as the best way to add a structural wrap to the Featured Box if say you wanted to have a background span full width? Thanks.
It’s simply look like this:
Of course, you’d need to make sure that you added CSS for the .featured-box-full class (set width to 100%) and make sure that your main #wrap CSS isn’t set to 960px width or it would still get cut off.
Has anyone tested this and got some hard sexy stats?
Greg from Sparring Mind reckons it doesn’t convert overly well.
Thoughts?
I believe Derek Halpern loves the idea of the feature box on a blog. I think he talks about it here. http://socialtriggers.com/email-signup-forms-build-list/
He might have another blogpost that has some stats but I don’t know where it is.
Mine was converting from 11 to 14% easy. I used it on Thesis until days ago.
Brian,
Could you provide an example of how you would implement Aweber code with this type of feature box? Copying and pasting the code you provided above is simple enough, but I (others likely as well) get stuck on where to add the Aweber code and how to make it look like the feature box you created in the image.
This would be an enormous help.
Ryan
The best thing to do Ryan would be to drop all of the optin form code into the text widget and see how it looks. Since all form code will vary, it’s hard to do a blanket tutorial on how to do. On our demo, I tested each one – simply looked for instances of
and
and
and removed those so they form wouldn’t take up as much vertical real estate.
Hi Brian,
What email service are you using to capture email addresses? Genesis’ enews is using feedburner by default, but I see this site doesn’t show the usual window when subscribing.
Cheers!
I’ve actually switched to Mailchimp for collecting email addresses. I wanted the ability to send out (formatted) emails to folks who subscribed, which is why I changed.
Does this mean a update to the standard Genesis “Enews & Update Widget”… Please!!! MailChimp integration is top priority in my mind.
I doubt it – primarily because with Feedburner, it’s really easy to drop in a username and have it work. On the flipside, it’s definitely possible that we look into creating a plugin (which will have a widget) that works with Mailchimp and it’s API at some point this year.
That would be fantastic, Brian!
Also, quick question – I’m using this for a client and he wants the box between the header and the sub nav. Any way to get that positioned correctly?
Mockup is here – http://asamedialabs.com/dev9/ using Sleek as the base theme.
Thanks!
We’re customizing the Streamline template and ran into the exact same need– Mailchimp integration.
Is there any update on whether this will happen or not? Or has anybody successfully modified the code to work with Mailchimp? For the same reasons you mentioned, we’d rather not be limited to Feedburner.
Thanks!
That is something we’re hoping to add into Genesis 1.9 or 2.0 – an update to the eNews widget or something new with other email list providers. Sorry for the delay in response, your comment was marked as spam and I just saw it now.
Thumbs up!
Great article but not enough nuts and bolts offered to help people use it. For one it is impossible to place and image with the Genesis enews letter widget. It has to be coded if you want to use the text widget. Why doesn’t the copyblogger theme incorporate many of the same widgets other themes do where aweber code can be inserted?
Many pro bloggers use aweber. When you show an image of the Featured Box with images and looking so nice it is important that people can duplicate it. Getting the Featured Box by copying the code above is easy enough but then the hard part to make it look like that.
Scott – really sorry this comment didn’t get approved earlier. It was marked as spam and I just now caught it. I’ll see if I can work something up in terms of helping people customize per signup company.
Hi Brian,
I tried to used the code after post content but nothing happened. Don’t know where is the mistake. I’m using Church theme.
Any help?
Thanks for the great tip, Brian. How can I make this appear on specific pages only. Following your instructions makes it appear on my posts page (which isn’t my home page)…
Are you wanting this only on the homepage?
Brian,
Is it possible to add the Feature Box to a blog post page and not just the Homepage?
And
Can I add a second Genesis Box to the Bottom of posts?
Thanks so much!
Yes, it is possible to do that – you’d just have to change the conditional:
To something like this:
As for the Genesis Box, you can add as many as you’d like in fact – just need to create separate files and hook each file like the one shown.
Hi Brian, great post, a very helpful one too. There’s one thing i’m not sure about and would be happy if you could help. Do you use any custom redirects for the newsletter confirmation after someone signs up? I’ve designed a ‘Thank You’ page but not sure how i can get this displayed after someone signs up. Thanks.
Hey Freddie – yes, Mailchimp allows you to specify a page that you send people to (here’s mine).
Thanks Brian, will check it out.
Hello Brian, it is possible to add ” Featured Content Gallery ” to the child eleven40 theme ?
Thanks in advance
Regards
It is possible, but would require you to register a widget area as well as then hook that into the location of the theme where you want it to appear.
awesome, thanks for the “trick” Brian. I’ll apply it to my Social Eyes…
Thanks for the tips.
I entered the code and everything on this site http://www.clogon.com and am getting issues.
Let me know what I’m missing or what needs to change.
Thanks.
Hey Nate – sorry for the delay. I see you took the code off, so I’m assuming you couldn’t get it to work?
Yeah, I removed it. If I add it again, would you or one of your team mind looking at it to see what’s wrong?
Thanks Brian.
Thanks for your help, Brian. I’m thinking about including this on individual blog posts in addition to the main Blog page. You provide info on how to include it on the page above, but can you also provide it for individual posts?
Thanks!
Are you referring to the top of the page? Or after the post like you had asked about in the other comment?
Sorry for the confusion, two different questions. In general, wanting to put the box on individual blog posts + the main blog page. I changed your code to put it on individual blog posts, but can’t get it on that and the main blog page.
Not sure if you’ve specified this somewhere, but how did you create the great looking “sign up for my newsletter” box at the bottom of every post?
I have not published anything like this yet, but it’s something I’ve been asked by many to do. Perhaps this week I can write that up.
This would be EXTREMELY helpful. Thanks, Brian!
Hi- I use genesis with prose child theme- I’m not a coder, but i’m also not afraid ; ) I looked in my editor and found what i believe is the folder you refer to – theme functions (functions.php) – do i just put the code in the top there-?? it says- this file contains customizations to the prose child theme- … I want to add the feature box, just needa teensy bit more help to do so- Mahalo!
If you are using Prose 1.5, then you’ll want to use the Custom Code page that comes along with that theme.
Hi Brian,
Great tutorial! I was wondering if this box will be responsive since I am using the eleven40 theme?
Yep, it should be!
Parse error: syntax error, unexpected T_STRING in /home/androi42/public_html/wp-content/themes/eleven40/functions.php on line 7
this is the error im getting…below are the initial few lines of function.php
‘Blue’, ‘eleven40-green’ => ‘Green’, ‘eleven40-red’ => ‘Red’ ) );
/** Add support for structural wraps */
add_theme_support( ‘genesis-structural-wraps’, array( ‘header’, ‘nav’, ‘subnav’, ‘inner’, ‘footer-widgets’, ‘footer’ ) );
/** Add new image sizes */
add_image_size( ‘grid-thumbnail’, 270, 100, TRUE );
i placed the code at the bottom so why is it giving me error on line 7?
SRY this is the initial lines of function.php
‘Blue’, ‘eleven40-green’ => ‘Green’, ‘eleven40-red’ => ‘Red’ ) );
/** Add support for structural wraps */
add_theme_support( ‘genesis-structural-wraps’, array( ‘header’, ‘nav’, ‘subnav’, ‘inner’, ‘footer-widgets’, ‘footer’ ) );
/** Add new image sizes */
add_image_size( ‘grid-thumbnail’, 270, 100, TRUE );
Looks like you removed some of the code in the functions file if those are your first lines in there.
‘Blue’, ‘eleven40-green’ => ‘Green’, ‘eleven40-red’ => ‘Red’ ) );
i dont know for some reason the above code is not being displayed in be4 comments..theses are the lines..i still cant access my site!
gosh…theres a bug in this comment section…i uploaded the image of my fuction file http://i.imgur.com/ErbzW.jpg check the initial lines here…im sry but there really i tried 4 times copy pasting the code and it didnt display
I was able to successfully implement your Featured Box code. However, the Featured Box appears on my blog page because I have set the “Reading Settings” to a static page with blog posts appearing on a separate blog page. What adjustments do I need to make to your code to allow the Featured Box to appear on the homepage?
Hey LJ – can you provide a link to your site so I can see it in action?
For static home page, just change conditional is_home() to is_front_page()
How can I make a white space from menù bar and featured box, as in this picture :
http://www.briangardner.com/wp-content/uploads/featured-box.jpg
I have menù and featured box that are practically adjacent.
Thanks
I’d have to see the site in question, but my guess is that you just need to add some bottom margin.
Brian, really helpful tips. I like all the stuff on your blog. Question: Is the new sidebar/widgeted area just supposed to appear on the wordpress widgets menu after the code is placed in the functions file and stylesheet? I am using the prose child theme, and I put the pieces of code in their respective locations in the Genesis custom code entry areas. But I don’t see where I would be able to place any widgets because no new widgeted area has been created in my WP control panel. Any help would be appreciated. Thanks.
Hm, which version of Prose are you using?
I’m using Prose 1.5.1 and having the same problem as Dan. When I post the code in the “Custom Code” section, I don’t see any new widgets in my WP control panel. Is there something that I’m during wrong? I linked my site to name if you need to take a look.
We just pushed an update to Prose. See if it works now.
I have updated to Prose 1.5.2. The new widget area still does not appear. Any help would be much appreciated. Thanks Brian.
Same here. The update doesn’t appear to fix the issue.
Thanks a lot, Brian. That’s an awesome article. I’d also be very glad, if you can write a tutorial on “extending the post title to full page length. I mean, the H1 title on single pages should appear above both the content area and the widget area. Just like you use on this sites.”
Thank You
Hi there,
I tried to implement the guide you’ve shared above but it’s not working on my end. Please help me regarding this issue.
- Felix
I am implementing this on a new site I’m developing but I can’t seem to adjust the font size for the paragraphs. I have no trouble adding styling for the heading and I’m able to change the color of the paragraph font – just not the size.
Any thoughts on why this isn’t working? I’ve got the right CSS code in there as far as I can tell.
Hi Brian,
This is fantastic! Thanks so much for creating this post.
I am in the same boat as the other Prose 1.5.2 folks – no luck getting it to appear. Before I saw the bit about adding it to the custom code box I added to the functions.php file and it worked beautifully (but I saw a warning in that file about not editing it so I’ve decided to wait for a custom code fix).
Questions:
1) How would I make it so this feature box appears everywhere on the site?
2) How can I get it to appear just below the Prose navigation bar rather than in between the header and nav?
Thanks again
B.