Add Metro Pro’s Newsletter Subscribe Box To Any StudioPress Theme

In this tutorial, we’ll take all the code and other stuff needed to add the same e-Mail Newsletter subscribe box included on the Metro Pro theme and add it to any other StudioPress child theme.

In this example, i’ll be using the Sample child theme however you could easily use the same code on any other theme, some of which may require a small amount of code tweaking.

And here what it looks like without any additional styling:

Note: The hook in this code works on HTML 5 child themes only running Genesis 2.0.

Register & Hook In New After Entry Widget

This PHP code should be pasted at the end of your child themes functions.php file.

If you already have a after post widget, you can either changes the classes in the code or replace it with this code:

//* Hooks after-entry widget area to single posts
add_action( 'genesis_entry_footer', 'metro_after_post'  ); 
function metro_after_post() {

    if ( ! is_singular( 'post' ) )
    	return;

    genesis_widget_area( 'after-entry', array(
		'before' => '<div class="after-entry widget-area"><div class="wrap">',
		'after'  => '</div></div>',
    ) );

}

genesis_register_sidebar( array(
	'id'          => 'after-entry',
	'name'        => __( 'After Entry', 'metro' ),
	'description' => __( 'This is the after entry section.', 'metro' ),
) );

Add Styling

The CSS code needs to be pasted before the start of your Media Queries near the end of your child themes style.css file.

/* Metro Pro E-mail Subscribe Box After Entry
--------------------------------------------- */

.after-entry .widget-title {
	font-size: 20px;
}

.after-entry .enews-widget input {
	width: 50%;
}

.after-entry .enews-widget input[type="submit"] {
	width: auto;
}

.after-entry,
.after-entry .wrap {
	overflow: hidden;
}

.after-entry {
	background: url(images/lines.png);
	background-size: 8px 8px;
	margin-top: 32px;
	margin-top: 3.2rem;
	padding: 16px;
	padding: 1.6rem;
	text-align: center;
}

.after-entry .wrap {
	background-color: #fff;
	padding: 32px;
	padding: 3.2rem;
}

.after-entry p {
	margin-bottom: 20px;
	margin-bottom: 2rem;
}

Media Queries

This CSS code needs to be added to the different sections of your Media Queries:

/*
Metro Pro E-mail Subscribe Box Media Queries for Mobile Responsiveness
---------------------------------------------------------------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {

	.after-entry {
		background-image: url(images/lines@2x.png);
	}
}
@media only screen and (max-width: 767px) {

        .after-entry .enews-widget input,
	  .after-entry .enews-widget input[type="submit"] {
		width: 100%;
		margin-bottom: 10px;
	}
}

Looks good on smaller screens:

Images

You’ll also need to upload 2 small images which create the border of lines around the box.

Upload these 2 images to your child themes image folder:

Install Genesis eNews Extended Plugin

This example uses the Genesis eNews Extended plugin where you can also add a Twitter follower Count button inside the widget.