Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

How to add a Double Email Optin PopUp to WordPress

Whew! What a long title! So what the hell is a Double Email Optin Popup majiggy?  I probably have the term completely wrong, but it’s when you click on a button, then a light box pops up with an optin form.  It supposedly leads to more sign ups, etc., etc.  Anyway, this is how you do it! 

The steps are going to be pretty easy.  I would’ve made this a video, but I’m finding it harder and harder to find 15 minutes of actual quiet where I won’t wake up a baby, or bother my coworkers.  Here we go:

Step 1 – Create a new widget area

If you saw my last video, this is as simple as copy and paste.  If you didn’t, here’s the code below:

[gist id=”363bb260f633ba1e6c91″ file=”register-new-widget-area.php”]

Step 2 – Add it to the front-page.php

Once you register it, just add it to front-page.php.  Alternatively, you can add it to the functions file so that it’s on every page, but in this example, I just want it on the front page.

Open front-page.php and add the following:

[gist id=”363bb260f633ba1e6c91″ file=”add-widget-area.php”]

Just make sure you add it within a function on the homepage.  So if you’re using a theme from StudioPress, most of them have a “helper” function or something on the front-page.php already.  Add it with the clump of other widget areas.

Things are getting fun!!!

Step 3 – Enqueue your light box script

I’m going to be using pretty box, no real reason, I just want to =).  There’s probably a million Lightbox scripts to choose from,  so pick one that you like and that does inline HTML.

ENQUEUE!!!!

[gist id=”363bb260f633ba1e6c91″ file=”enqueue-pretty.php”]

What that awesome snippet does is IF it’s on the front page, register the script and styles, then enqueue them, otherwise, leave it alone.  Then, we add the javascript to the same function, because we’re awesome, and that’s how we roll.

If you’re using Genesis SandBox Theme, it’s already included in the scripts.php file, just uncomment if it isn’t already. I love that freakin’ theme.

We’re almost done!!!!

Step 4 – Let’s hide our widget area.

Go into your CSS, get the ID of the widget area we created. In this case, it’s sfws-optin. Hide it.

[gist id=”363bb260f633ba1e6c91″ file=”hide-it.css”]

Easy.

Step 5 – Let’s add the link and test it out!!

So in my code I’m going to add

<a href="sfws-optin" rel="prettyPhoto"> Click my link and watch my light box appear </a>

I click it and….

Boom! That’s all folks!!! Now I can add anything into that widget area (it will be an email optin). Style it however I want, etc., etc., the possibilities are ENDLESS!!

Hope you enjoyed this tutorial. Feel free to ask questions =).

On a side note, I may change this to FancyBox, I like the ‘x’ being on the top right instead of the bottom. To do so, all I would have to do is change the scripts that are enqueued to the FancyBox ones. The update the images, etc., accordingly, but all the grunt work is already done! Yay!
Advertisement
About the Author
What's UP! This is my site, I write 99% of the articles on here. I'm also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I've made courses and have a membership as well to help get you on your feet!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top