• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2551

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Register
  • Videos
  • Log in

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:

email newsletter form

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:

smaller screen

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:

lines@2x

lines

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.

twitter enews widget

Metro Pro

Primary Sidebar

How it works :

I write tutorials for you which include the custom code you need for a flat $49.99 fee. You get 1 tutorial request as well as access to all 2500+ existing tutorials for 1 month.

  • Premium Members Only
  • Access Premium Tutorials
  • Support