How to Add a Newsletter at the End of Every Wordpress Post

If you want to expand your readership and establish a strong online relationship with your readers, you should then provide them with fresh, regular and relevant content. You can then broadcast new contents on your site through newsletters.

One of the most effective ways of getting your readers opt-in into your newsletter is by placing the newsletter form in strategic areas of your site – the sidebar or at the bottom of each post.

Here are easy-to-follow steps on how you can add a newsletter box area at the end of your posts:

1.    Register the widget area. You need to create an area below each post. This will serve as the placeholder of your newsletter. Below is a code snippet that you should copy into your child theme’s function.php file:

/*Register widget are for newsletter*/
genesis_register_sidebar_array( array (
‘id’ => ‘newsletter’,
‘name’ => __( ‘Newsletter’, ‘customtheme’ ),
‘description’ => __( ‘This is the newsletter area. ‘, ‘customtheme’ ),
    ) );

2.    Create the hook function.
You need to have a function which will hook the widget area of your newsletter to the end of each blog post. Below is a code snippet that you should copy into your child theme’s function.php file:

/* Hook the newsletter widget area at the end of every post*/
add_action( ‘genesis_after_post_content’, ‘customtheme_newsletter’ );
function customtheme_newsletter () {
    if ( ! is_singular( ‘post’ ) )
    return;
    genesis_widget_area( ‘newsletter’, array(
        ‘before’ => ‘<div id=”newsletter widget-area’>’,
    ) );
}

3.    Configure your newsletter form. If you want to use the default “eNews and Updates” plugin of Genesis, you need to place it in your newsletter widget area. You can style your own CSS or copy the code provided below:

/*CSS style for eNews and Updates*/
.enews-widget {
     background-color: #eeeded;
    border: 8px solid #0610b0;
    margin: 0 50px;
}
.enews-widget .widget-wrap {
    border: 2px solid #fafaff;
}
.enews {
    background:  url (enter the URL of your custom image here) no-repeat top left;
    margin: -16px -17px;
    overflow: hidden;
    padding: 44px 49px 39px;
    text-align: center;
    }
.enews #subbox {
    -moz-box-shadow: 0 0 2px #040fc7;
        -webkit-box-shadow: 0 0 2px #040fc7;
        background: #fafaff url(enter the URL of your custom image here) no-repeat center left;
        box-shadow: 0 0 2px #040fc7;
        color: #010a90;
    margin-top: 10px;
    margin-right: -7px;
    margin-bottom: 10px;
    margin-left: 0px;
          padding: 12px 0 12px 36px;
       width: 250px;
}
.enews #subbutton {
    background-color: #010661;
    color: #fafaff;
    padding: 12px 10px;
}
.enews #subbutton:hover {
    background-color: #000550;
}

If you are using Mailchimp, then just add a text widget in your newsletter widget area. Paste your Mailchimp code in the text widget.

You can also style your Mailchimp newsletter form using css code below:

/* For Mailchimp Newsletter*/
#newsletter {
background-color: #f9f8f8;
 border: 10px solid #0210f1;
margin: 9px 40px 0;
}
#newsletter .white-border {
    border: 1px solid #fafaff;
}
.newsletter-wrap {
    background: url(enter the URL of your custom image here) no-repeat top left;
    margin: -16px -18px;
    overflow: hidden;
    padding: 40px 30px 40px;
    text-align: center;
}
.newsletter-wrap p {
    text-align: center;
    margin: 0 48px 18px;
}
.newsletter-wrap input[type="email"] {    
    -moz-box-shadow: 0 0 4px #010dce inset;
    -webkit-box-shadow: 0 0 4px #010dce inset;
    background: #fafaff url(enter the URL of your custom image here )no-repeat center left;
    box-shadow: 0 0 5px #010dce inset;
    font-family: 'Lora', serif;
    margin: 0 -7px 8px 0;
    padding: 12px 0 12px 36px;
    width: 55%;
}

Image by digitalart (freedigitalphotos.net)

Article By: Wasim Ismail

Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.


Comments are closed.

Three Measures To Keep Track Of A Cell Mobile Phone appforspy.com mobile tracker app