Good Optin forms or Newsletter signup forms is the essential thing which you need to get it right for converting regular readers to your email subscribers.
Most commonly Newsletter signup forms are added below the content so that it will be easy for your readers to subscribe right after reading your article.
So here I am going to teach you how to add a special widget area called Newsletter below your content.
This widget area can be used to place Optin forms,Affiliate banners,Adsense Ad tags or even polls as you can seen below this post.
You may also like to read this article which discusses about Adding banner Ads and Adsense code below Primary Menu on Genesis Child Themes.
lets get started
Open your current Genesis child themes functions.php and add the following code at the end of the file.
// Register newsletter widget area
genesis_register_sidebar( array(
'id' => 'newsletter',
'name' => __( 'Newsletter', 'custom-theme' ),
'description' => __( 'This is the newsletter section.', 'custom-theme' ),
) );
// 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_singular( 'post' ) )
genesis_widget_area( 'newsletter', array(
'before' => '<div id="newsletter">',
) );
}
If you like to move this the Widget after the Author box then,In above code replace the line 8 with the following line
add_action( 'genesis_before_comments', 'custom_add_newsletter_box' );
You can refer to Genesis Visual Hook reference guide for customizing the Widget area position.
Finally,You can style the Widget area by adding the following code in your current Genesis child themes style.css
/* Newsletter */
#newsletter {
background-color: #f4f4f4;
color: #000;
padding: 32px;
text-align: center;
}
#newsletter p {
margin-bottom: 24px;
margin-bottom: 1.5rem;
}
#newsletter input[type=text] {
outline:none;
background:#f1ead6;
vertical-align:top;
border:1px solid #c5c5c5;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
width:200px;
padding:8px 3px;
line-height:17px;
text-align:left;
margin-right:7px;
}
#newsletter input[type=submit] {
border:0;
padding:0;
height:37px;
cursor:pointer;
margin-top:6px;
background:#ff6600;
}
The above code simply sets the background color as #f4f4f4,text color as black and formats the Submit button and Email field like Optin form below this post.
If you need any help regarding styling you can contact me here or leave a comment below and also dont forget to vote for your favorite theme below.
