How to Add a Newsletter Signup Box After Your Post in Genesis Framework

How to Add a Newsletter Signup Box After Your Post in Genesis Framework

How many email subscribers your blog has? Do you want to increase number of email subscribers? Then why not to add newsletter signup box after your post? After publishing Genesis theme modifications article, many Genesis theme users requested us to write tutorial on adding newsletter signup box. So here in this article we’ll share a way by which you can add a newsletter signup box after your post in Genesis powered websites.

Brian Gardner has already published article on same topic, his method is based on default ‘Genesis eNews and updates’ widget. But while implementing newsletter signup box using that guide, we’ve faced some difficulties. Method given by Brian works but main problem is you can not add newsletter signup box at both places – in widget area and below post because same CSS applied to both area so signup box in widget area will look weird. Many users want to add newsletter signup box at both places so here we’ll show best method to do that, add default ‘Genesis eNews and updates’ widget in primary sidebar widgets area and use method provided here to add newsletter signup box below your post. Although our method is different, still it is based on Brian’s method so credits goes to him.

Newsletter Signup Box Preview

Adding this signup box in Genesis child themes is relatively simple. Just follow the simple steps given below and add professional looking signup box like shown in above image after your posts.

Step #1

In WordPress Dashboard -> Appearance -> Editor -> Look into right column for function.php file, open that file and add following code at the end of it.

A) Code Snippet for FeedBurner Users:

/** Add a Newsletter Signup Box After Posts */
function add_newsletter_box() {
if(is_single()) {
?>

<div id="newsletterbox">
<div class="white-border">
<div class="newsletterbox-wrap">
<h4>Join Our Newsletter</h4>
<p>Join over 5,000 people who get free and fresh content delivered automatically each time we publish.</p>
<form id="subscribe" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Google/FeedburnerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input id="subbox" type="email" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...' } " onfocus=" if ( this.value == 'Enter your email address...') { this.value = '' }" value="Enter your email address..." />
<input type="hidden" value="Google/FeedburnerID" name="uri">
<input type="hidden" value="en_US" name="loc">
<input id="subbutton" type="submit" value="Sign Up">
</form>
</div>
</div>
</div> <?php
}
}
add_action ( 'genesis_after_post_content', 'add_newsletter_box', 10, 1);

Note: Don’t forget to change “Google/FeedburnerID” text by your actual Google/Feedburner ID at two places.

B) Code Snippet for MailChimp Users:

/** Add a Newsletter Signup Box After Posts */
function add_newsletter_box() {
if(is_single()) {
?>
<div id="newsletterbox">
<div class="white-border">
<div class="newsletterbox-wrap">
<h4>Join Our Newsletter</h4>
<p>Join over 5,000 people who get free and fresh content delivered automatically each time we publish.</p>
<form target="_blank" class="validate" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" method="post" action="http://techlila.us5.list-manage.com/subscribe/post?u=eefa99bc3d40d94a1820fed4b&amp;id=b28d5bf727">
<input type="email" required="" placeholder="Enter your email address ..." id="mce-EMAIL" class="email" name="EMAIL" value="">
<input type="submit" class="button" id="mc-embedded-subscribe" name="subscribe" value="Sign Up">
</form>
</div>
</div>
</div>
<?php
}
}
add_action ( 'genesis_after_post_content', 'add_newsletter_box', 10, 1);

Note: Don’t forget to change “form action URL” by your MailChimp form action URL. You’ll find your form action URL in MailChimp -> Lists -> For Your Website tab and choose first option from dropdown – Signup Form Embed Code and look for your form action URL (<form action=”YOUR MAILCHIMP ACTION URL” ).

If you are using AWeber or any other service then just change code between <form> </form> tags accordingly.

Step #2

Download the newletter box graphics and extract them in “/images/” folder of your Genesis child theme. This awesome graphics created by Brian, we’ve just added one “enews-ribbon-blue.png” image and changed enews.png file.

Step #3

In WordPress Dashboard -> Appearance -> Editor -> style.css. Add following code and update the file.

/* Newsletter Box below Posts
------------------------------------------------------------- */
#newsletterbox {
background-color: #f5f5f5;
border: 10px solid #e4e4e4;
margin-top: 30px;
}
#newsletterbox .white-border {
border: 1px solid #fff;
}
.newsletterbox-wrap {
background: url("images/enews-ribbon.png") no-repeat scroll left top transparent;
margin: -17px -18px;
overflow: hidden;
padding: 45px 30px 40px;
text-align: center;
text-shadow: 1px 1px #fff;
}

.newsletterbox-wrap h4 {
text-align: center;
}

.newsletterbox-wrap p {
margin: 0 35px 20px;
text-align: center;
}
.newsletterbox-wrap input[type="email"] {
background: url("images/enews.png") no-repeat scroll left center #fff;
box-shadow: 0 0 5px #ccc inset;
color: #999;
font-family: 'proxima-nova',sans-serif;
font-size: 12px;
margin: 0 5px;
padding: 15px 0 15px 45px;
width: 40%;
}

.newsletterbox-wrap input[type="submit"] {
box-shadow: 0 1px 1px #a24a1d;
font-size: 14px;
font-weight: bold;
padding: 10px 15px;
text-transform: uppercase;
}

This CSS will work for FeedBurner and MailChimp users, if you’re using any other service then change the code accordingly because it’s hard to us to provide code for each service as there are a number of different services that you can use. Don’t forget to change the name of the image to “enews-ribbon.png” if you want to use another colored image, e.g. enews-ribbon-blue.png.

If you’re facing any difficulties while adding a newsletter signup box then let us know in form of comments.

Comments

  1. Dilawer Pirzada says

    You should not upload the images in your own server although this is illegal. Also you didn’t give the credits to the creator of this signup newsletter box, I mean Mr. Brian Gardner.

    • says

      Dilawer, thanks for notifying, we just forgot to add the credits. Although our method is totally different still it is based on Brian’s method so we’ve updated the article and added credits to Brian Gardner. We’ve uploaded the graphics on our server because we’ve added one extra image and also changed one image so we don’t think it is illegal.

  2. says

    Hi Rajesh
    Used it after reading Brian’s original article, but good to see you spreading the word in the Genesis community.

    It gets results and… it looks good.

    • says

      Yeah, when I read Brian’s article I tried to implement signup box, actually I like the graphics of that signup box. But after facing some problems, I tried to find out solution on that problems and now shared the solution here. Thanks.

    • says

      Many people face problems because they don’t have coding knowledge, it’s nice to hear that our tutorial is useful for those people who don’t have any experience in coding, thanks :)

  3. Joseph Adediji says

    Great tutorial, I just added it to my blog now, but I will love if there is a tutorial on integrating it with MailChimp.

  4. Chris says

    How do I get the actual box? the sign up bar the title and text show up, but not the actual surrounding box or images? Please help!

  5. says

    Hi Rajesh,

    It seems that the source code in your post is mess up format, could you please help us to fix it. Right now, in my browser it’s display like this one:
    /** Add a Newsletter Signup Box After Posts */
    function add_newsletter_box() {
    if(is_single()) {
    ?>

    <div id="newsletterbox">
    <div class="white-border">
    <div class="newsletterbox-wrap">
    <h4>Join Our Newsletter</h4>
    <p>Join over 5,000 people who get free and fresh content delivered automatically each time we publish.</p>
    <form id="subscribe" onsubmit="window.open( ‘http://feedburner.google.com/fb/a/mailverify?uri=Google/FeedburnerID’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"&gt;
    <input id="subbox" type="email" name="email" onblur="if ( this.value == ” ) { this.value = ‘Enter your email address…’ } " onfocus=" if ( this.value == ‘Enter your email address…’) { this.value = ” }" value="Enter your email address…" />
    <input type="hidden" value="Google/FeedburnerID" name="uri">
    <input type="hidden" value="en_US" name="loc">
    <input id="subbutton" type="submit" value="Sign Up">
    </form>
    </div>
    </div>
    </div> <?php
    }
    }
    add_action ( ‘genesis_after_post_content’, ‘add_newsletter_box’, 10, 1);

    Thank you so much,
    Steven
    steven recently posted – Test postMy Profile

  6. says

    Hi Rajesh,

    I already have this Subscription box on my Blog. Because, I’m using Blogging Cage Child theme. This theme contains it. But, That is for feedburner users. I’m using MadMimmi. So, How to integrate it with Madmimmi. :-)

  7. says

    Hello Rajesh,
    this is very good tutorial to add newsletter signup box below posts. but it is only for genesis framework, actually I was looking for normal wordpress themes. because 90% wordpress users used normal themes. So it is better if you can post a same tutorial for normal themes.
    thanks

  8. says

    Rajesh,
    What code to I add to my page to get the newsletter box to show up? I copied all of the PHP code and the CSS code. I uploaded the image files to the /images folder of my child theme. I just don’t know how to get the actual box in my post or on a page.

    Thank you in advance.
    Jack

 Comment Policy

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

CommentLuv badge