How to Add a Subscription Pop-up to StudioPress Minimum 2.0

Yesterday, StudioPress released version 2.0 of its Minimum theme – a Genesis child theme, of course. As the version number implies, Minimum 2.0 has a predecessor: Minimum 1.0. StudioPress is currently updating a great deal of its child themes.

The main goal of this operation is adding mobile responsive design to its themes. In some cases the design of the child theme also gets a makeover to give it a more contemporary look and feel. Recent examples of such revamped themes are Going Green, Outreach, and – the yesterday released – Minimum.

Personally, I definitely like the clean and minimal design of the Minimum child theme. In addition, all pages now display a call-to-action to subscribe. Because of these two qualities, I am considering Minimum for one of my projects.

What the theme does not offer out-of-the box is a graphical way to add a subscribe link. In order to supply the different page types with our own subscribe link, we have to manually edit the theme’s page-title.php file with a plain text editor.

Examples of such an editor are Windows Notepad or the free alternative Notepad++. On Linux you might use gedit (GNOME) or Kate (KDE).

Basically, the page-title.php file includes six variations of the following line of code:

echo '<div id="page-title"><div class="wrap"><p>'
 . esc_html( get_bloginfo( 'description' ) )
 . '<a href="#">' . __( 'Subscribe Now', 'minimum' ) 
 . '</a></p></div></div>';

Are you wondering why there are six versions of this code? Since five page types get a slightly different text next to the [Subscribe Now] button. These five are:

• home – WordPress tagline
• 404 – Ooops!
• portfolio archives and single post – From the portfolio
• pages – WordPress tagline
• blog – From the blog

The blog page type includes authors, archives, categories, search, tags, and single blog posts. The sixth version is for any remaining page types, which will display the WordPress tagline too.

Here at wilwebs.com we use Google’s Feedburner for our subscriber list. What we need to do, is replace this part in the code above

href="#"

with our own Feedburner subscription link:

href="http://feedburner.google.com/fb/a/mailverify?uri=wilwebs"

This approach has a downside, though. When a visitor hits the [Subscribe Now] button, he is directed to a subscription form on the Feedburner site. Hence, he leaves our site. Will he come back after the completion of the subscription process?

A better solution would be offering the subscription form in a pop-up window, so that he does not have to leave or site to subscribe to our list. We can achieve this by adding a little JavaScript. When this scares you, it is really easy and can be completed in two simple steps.

Step #1 Adding JavaScript to the Page Headers

What we have to do first is copy some JavaScript and paste it in the wp_head() text block of the Genesis Theme Settings. This is the first text area of the Header and Footer Scripts box – usually at the bottom of the theme panel. Here is the code:

<script language="javascript" type="text/javascript">
<!--
function feedpopup(url) {
newwindow=window.open(url,'name','height=475,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
// -->>
</script>

href="#"

href="http://feedburner.google.com/fb/a/mailverify?uri=wilwebs"
 target="_blank" onclick="return
 feedpopup(\'http://feedburner.google.com/fb/a/mailverify?
uri=wilwebs\');"