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.
Last month on StudioPress we announced that Genesis 1.9 will be deprecating the eNews and Updates widget that we include in our core framework. One of the biggest complaints and suggestions about our current solution was that it only supported Feedburner.
Genesis eNews Extended Plugin
I personally reached out to Genesis developer and community member Brandon Kraft about the Genesis eNews Extended plugin that he built. Thankfully, he agreed to develop and maintain the plugin which includes support for many email marketing providers.
Among those currently supported are FeedBurner, MailChimp, AWeber and FeedBlitz.
Simply follow the steps below, and you can add a newsletter signup box after your blog posts. With the Genesis Framework, you’ll be amazed with just how easy this is to do.
Below is all the code you’ll need — it includes two functions and some styling. Obviously you may need to add or change some of the CSS to match the look of your website.
Using the eNews Extended Widget
Now that you have your newsletter widget area registered and hooked after the post, you’ll want to grab the Genesis eNews Extended plugin and upload and activate it.
Head on over to the Appearance > Widgets screen in your WordPress dashboard and find the Genesis – eNews Extended widget and place it into the Newsletter widget area.
Make sure you fill out the widget options panel, where you can specify a widget title, text to show and a the other fields which might be required by your email marketing provider.
Building Your Email List
Now that you’ve successfully added your email newsletter signup box after your blog posts, it’s time to focus your efforts on email marketing and building your list.
Below are some additional articles on email marketing that you might find helpful:
Nice tutorial Brian. I tried it out. I didn’t think it fit well with my current design but it’s a great plugin.
Hi Brian – Nigel Merrick here from Zenologue
This post was very timely indeed! I just bought the “Minimum” theme yesterday, and have been customizing it for my site, and was wondering how you were able to get that nice email sign up box in here
Want to let you know that it works just great, and I have it configured to work with my iContact sign-up form without any customization being necessary to the plugin.
Great job, and I’m loving my new theme!
All the best to you.
Nigel
Hey Nigel – that’s outstanding to hear – thanks for letting me know!
Nigel,
Could you let me know how you’ve done it? I’ve also got my list with iContact.
Thanks.
Maria
Hi Maria
Sure, for iContact integration, this is what I did:
In the “Form Action” field I put: https://app.icontact.com/icp/signup.php
The email field is: fields_email
Then, in the hidden fields, I added this:
You’ll need to replace some of the values in the code above for your own values etc. and you might not need the “formid” field.
Hope that helps!
Nigel
Well, that seemed to have removed my code for the hidden fields, so let’s try again…
The hidden fields should be:
You’ll need to remove the spaces I added after the “”
Brian – Sorry, you should probably remove those weird-looking comments. I was trying to put the codes for the hidden fields, but it keeps stripping them out.
My theme doesn’t have the options you mention. I’ll keep looking for a solution. Thanks.
Hey Brian,
Maybe it’s just me, but I never really get a lot of signups from this method. Most of mine come from my blog pages and links throughout my posts.
Actually almost all of my signups come from directly advertising my squeeze page (landing page), but that’s a different story. Still, I really like the styling of this box!
Thanks for the tutorial,
-Gabe Johansson
Obviously different things work for different folks – depending on what your goals are. Since I don’t have a need at the moment to build landing pages (though if I did I most certainly would build them with Premise), a simple “hey, drop your email if you’re interested in what I have to say” really suffices.
Great tip Brian.
Before I implement it I would like to know if this widget is mobile responsive?
Thanks for all the great tips.
Eddier Naranjo
Yes, the % you see in the CSS allows for this to respond within the theme as long as the theme itself is responsive.
Nice to hear that, this is mobile responsive too, can we add signup box at both the places – in widgets and below post?
Great. Thanks a lot.
Hi Brian
I’m using mailchimp, any suggestions on how to add the field to enter the name on top of the email field?
Thanks
Hi Eddier,
Check out the latest version of the enews extended plugin–it adds the name fields options. For MailChimp, typically you’ll want to use “FNAME” (w/ no quotes) in the settings for the first name field in the widget. (Your’s may be different, but works for me!)
Super excited by the extended enews pluggin.
I’ve found they opposite to be true. of course my squeeze pages and popup gets the most conversions, but theres definitely been an increase in my subscriptions since implementing the signup form after my blog posts (thanks to your help in getting the form to work with my mailresponder after your first tutorial).
My clients always ask about how to do that so I’m thrilled by this new update.
Thanks, Brian!
Yeah, the “Feedburner only” thing was really getting under my skin, so I’m thrilled that Brandon started work on that plugin. Good stuff for so many people that’s for sure.
I need to get signed up with MailChimp. I think I’ve told myself that about 50 times, and have resorted to sending myself reminder emails and calendar notifications. Thanks for another reminder!
Hi Brian,
I guess this works with any Genesis theme which is good. Some themes don’t have an “after post” widget built in and this actually builds that widget area. I was wondering if there is possible to add two widgets areas under the posts like in old Focus theme?
Can I ask you a question? How did you built the “subscribe” menu button in the header? It’s very effective I guess.
Thanks for the update on this one Brian – going to be even more signup boxes out there.
Another cool tip Brian. Keep it coming. Thank you very much..
Hey
As always, easy to implement.
Might be better to choose another widget id for the example because ‘newsletter’ is already used in Streamline (and might be in others current or future themes).
For streamline users, there’s a simple fix, just replace ‘newsletter’ with ‘newsletter2′ or anything else in Brian’s code above.
Good suggestions thanks for that.
The plugin is a great addition. I was just messing with this on a test site over the weekend based off your original newsletter signup post. And it worked great…unless you’re using the enews plugin in multiple places.
I guess the question is – is it possible to make it newsletter widget specific? Thanks for the timely update!
That’d be something I suggest you ask Brandon Kraft about, since he’s the author of the plugin.
Do you mean customize the styling based on where the widget is being dropped in? You can change multiple instances in CSS.
To give you an idea, check out http://sp.brandonkraft.net – it has two enews-ext widgets in place (styled the same, but picture them being different). If you view the source on the page, you’ll see that the first widget is wrapped in a div id=”enews-ext-2″ and the second in a div id=”enews-ext-4.
You can customize it by adding #enews-ext-2 or #enews-ext-4 before it, e.g. using #enews-ext-2 .enews { instead of just .enews.
Your ids would be different, so my suggestion is have your CSS figured out elsewhere, add the multiple instances of the widget, check out the ids, then add the #enews-ext-XX selector to the right CSS.
Thanks so much for this tutorial and for arranging for the plugin to work across more platforms. I’ve needed this for several blogs for so long. I always intended to modify your previous tutorial to work with AWeber, but now I won’t need to!
Hi Brian,
So cool thanks. How did you get the Twitter button in yours? Thanks in advance, Sam.
I just grabbed the HTML code from adding a Twitter follow button and placed it into the text widget.
Awesome, thanks so much Brian!
Ok, I just did that and I am SO satisfied
Any chance of adding Constant Comment to the plug-in?
That’s a question that you should ask Brandon Kraft, as he’s the one maintaining it.
Constant Contact already works with the plugin (and always has). Check out this from the plugin’s support forum:
http://wordpress.org/support/topic/constant-contact-tutorial
Thank you! I just moved to the balance studiopress theme and love it. This was so easy to implement!
Could you please share how you stylize your box? I can’t seem to figure it out? What files do I edit?
Great tip.. now if you can only get it to work with Campaign Monitor (http://www.campaignmonitor.com/) I’ll be a happy camper.
Tom
I’m pretty sure that has been suggested to Brandon, so we’ll see if it’s something he adds soon.
I’ve been told it works already (not a user myself).
Checking out the form on your site, the following settings should work:
form action: http://palmbeachgardenspolicefoundation.createsend.com/t/r/s/bdikyi/
first name field: cm-name
email field: cm-bdikyi-bdikyi
You’ll like need to change your .enews #subbox { line in style.css to .enews #subbox, .enews #subbox1 {
Cheers.
Hi Brandon,
I’ve done so, and it gives me an error from Campaign Monitor “an error has occurred. We apologize for the inconvenience” so I’ll contact them.
However, in my case, why doesn’t a signup/go/submit button show up?
Hi Elena,
I replied to the e-mail you sent me earlier. I need to see the HTML code as provided by Campaign Monitor to assist further. My guess is Campaign Monitor’s support won’t be in the position to assist.
You are right Brandon. I just sent you the code via email.
Thanks a lot for your help!
Brian,
I love the concept. I’m having trouble with the implementation though.
I am using the Streamline theme. This theme has an “After Post” widget area. I am already using the Genesis – eNews widget in my sidebar. I don’t want the same styling on both. How do I distinguish the two areas and only apply your CSS to the box after my posts?
Hey Ian – sorry for the delay, your comment got dumped into spam for some reason. In Streamline, you can target that specific location by using .after-post before your .enews declarations in CSS. This will make it more specific.
Does that make sense? It’d look like this:
.after-post .enews {
background-color: #f5f5f5;
}
What if I wanted it to display on particular pages? not posts…. I tried modifying like this:
/** Add the newsletter widget after the post content */
add_action( ‘genesis_after_post_content’, ‘custom_add_newsletter_box’ );
function custom_add_newsletter_box() {
if ( is_page( array( 12, 14, 16, 248 ) )
genesis_widget_area( ‘newsletter’, array(
‘before’ => ”,
) );
}
like found here for the is page array… but I keep getting errors and having to reupload the original functions. using associate theme.
forgot to tell it to notify me
How do you add the ‘Subscribe’ button on the header bar?
That was done with some custom Javascript, and not that easy to explain in a comment.
Just so I get notified of your response!
Thanks Brian for the priceless tips!
Hey, Brian…I have installed Brandon’s new eNews widget and I use the eleven40 theme which has a widget called “After Post,” so….is this tutorial pretty much not needed for me? Thanks!
Hello. Will this work for non genesis themes? And if not can anyone recommend an email newsletter option that is easy to implement and looks/works just as good as this one? Thanks.
No, unfortunately with this method it won’t.
Ok. Thanks for the reply Brian.
Looking for the same thing Derek! Did tons of google searching, this was the only thing that came up :/
I have a question, I followed all the steps. The sign bar does show up after my blog. How do you get a box to appear? Also the images I uploaded them in my themes images folder and they do not appear either? Can anyone shed some light please. Any help, or direction would be greatly appreciated thanks!
Thank you so much Brian. Was looking for something completely different but ended up redoing my signup box. Love it now. Even though I used to have it in the sidebar and that one doesn’t work anymore (the width is incorrect now). This is way better though!
Cheers,
Nicolas.
Great tut; used it on a client’s website: http://www.amiechilson.com
Is there a way to also add after page content, so that it shows up the same way on say, the about page?
There are hacky ways to do it, best to just drop your newsletter code into the page content itself.
Hi Brian,
I recently purchased the Prose theme for Genesis. The demo showed the Email Newsletter and form/signup field in the right sidebar. But when I activated the Prose theme it was gone (along with the social media buttons.) I looked through the widgets area and the only one I saw was for Feedburner. I emailed this question yesterday but haven’t received a response.
Found your post and thought I’d ask.
Do you know why I’m not seeing the Newsletter signup in Prose?
I would like it to appear in the right sidebar as well as below the post.
For below the post I can take your info and edit the code. In Prose it appears I have to use Custom code- CSS option to edit the code. Am I to be copying the same code you provided above in the Custom CSS window?
Thanks,
Deb
Hey Deb – sorry for the delay, your comment was marked as spam. Did you get this resolved?
Hi Brian,
Thanks so much for getting back with me. No my question hasn’t answered. I added your code and ran into a couple of quirky things with the signup box and other things. I can’t spend anymore time on this theme.
However, I just got an email from you guys at Copyblogger about the Metro theme -your theme
I’m going to purchase this and use it instead of Prose. It has all the features/widgets I want and mobile-responsiveness. Very Very Clean! Nice Job!
The only question is how would I change the theme color style? If you could send me a link to how to do this I would greatly appreciate it.
Thanks again,
Deb
Just as an FYI for anyone else reading through these comments. If you have any questions or suggestions for the eNews Extended plugin, please do check out the plugin’s site at http://www.brandonkraft.com/contrib/plugins/genesis-enews-extended/
If nothing on there helps, post a question in the plugin’s forum at
http://wordpress.org/support/plugin/genesis-enews-extended
I try to do a good job keeping up with requests in the forum… don’t use the contact form for support, trust me, you’ll get a response faster by posting in the forum!
Hey Brian ,
Thanks Man for sharing a amazing content here
I will surely apply to my blog as soon as possible 
Thanks for admin 
Hey Brian, thank you so much for this code, it helped me out a lot! Well sorta, after messing around with the styling so it fits my theme (lifestyle), it caused the right sidebar to wander off down below the comments, as if it didn’t have enough space…
For the time being I’ve removed it, but I’d like to bring it back. What might be causing that? Is there some sort of overflow I’m not accounting for, or something completely different?
Thanks!
Nick, sounds like the exact same thing that happened to me. Haven’t figured it out.
Hi Brian, I really thank you for posting this wonderful tip. I’m currently using eleven40 theme and the sign up box looks good for my blog. The only problem is with the text color as you can see it. A little dark color would do real good for my theme color. BTW genesis framework and child themes are super Cool. Visit my blog http://pcdigger.com and any suggestions would be highly helpful for me. Thanks again
Great post Brian Gardner, I was desperately searching for this since I upgraded my blog theme into Genesis. Now I too got a News letter subscribe box in my blog! Thank you very much for sharing this
Hi Brian,
How would I edit the code to have the signup box display after the content on my pages?
Thanks
Jamie
You’d have to replace the instance of this:
if ( is_singular( ‘post’ ) )
With something like this:
if ( is_page( ‘about’ ) )
I tried to add the first code listed into the bottom of my functions.php file and clicked update. Now my whole site crashed and I have no clue of what do do to fix it. I clicked the back arrow, and tried deleting the copied code for this function and resaving it back to the origional and it didn’t help. I was almost done setting up my page and making my initial posts and I screwed it up. I’m a complete wordpress newbie – using the Magazine theme, or I was, but all I get now is a white screen (of death?) Any help you can give me to get started fixing this would be greatly appreciated.
Got it fixed and working properly. Feeling like a wordpress ninja now. Thanks for the help.
Hi Frederick,
I got the same thing going on over here. Added the code, and got a php error. What am I doing wrong?
Thanks!
-Brian
Totally happened to me too. Now I get white screen on my blog and the admin pages so I can’t change anything! Hopefully my tech “team” (my hosting company rocks!) can fix it in the back end! Yikes!
Didn’t know any better not to put the php thingy there.
Such a novice, I am!
Looks like you’re all in the clear?
Make sure you’re not copying/pasting over the < ? php — that will already be at the top of the file and doesn't need to be duplicated.
Hi Brandon,
Yah, I left that in there. I pasted it right after that. And the error tells me that there is an error on the first line of my copied code.
-Brian
Hi Brandon,
Just wondering if you had any more ideas for me.
Thanks …
-Brian
Can you start a thread in the enews support forum? I don’t want to spam everyone here w/ the back and forth this may require. Please a link to your site too.
http://wordpress.org/support/plugin/genesis-enews-extended
Thank you for sharing this! It looks beautiful.
For some reason, I couldn’t get the styling to show until I added it to my CSS Stylesheet Editor. Instead of going to Appearance, Editor, then style.css.
I’m definitely a novice, but I put this code in and it downed my site. I overwrote (through Cpanel) the functions.php file with the original from my Minimum download, and my site is still down. If anyone’s out there, help please.
Nevermind, I got it figured out. Thanks.
OMG! You’re awesome. Thank you. It looks great! Very easy!
Thank you:) And I love your focusing on your writing! How do you add the follow me on Twitter?
Funny you should ask that, Tisa. I believe this is what you are looking for.
Thanks so much; but where exactly do I put it? I’ve tried many options, nothing is working yet.