Newsletter Signup Box After 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.

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 firing away in form of comments.