Please note that this tutorial is outdated and that a newer tutorial is available. Not only is this newer one easier to implement, it offers more email marketing providers.
I’ve been asked a number of times how I place the newsletter signup box at the end of my posts. If you’re wondering what we’re talking about, click here and you’ll see.
With Genesis, so many things are possible and adding this signup box is relatively simple. Follow the steps below, and in no time you’ll be sporting a nifty one.
Step #1
The first thing you’ll want to do is register a widget area. This can be used either to drop your signup form code into a text widget, or if you’re using Feedburner you can use the Genesis eNews and Update widget.
Copy the code below and put it into your child theme’s functions.php file:
/** Register newsletter widget area */
genesis_register_sidebar( array(
'id' => 'newsletter',
'name' => __( 'Newsletter', 'custom-theme' ),
'description' => __( 'This is the newsletter section.', 'custom-theme' ),
) );Step #2
The next step is that you’ll need to write a function which hooks the newsletter widget area to the end of the blog post.
Copy the code below and put it into your child theme’s functions.php file:
/** Add the newsletter widget after the post content */
add_action( 'genesis_after_post_content', 'custom_theme_newsletter' );
function custom_theme_newsletter() {
if ( ! is_singular( 'post' ) )
return;
genesis_widget_area( 'newsletter', array(
'before' => '<div id="newsletter widget-area">',
) );
}Step #3
Here’s where it gets a bit tricky, as this depends on what kind of form you want to use. My site here is using Mailchimp code, and my personal blog over at Nomad Theory is using Feedburner and the eNews and Updates widget provided with Genesis.
I can’t provide an explanation for every newsletter service, but I’ll cover the two methods I use – hopefully those will give you enough to go on.
More than likely there will be a few elements that you’ll need to style as well, depending on your theme.
method #1 – eNews and Updates
Place the eNews and Updates widget into the Newsletter widget area, and then use the sample CSS below. You’ll also want to download the graphics and place them into your child theme’s /images/ directory.
/* eNews and Update Widget
------------------------------------------------------------ */
.enews-widget {
background-color: #e7e7e7;
border: 10px solid #ddd;
margin: 0 50px;
}
.enews-widget .widget-wrap {
border: 1px solid #fff;
}
.enews {
background: url(images/enews-ribbon.png) no-repeat top left;
margin: -17px -18px;
overflow: hidden;
padding: 45px 50px 40px;
text-align: center;
text-shadow: 1px 1px #fff;
}
.enews #subbox {
-moz-box-shadow: 0 0 3px #bbb;
-webkit-box-shadow: 0 0 3px #bbb;
background: #fff url(images/enews-subbox.png) no-repeat center left;
box-shadow: 0 0 3px #bbb;
color: #999;
margin: 10px -7px 10px 0;
padding: 13px 0 13px 37px;
width: 250px;
}
.enews #subbutton {
background-color: #666;
color: #fff;
padding: 13px 12px;
}
.enews #subbutton:hover {
background-color: #555;
}method #2 – Mailchimp
Put the code below into a text widget and place that into the Newsletter widget area.
<div id="newsletter">
<div class="white-border">
<div class="newsletter-wrap">
<h4>Sign up for my Newsletter</h4>
<p>Receive WordPress tips and learn how to customize the Genesis Framework with detailed tutorials.</p>
<form action="http://briangardner.us4.list-manage1.com/subscribe/post?u=a9043d2339738bc7912a79148&id=6217d80e7e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address ..." required>
<input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
</div>
</div>
</div>Then use the sample CSS below. You’ll also want to download the graphics and place them into your child theme’s /images/ directory.
/* Newsletter
------------------------------------------------------------ */
#newsletter {
background-color: #f5f5f5;
border: 10px solid #eee;
margin: 10px 40px 0;
}
#newsletter .white-border {
border: 1px solid #fff;
}
.newsletter-wrap {
background: url(images/enews-ribbon.png) no-repeat top left;
margin: -17px -18px;
overflow: hidden;
padding: 45px 30px 40px;
text-align: center;
text-shadow: 1px 1px #fff;
}
.newsletter-wrap p {
margin: 0 50px 20px;
text-align: center;
}
.newsletter-wrap input[type="email"] {
-moz-box-shadow: 0 0 5px #ccc inset;
-webkit-box-shadow: 0 0 5px #ccc inset;
background: #fff url(images/enews-subbox.png) no-repeat center left;
box-shadow: 0 0 5px #ccc inset;
font-family: 'Open Sans', sans-serif;
margin: 0 -7px 10px 0;
padding: 13px 0 13px 37px;
width: 55%;
}Conclusion
Both of these methods were taken directly from my custom themes, so they should work. As I mentioned above, there are a number of different services that you can use, so it’s hard for me to go through each one.
I’m happy to help as time provides if you run into any issues.
Below is a list of helpful articles regarding Email Marketing:
Thanks for this Brian – I’ve just switched over to the Generate theme and am loving it but was wondering about how to get an optin box like yours implemented.
I now need to figure out how to wrestle some Aweber code into your sample as it’s a lot messier than what you get from Mailchimp. Any suggestions would be appreciated!
More than likely they have stuff a bunch of extra/unnecessary markup in the code they provided. Feel free to reply back with the code they gave you and I’ll see if I can make sense of it.
Would love to know how to set this up with the Aweber code. Here is the code for another optin that I have set up with Aweber. Appreciate your help!
Hmmmm… It is not going through. How can I get the code over to you?
You can’t paste the Aweber tag here, as that won’t help. That refers to some html code, which is what I’d need to help with this.
I was trying to forward the code that you had asked Jon to send (the basic code that they provide). Is there a way I can get that over to you? I appreciate any suggestions that you might have to get your optin to work with Aweber. Thankyou!
Thanks for doing this, Brian! Working on my redesign, so this is awesome timing.
I have the same issue with AWeber. Here is the code for a VERY basic form:
#af-form-237106348 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-237106348 .af-body input.text, #af-form-237106348 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-237106348 .af-body input.text:focus, #af-form-237106348 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-237106348 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-237106348 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-237106348 .af-quirksMode{padding-right:15px;padding-left:15px;}
#af-form-237106348 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-237106348 .buttonContainer input.submit{background-image:url(“http://forms.aweber.com/images/auto/gradient/button/ccc.png”);background-position:top left;background-repeat:repeat-x;background-color:#acacac;border:1px solid #acacac;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-237106348 .buttonContainer input.submit{width:auto;}
#af-form-237106348 .buttonContainer{text-align:center;}
#af-form-237106348 button,#af-form-237106348 input,#af-form-237106348 submit,#af-form-237106348 textarea,#af-form-237106348 select,#af-form-237106348 label,#af-form-237106348 optgroup,#af-form-237106348 option{float:none;position:static;margin:0;}
#af-form-237106348 div{margin:0;}
#af-form-237106348 form,#af-form-237106348 textarea,.af-form-wrapper,.af-form-close-button,#af-form-237106348 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-237106348 input,#af-form-237106348 button,#af-form-237106348 textarea,#af-form-237106348 select{font-size:100%;}
#af-form-237106348 select,#af-form-237106348 label,#af-form-237106348 optgroup,#af-form-237106348 option{padding:0;}
#af-form-237106348,#af-form-237106348 .quirksMode{width:195px;}
#af-form-237106348.af-quirksMode{overflow-x:hidden;}
#af-form-237106348{background-color:transparent;border-color:transparent;border-width:1px;border-style:none;}
#af-form-237106348{display:block;}
#af-form-237106348{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
Okay, I think I figured it out. I’m no CSS or programming expert, so please check the code if you use it. Note that I’ve specified in areas where you need to enter code specific to your newsletter.
Sign up for my Newsletter
Receive WordPress tips and learn how to customizethe Genesis Framework with detailed tutorials.
Sorry, don’t know how to paste in the code and have it display.
Hey Jon, I am interested to know what you did with the code. I have a client who needs me to get this installed with her Aweber account. I know you cannot copy and paste the code, but maybe we can connect via email? If so, my email is Dawn(at)DPK-GraphicDesign.com Really appreciate it.
DAWN
Hey Jon & Dawn – I’m also interested in knowing about how to integrate this with AWeber. Can you email me directly as well? jen [at] jenmazer [dotcom] Thank you!
Hey, I was going to ask someone this as well. What timing! Thanks for the info, Brian.
Perfect. Looks the business too. Now to force it to work with Campaign Monitor – shouldn’t be too difficult…
Thanks Brian
I’ll give this a go over the weekend – fingers crossed.
Awesome! Just did it and it works like a charm! Thanks so much!
Brian,
Your awesomeness is, well, awesome. Hey, how would the registering and code change if you were to put this opt-in box between paragraph 1 and 2, and 2 and 3 of an “about” page, like Derek over at Social Triggers recommends?
You’ll need to add CSS that looks something like this:
.home-middle-1 {
float: left;
margin: 0 20px 0 0;
width: 150px;
}
.home-middle-2 {
float: left;
margin: 0;
width: 150px;
}
.home-middle-3 {
float: right;
margin: 0;
width: 150px;
}
Works like a champ on Mailman too! Better than the plugin I was messing with.
http://halfelf.org/hacks/mailman-newsletter-widget/ is what I did
Thanks for the code and tut; I always wondered how to do that as most people have it.
It was easy, except for configuring the ‘Sign Up’ button. I did it eventually, anyhow, though it’s not perfect – but I’ve a sign up box after the posts! Hurray!!
The way I’d do it would be to add this to functions.php:
add_action(‘genesis_before_comments’, ‘add_before_comments’);
function add_before_comments() {
require(CHILD_DIR.’/under-post.php’);
}
And then create a “under-post.php” file in the child theme folder with the form HTML copied from AWeber or MailChimp pasted in there. And then spend 2 hours fiddling with the CSS!
But, your way means you can do it with a widget.
Yeah, it can definitely be done either way. As a neat freak, I prefer to avoid adding more files to my theme, and figured this was just as easy.
Thanks Brian for this! Would this work at the bottom of a page too?
Is this a dumb “Non-Coder” question with an obvious answer?
Thanks for sharing, Brian – I just implemented this on one of our sites using aWeber. We already have a newsletter signup form in the sidebar, and that forms conversion rate was ~4.7% (of unique displays).
Very small sample size thus far (implemented early this a.m.), but this form looks like it will convert a lot better (so far, 7.9% of unique displays)
Woohoo! That’s great news Bryan, thanks so much for sharing!
Hey Brian, if you manage to take apart the AWeber code (of course you will!), could you post the stripped down version here (or in another post)? It sure would be a big help! Thanks so much – always love your tips (and I use them too!).
I’ll see what I can do. The problem with helping folks how to do this is that a lot of cases the code is custom. In other words, use case.
This is exactly what I was looking for my new blog with the Streamline Theme. Luckily, I’m using Mailchimp. Thanks Brian. This blog and the great support is why I’m transferring all my themes to Studiopress.
I tried it but it doesn’t look like shown in picture above and how to put in above comments section as shown in the article.
I’d need to see it in action. Can you provide a link?
mine doesn’t look the same either. none of the images are appearing.
I added them to the themes folder. I noticed the background image doesnt even seem to be in those files.
Please help.
http://thenerdynurse.com/2012/06/iphone-more-loved-than-facebook-infographic.html
Ok. It took a few days for it to work after I uploaded the files to my FTP. I am wondering if this has anything to do with my CDN.
Dunno, but good to know you got it worked out!
Thank you , Brian for these tips! I will try to implement it on my blog over the weekend.
Wonderful Brian when I saw it in your blog I just love it, I was expecting something like your optin box. Thank you for the code
Sweet! Thanks Brian, I have been waiting for this tutorial. Good stuff!
Hello Brian thanks so much for the tip and it work like a charm.
I have one question can I also add this enews to my about page?
Would this work to put at the bottom of a page too?
Thanks so much for your help, Brian! Invaluable.
I now have three boxes at the bottom of each blog post: Newsletter Box, Genesis Box and Author Box. I’d like to change the order of the three and have the Author Box either first or second. How would I go about that?
Hi Jon
I have the Genesis box at the bottom of my posts and was wondering if adding the Newsletter box would be too much, but it looks pretty good on your site.
I might give it a go.
Thanks, Keith! Just launched the redesign with the Genesis theme, so happy to hear you like it. I think the three boxes might be a little heavy, but if I can at least change the order I’d be much happier with it.
Yes, thought your site looked great – your logo colour even matches the colour of the sign – up box.
A nice coordinated detail.
The author box looks right being at the bottom and in all honesty, I thought the order you had them in was fine.
Are you looking to drop the sign-up below the Genesis box?
Brian provides the PSD for the newsletter images, so that’s how I was able to coordinate.
I was thinking that it made most sense to have the author box and newsletter box first and second (in no particular order), but maybe not? Just seems those would be most relevant, though the Genesis box would drive direct revenue.
Forgot to say… like the way you added the sign-up box into the content of your post.
A bit of lateral thinking.
Yes… the Genesis box is for revenue… hence my reluctance to give it competition with the Sign-up box.
Can’t make my mind up???
I have a question unrelated to this post, but it’s related to Genesis so hopefully someone can help. I just switched to Genesis last week, and I can’t get my home page to share properly to Facebook. All other pages are fine. But for whatever reason, Facebook won’t properly read the title or description. I’d also love to assign an image for the home page.
My site: http://jonloomer.com
Any suggestions? Would be much appreciated. Thanks!
Awesome. Great tutorial and very easy to follow. Looks fabulous on my blog posts!
Nicely done Susan!
Oops……It is not working on my Genesis News Theme (I’m new at coding). Even my site not opens saying some error. Finally i uploaded fuctions.php file form file manager and problem solved
Hi Brian, thanks so much for this. I’m going to try and butcher it to add a donate ‘offer’ at end of all posts on a fundraising site I’m working on for a community campaign. Can’t see why it wouldn’t work… Linda
I don’t see why it wouldn’t work either. Conceptually it’s the same thing – just different course of action.
Hi Brian,
I added the newsletter sign up box on April 19 and thought the task was done and complete, until today a visitor pointed out that it isn’t working (dumb of me not to check if it was working – the visitor gets a message “The feed does not have subscriptions by email enabled”). I used the Firebug and found the problem is basically that my full feedburner address is coming in the “onsubmit” and “input” values, whereas it should only come as “Aha-Now”, which is the name for my blog feed. I want to rectify this problem. Can you please tell me where and how can I edit the relevant code? Many thanks!
Hi Harleena,
What is the email marketing software that you are using?
Hi Brian,
Thanks for the code. I put it on my website based on Eleven40. I am using MailChip and I had uploaded the images, but was missing the orange banner. FYI: I changed the CSS to point to enews-ribbon.png instead of newsletter.png since I like the ribbon.
I was wondering if you could help to provide the code to put Mailchimp sign up for the Secondary SIDE BAR. Currently I am using JetPack – RSS subscription and would like to put MailChimp there… You can see what I mean at my website: http://buddhist-meditation-techniques.com I am not a programmer…;-)
Your site looks great, Spencer. Nice design and great content.
Thanks Jared for kind words. I am new to blogging and learning a lot from Brian.
Update: I figured out how to put the sign up in the Primary Side Bar by using the sign-up form in MailChimp and putting with the Text Widget. So it is done.
Hi Brian,
This solution is exactly what I was looking for. Many thanks to you.
Sorry to bother you, but I noticed something you might want to check out.
Everything’s fine, but I get the following problem in ‘Step 2′.
I get this error ‘Call to undefined function genesis_widget_area() in functions.php’.
I copied the ‘php code’ from ‘step 1′ and ‘step 2′ into functions.php which is inside my child theme. The first step registers the widget and it shows at my sidebar. However, in step 2, I get the above error. Do you have any idea why this is happening.
Thanks for your hardwork!
I should start by saying that I know absolutely nothing about coding
I followed your tutorial and I was able to add a subscription box to the bottom of my post, but none of the graphics are working. I am sure it is a simple fix, but I can’t find it. I would love any advice that you may have to help me with this. (Please excuse my site, it is under major construction)
Also, I would love if you could tell me how to move the subscription box to the bottom of the post, above the share widget and similar posts. Thank you so much for this great tutorial, and for any help you might be able to offer.
Hm, in this line of code, try changing this code:
add_action( ‘genesis_after_post_content’, ‘custom_theme_newsletter’ );
To this:
add_action( ‘genesis_after_post_content’, ‘custom_theme_newsletter’, 5 );
Just wanted to make sure you saw this piece from the tutorial:
You’ll also want to download the graphics and place them into your child theme’s /images/ directory.
Let me know if you did that as well.
Having a widgeted area after the post is really handy. I think I’ll be using it for other things besides a sign up box as well. Thanks a lot!
Dear Brian,
many thanks for your great work!!
Just a quick question: how to redirect the page of subscription on a blog page as in your blog? (you point to http://www.briangardner.com/newsletter-confirmation/ )
If i push “subscribe” I’m redirected to Mailchimp mailing list.
Thanks a lot.
That’s a setting inside Mailchimp that you need to look for.
I have managed to use this with Aweber with no coding issues. Not sure what issues others are having but if you place the code into a text box in the Newsletter widget it works fine. You can see my results here: http://ginastorr.com/3-must-have-automation-tools on any of my blog posts. What I did have an issue with was using the custom CSS code since I it seems that the download did not include all of the images? Or did I miss something? In any event, I am simply using the AWEBER code but would love to use Brians. Any ideas?
Hi Gina,
I am not sure if you got this figured out, But you can try checking the image names and the names of the images used in the custom css. Most likely they are different. That is the reason you are not able to view the images on the output.
Does this guide could be used for prose 1.5? I’m using that theme on my blog and it comes with an after post widget… thanks for the help!
I downloaded the image zip file but none of the newsletter images are there. Only those of the enews widget. How can I find the right images?
Hey there Brian,
Great tip and tutorial, thanks! Just implemented it on my site:
http://dannybrown.me
Quick couple of questions, please?
1. How can I edit the ribbon colour to be the same as my theme main colour? The HEX is: #B34D00
2. When on the blog index and single posts, the CSS has affected those sign up boxes too, and they’re overlapping the side column:
http://dannybrown.me/blog/
http://dannybrown.me/2012/06/04/fear-is-not-something-to-be-afraid-of/
Any tips on resolving that? And I’m guessing the colour of the wrap (if it can be changed to suit my theme colours) will be changed on the single posts too?
Cheers for any help!
Danny.
Hey Danny – sorry for the delay in response, for some reason your comment was flagged as spam.
As for editing the ribbon, you’ll have to grab the psd file that’s included with the Focus theme, and then modify it and resave it as an image.
For the other issue, did you get that fixed?
Hi mate,
No worries, probably the links in the comment.
I thought it would be the PSD file – I’ll speak with one of the designers at our work and get that done.
With regards the other (box outside the sidebar), nope, still happening:
http://dannybrown.me/blog/
See how the Search box is overlapping the edge of the sidebar? I’m guessing i just need to edit code or drop some CSS in, just unsure of what that would be.
Cheers, mate!
Looks as though you solved it Danny because I copied a few lines of your CSS and it worked for me.
http://www.wmwebdesign.co.uk/video-for-the-genesis-theme-framework-for-wordpress/
Still trying to work out how to get the signup box only on posts of a certain category.
Any help out there?
Kieth,
Have you tried using the is_category() function?
In the place of is_singular() below.
/** Add the newsletter widget after the post content */
add_action( ‘genesis_after_post_content’, ‘custom_theme_newsletter’ );
function custom_theme_newsletter() {
if ( ! is_singular( ‘post’ ) )
return;
genesis_widget_area( ‘newsletter’, array(
‘before’ => ”,
) );
}
Hi Eddie
Yes I tried that but no joy.
In the original code, the line if ( ! is_singular( ‘post’ ) )
Has a ! included, which means “is not” so I’m confused with the original line.
Thanks for your suggestion.
This is one of the most useful Genesis tutorials because the widget after the WP post is such a useful feature. You can put there anything, from opt-in forms to pictures, recent posts or a sales pitch…your imagination is the limit.
I was quite sad when the old Focus has retired because it had double-widget at the bottom of articles but with this tutorial you can add the widget to any theme.
This and the Home Featured widget you can find on some StudioPress themes are some awesome features of the Genesis framework.
Hi Brian
Rather than show the signup box after every post I’d like to show it on posts for a particular category… category is “genesis videos”
How would I add the box only on posts of that category?
Brian–thank you SO much for this! I’ve been scratching my head over it all day–should have just come here first.
Easy as pie and now it’s done and looks great.
Thanks again!
@Brian, 2 questions:
1. how did you get the twitter button in there? When I try, all I see is the javascript/html code in the newsletter box
2. the bottom is cut off, how to fix?
Thanks,
N
Got a link to the site so I can see it in action?
Hi Brian,
Great tutorial, got it all figured out, except for how to embed the twitter follow button into the signup box like you have. It seems the enews widgets strips all javascript code when I place it in. Been struggling with this for hours, I know it’s a simple thing I’m missing. Thanks in advance!
-Ben
Ben,
I also want to know how to get the twitter button in there too.
Then it’s a pretty good thing that I’ve written a tutorial on how to do that.
Yes I’ve seen that tutorial, but it doesn’t explain how you managed to get the code to actually work, because put into the enews and updates widget, the javascript is stripped upon saving and won’t render. Any suggestions would be much appreciated.
-Ben
Ben,
I used the following code:
/** Add the newsletter widget after the post content */
add_action( ‘genesis_after_post_content’, ‘custom_theme_newsletter’ );
function custom_theme_newsletter() {
if ( ! is_singular( ‘post’ ) )
return;
genesis_widget_area( ‘newsletter’, array(
‘before’ => ”,
‘before’ => ‘Follow @bgardner
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);’
) );
}
Thanks for the response Alex.
However this code seems to break my site, is there something that is supposed to go into the ‘before’ => “, line.
I just can’t get this working for the life of me.
I guess i’ll try creating an include file and calling the file from the php script. This has become such a waste of time, yet I need to see how this works.
Ben,
What was easiest for me, was to actually just put the newsletter widget in a widget area. Then I used firebug for firefox to copy the HTML that made up the widget. With that copied, I went back to the widgets area; removed the newsletter widget; replaced it with a text widget, then pasted the code that I copied from firebug. After that I was able to copy/paste the twitter follow button code into the appropriate place in the text widget.
Not sure if this will all show, but here’s the code that I copied from the widget via firebug:
Get Updates in Your Email!
Online Dating, Sex and Relationship Advice Tips in Your Inbox… (Inbox is NOT a euphemism here)
Follow @theurbandater
Thanks Alex,
That’s a good idea, i’ll give that a shot.
Very helpful. Even for a coding rookie, you got me through it. Really appreciate it.
I am late to this party.
We have a Newsletter signup box at:
http://www.belize.com
Do you have a code for the code challenged to use your solution for iContact?
Something we can cut and paste into a text widget?
Finally! I added this box to my site months ago (by recreating the enews box and renaming it “mailchimp”) but the white border would align outside instead of inside the box and now I can fix it. I was really bugging me.
thanks!
Thanks for this, Brian. I implemented it on my site and it looks great! Now, to start blogging…
Awesome Jeni, well done!
How do i how to Place the News and Updates widget into the Newsletter widget area??
You need to go to the Appearance > Widgets screen in your dashboard to do it.
Thanks for the extreme tutorial. I will implement this right now.
Brian! Works like a charm! Thanks for such a great solution for signing up. I use MailChimp, too, and now each post on my site has that great sign-up box following it.
Couple things needed to be tweaked — I’m only mentioning this for the non-coders (like me) to save them some frustration:
1 — need to rename the .png files to match the code in the css section (step 3). For example, rename enews-subbox.png to newsletter-box.png. In any case, make sure the filenames are the same so the cool ribbon shows up and the email graphic appears.
2 — need to add that css stuff into the style.css for your child theme. At first I couldn’t figure out where it went! Only reason I’m mentioning it here.
3 — the last section of that css needs to be slightly tweaked to have the email input box be the same height as the “sign up” button, otherwise it looks a bit off-kilter. In case the code doesn’t paste below, the padding values should be 10px instead of 13px. I also removed the box shadow (made it 0px).
.newsletter-wrap input[type="email"] {
-moz-box-shadow: 0 0 0px #ccc inset;
-webkit-box-shadow: 0 0 0px #ccc inset;
background: #fff url(images/newsletter-box.png) no-repeat center left;
box-shadow: 0 0 0px #ccc inset;
font-family: ‘Open Sans’, sans-serif;
margin: 0 -7px 10px 0;
padding: 10px 0 10px 37px;
width: 55%;
}
Hello Brian,
I followed your instruction, it works great! But I have a question, how do I remove the styling from the enews widget when it’s added to the footer area but keep the styling on the posts!
Thanks,
chrissie
In front of all the declarations in the CSS above, add #content to make it more specific.
Hi Brian, this is fantastic! Unfortunately I am having problem. I put the code in and the sign-up box works fine, however it moved my primary sidebar to below the comment section, any help is appreciated I am using the copyblogger theme
Luke, check your markup – it’s possible you have an extra or possibly you omitted one by accident?
Hi Brian, thank you so much for this! I’m trying to implement it but am having a problem. Namely, the graphics are not showing up. I *believe* I did load them via FTP to the appropriate place. Could it have anything to do with using Prose? I put the CSS and functions in the Genesis Custom Code as Prose explicitly says not to edit in the child theme.
The CSS shouldn’t go in the Custom Code box, rather at the very bottom of the Design Settings page where there’s a Custom CSS box.
Hi Brian,
I’ve just changed over to the Feedblitz service after the recent news about Feedburner possibly going away.
Is there a way I can drop their code into the theme CSS to continue to use the eNews widget without Feedburner?
Enter your Email
Preview | Powered by FeedBlitz
function FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819i(){var x=document.getElementsByName(‘FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819′);for(i=0;i<x.length;i++){x[i].EMAIL.style.display='block';
x[i].action='http://www.feedblitz.com/f/f.fbz?AddNewUserDirect';}}
function FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819s(v){v.submit();}FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819i();
Thanks!
Oops – I meant this code (hopefully it shows in its full styling)
Enter your Email
Preview | Powered by FeedBlitz
function FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819i(){var x=document.getElementsByName(‘FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819′);for(i=0;i<x.length;i++){x[i].EMAIL.style.display='block';
x[i].action='http://www.feedblitz.com/f/f.fbz?AddNewUserDirect';}}
function FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819s(v){v.submit();}FeedBlitz_cfd3ffd2e2f011e1955f003005ce8819i();
Hey Danny, man – again your comment got marked as spam and I just saw this now. Did you find any resolution?
Brian,
Your tutorial is flawless, common sense and reading through it just took my site up another notch. Thank you for this insightful tip. I use Prose also and placed the CSS in the custom code box before I read each comment. What is the difference between the custom code box and the design settings page?
The Custom Code box is for custom CSS, PHP and functions while the Design Settings page is for granular control.
Thank you for this tutorial, Brian. You rock! I was looking for a better way to add a newsletter form and this is perfect. Your instruction was very easy to install and customize. Though, I cannot figure out why my white-border doesn’t display. Looks great on my new Mocha theme (even without the white-border).
http://SweetnessOfLife.com
And love your remodel!
For some reason you have a weird character in your code. Here’s what I see in the source:
You’ll notice that is should be this:
Oh my gosh what a silly error! Thank you for taking a peek and noting the weird code, Brian.
I found just one other issue: my newsletter-wrap/background repeats once when viewed in IE. I’m a MAC user so I never looked at IE until someone brought it to my attention. Another silly error on my part?
You can see it here:
http://sweetnessoflife.com/wp-content/uploads/2012/09/IE-Newsletter-SweetnessOfLife.com_.png
Apparently, IE messes up my entire single post pages. I’ve posted on the StudioPress Forum requesting help with this.
Hm, weird – honestly don’t know why that would be happening.
I know this is an old post/tutorial, but I was wondering if someone could help me put a nice box where my stripped-out subscription calls are on my About page:
http://tangerineturtle.net/meet-magz/
I have the option to subscribe twice on the page and would like a more professional looking box for them.
Thanks so much!
This is what I really want, now no necessary to use plugin for this. Thanks.
Hello Brian, I’m facing one problem, I want add newsletter widget in primary sidebar and below post, because we’ve applied CSS considering it’ll show below post, so it’s not showing properly in primary sidebar. How to apply different “div” or “ids” for NewsLetter below post? In second code snippet you’ve used “newsletter widget-area” id but in CSS you’re using different ids? I didn’t get this so unable to add NewsLetter at both places, any help?
Thanks Brian, it looks great on my site. However, when I checked the mobile version I notices that it looked awful.
When I tried your mobile version, I did not see the box. Is there a way to make it look good on the mobile size? If not, how can I move the box to the side bar?
Thank you much
Awesome post. I am going to add this to my blog right away.
Cheers!
Christian
Great post Brian. I tested it but it’s not responsive on iphone. How can I do? Thanks
There’s some CSS that would need to be involved, primarily because some things currently are fixed width. It’s hard to write all all that would be involved, perhaps when I have some time I can update and repost this with the new CSS for responsive.
I know I’m a little late to the party…the coding working fine and the box displays but for some reason I can’t get the ribbons to come up on the top left corner. Any particular reason why?
The integration process was like magic. It works perfectly. However, I still have to research on how to integrate social buttons there. Not just twitter but maybe also fb, pinterest and more.
Great tutorial Brian.
Hi Brian,
Thanks for your post.
Love the solution of placing a widget for an “after-each-post” opt in box.
Still fiddling with two issues though, using infusionsoft and not the enews.:
1. My opt-in box ends up being resized in the after post spot as if it was sized for the sidebar
(if I use the feedburner and enews, then I get the pretty sign up box with ribbon and all, but I want to utilize infusionsoft and I wish to capture a first name too).
2. My opt-in box in the sidebar ends up not filling out the area, such as shown in your theme demo (guess I need to fiddle with the padding or margin somewhere – just wish I knew where)
Will fiddle some more, but perhaps I’m lucky and you might have an answer to my troubles soon.
Best regards
Mikkel
Just remembered I also need to find out how my “read more” links on footer and elsewhere becomes just highlighted text instead of button.
The button is too big and kinda ruins the look, so I rather have the orange text like the standard links of this theme.
Best regards
Mikkel
Hi Brian,
I’ve been trying to setup the Newsletter opt-in box, but for some reason the “newsletter.png” image is not included in the zip file. So the CSS rule doesn’t load the opt-in box correctly. Right now I only have text and the sign-up button, but no layout is showing up. I’m assuming it’s because the CSS rule can’t find the newsletter.png file in my /images directory. I’ve uploaded the ribbons no problem.
Can you please let me know where I can get a hold of the NEWSLETTER.PNG file?
Thanks!
Well, it looks like playing around with the code for a bit longer seems to have somewhat fixed it, all that’s missing now is the ribbon… and the way the Opt-in Box and the Sign-Up button align. But given it’s coming from Aweber, I may just have to play around with it even more.
Hi Wayne – I’m having the same problem. It seems that the Newsletter zip file has the Enews images. Did you ever sort out how to get the Newsletter.png, etc.?
Try changing the CSS in the following:
To this:
Thanks. Looks like it worked once I made that change and also changed:
images/newsletter-box.png
to
images/enews-subbox.png
in the CSS.
Wow, I am not sure what I am more impressed, the quality of the article or the number of comments. Thanks for sharing.
I have created my own version of adding a newsletter sign up boxes at the end of each post for Aweber forms. Its is a much more simplistic method than your approach and works without the Genesis Framework. I called my little creation Simple Aweber Integration.
Brian, just a quick question…
I added the first two sections of code, and it went well(without style and color, of course)…
Then after adding the third section of Newsletter Box code(for color and style) I did a refresh of my a post to see if the changes had take, my sites post has vanished!
I still had the theme editor open, so I removed the code.
Also, I had multiple posts(tabs) open , and each time I refresh one, my posts disappear….
To top it off, I checked my access to my site via search and via my hosting account, in both cases they are not accessible(there is just a blank page(white browser page)….
This all happened after adding the third piece of code!
If there is anything you could think off that may have caused this, and any repair suggestions, this would be greatly appreciated.
Many Thanks,
Danny
Brian
Thanks for your assistance in advance….
Eureka ! Every thing is fine now and I’m back in action……
I went into my Hosting account File manager then to the appropriate theme “functions php, and after deleting the ” newsletter code “sever side, everything is up and running….
I think I may have entered the last piece of code with incorrect formatting(something missing or additional)…Whatever I did, it threw a temporary spanner in the works!
I will latter re-enter the first two pieces of code to get the newsletter up and running, and possible do my own color/ style changes instead of using the third piece of code above…
Many thanks,
Danny
Thanks for explaining in detail. I have successfully added a subscription form after single post and its working fine. Kudos.
Hi Everyone,
Super newbie question here: Do I place the code from steps 1 and 2 ANYWHERE in the functions.php file???
Thanks!
Ryan
Yes, just make sure it’s after the opening < ?php code.
I will be showing my ignorance here…where do I find my child theme functions.php file?
Inside the theme folder that you currently have active on your site.
Awesomeness… thank you so much!!!
I’m trying to download all the images for the newsletter champ version but can’t seem to find the images/newsletter.png its not in the download any suggests?
Derek, sorry about that – the CSS has been updated to reflect a mistake I made when copy/pasting code. The images are there – I just them named wrong in my tutorial.
Hi Brain,
great article. You got amazing tutorials. I just wanted to know how to add mailchimp signup form in sidebar of copyblogger theme?
I searched for it but never found satisfactory result.
Please guide me.
Hi Brian. Just a quick heads-up: With the latest Genesis Update (1.9) the Newsletter widget is sadly no longer available. However it is possible to put it in the “After Post Ad” area.
I just wanted to point this out, because this line in your article:
“Place the eNews and Updates widget into the Newsletter widget area”
…is no longer accurate. Still an awesome guide, many thanks!
Thanks for pointing this out — hopefully folks who follow this tutorial will see the notice in the widget with a link to download the new plugin.
I was wondering if you can use the same technique like the one described above to add a widget area BEFORE the article in which to put whatever you like? I mean I’d like to add a widget area above each post to use it for a custom slider, etc, etc.