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

Post author By Brad Dalton
Post date October 24, 2013
7 Comments on 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.

Tags Metro Pro Theme

7 replies on “Add Metro Pro’s Newsletter Subscribe Box To Any StudioPress Theme”

Hi,
I used Metro Pro theme for my blog but i don’t have Email Newsletter Subscribe box, can you help me how to will have it.
Thanks

Tina.

Install the Genesis eNews Extended plugin and drag the eNews widget into any widget area.

Brad:

I’ve installed the code, and see the widget area in my dashboard, but the sign-up box is not appearing after my posts. I’m not sure what I’m missing. Thoughts?

Send me a copy of the child theme and i’ll check it for you Susan.

The code looks o.k and its the same as i use on my site.

brad at my domain

Looks like you modified the code and changed the i.d’s and div class which where all different. They need to match or the registered widget will not hook into position.

This is what you have in your functions file which is not the same as the code in this post:

// Add after post widget area (for eNews Extended widget)
genesis_register_sidebar( array(
    'id' => 'after-post',
    'name' => __( 'After Post', 'jane' ),
    'description' => __( 'This is a widget area that can appear after individual posts', 'jane' ),
) );

add_action( 'genesis_after_post_content', 'sp_genesis_box', 9 );
	function sp_genesis_box() {
	if ( is_singular( 'post' ) )
		genesis_widget_area( 'after-post', array(
			'before' => '<div class="genesis-box widget-area">',
			'after' => '</div>',
	) );
}

I think what happened was that I used some of Brian’s code, and then thought I had replaced it with yours, but it appears I didn’t copy your code properly!

Thanks for taking care of this for me! I’m book-marking this post now 🙂

This is why I like Genesis so much: it’s flexible and it lets you add bits everywhere. After doing so for some sites it all becomes simple. And with conditional tags you really can say you can customize your site to your liking.
My favorite customization is when I add “before post” widgets and after post widgets and I like your trick of adding that special “per post” widget you can customize to show specific content as you did here “CONTENTS OF THIS POST” although I’ll place that at the beginning of the article as in sidebar goes somehow unnoticed.