Full Width Opt-in on the Genesis Framework

Have you started an e-mail list yet?  If not, you really should consider starting one.  E-mail lists are a great way to communicate directly with your customers and visitors in a more personal way.  From a sales perspective, the conversion rate for e-mail list subscribers is much higher than random visitors to your site.  So, if you haven’t started an email list, it’s a good idea to get one going.

You have a bunch of choices around the web for e-mail list provider.  I personally use MailChimp but other popular choices include AWeber and Office AutoPilot.  We won’t get into setting up the list itself or the differences between the services here, but if you want more information, check out this page to get started with MailChimp.

Once you have a list setup with pages, opt-in forms, code, etc, it is time to get subscribers.  But, where do you put your opt-in form?

Full Width Opt-in Form

Depending on who you talk to, there are several good places to put an opt-in form.  For my site, I decided to put the form just above the content on the home page.  I didn’t want to alter the page structure too much but I wanted the opt-in form to be full width.  Luckily, using the Genesis framework and a plugin, Simple Hooks, it was pretty simple.

One way to stick different bits of website goodness to certain spots on your theme is to use hooks.  Hooks are certain actions that are executed by WordPress at certain times.  These hooks can be built into the core of WordPress or added to a framework, like Genesis.

For my full width opt-in form, I used the genesis_before_content_sidebar_wrap hook.  This hook executes after the header but before the content and sidebar.  Just the spot we need for a full width opt-in form.  Let’s take a look at…

The Code

<?php
if ( is_front_page() ) {
?>
   <div style="margin-left: auto; margin-right: auto; width: 80%;">
   <h1>Are You Taking Advantage Of QR Codes?</h1>
   If not, you could be missing out on a great tool for your business that will:
   <ul style="padding-left: 30px;">
      <li style="padding-top: 15px;">Create A Shortcut For Your Customers To Visit Your Website</li>
      <li style="padding-top: 15px;">Easily Find Your Business Using GPS</li>
      <li style="padding-top: 15px;">Get More Social Proof By Directing Visitors To Review and Social Sites</li>
   </ul>
<!-- Begin MailChimp Signup Form -->

{your opt-in form code here }
<!--End mc_embed_signup-->
<hr />
<?php
} else {
?>

{put code here that you want to display full width on all pages except the front page }
<?php
}
?>

What Does All This Code Do?

Here is a quick rundown of the code.  The first few lines checks to see if the page is the front page.  Since we only want to display our opt-in on the front page, this part gives us that option.  Later in the code, there will be a spot to put some code that will display at the same spot on every page except the front page.

Next, we have a <DIV> tag that controls the width of the form container and centers it on the screen.  Then comes your opt-in form code.  In this example, I’m using MailChimp.  The form code was copied from their site and pasted on the page.  After that, a horizontal line (<HR>) is displayed, and we get back into PHP to finish up the IF-ELSE statement.

Within this ELSE statement, you can put code that you want to display at full width on every page except the front page.  If you only want to display something full width on the front page, you don’t have to put anything here.

Here is the result:

Wrap-up

There you have it, one way to create a full width opt-in on the Genesis framework.  With this setup, you can display a bit of full width content on just a few pages or all of them.

In a future post, we will look at a bit of code that will hide the form fields until the user clicks on a button or link.  In many cases, asking the user to click on a button or link before opting-in to your list will increase your conversions.  We’ll get into the idea and research behind that theory in the next post.  Until then, good luck with your list.